PartImageLabel
- class cee.mrk.PartImageLabel()
Defines a part showing an image attached to a 3d coordinate that can be shown in a
MarkupModel
The image is provided as a
Texture
The texture can be created from ImageData or from a HTMLImageElement.The label will always be visible and rendered in front of any model. The anchor point will be rendered at the depth of the specified 3d coordinate.
Creating the texture
To create the ImageData for the texture you have some options:
Create an offscreen canvas element, and use the 2d context to render text, draw lines, etc
let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); canvas.width = 200; canvas.height = 50; ctx.font = "20px Georgia"; ctx.fillStyle = "red"; ctx.fillText("Hello EnvisionWeb!", 10, 40); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const texture = cee.Texture.fromImageData(imageData, { generateMipmaps: false, wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE, minFilter: cee.TextureMinFilter.LINEAR }); part.set(texture, pickInfo.intersectionPoint);
Provide an RGBA array with pixel data for the image
const sizeX = 256; const sizeY = 256; const pixelArr = new Uint8ClampedArray(4*sizeX*sizeY); let idx = 0; for (let y = 0; y < sizeY; ++y) { for (let x = 0; x < sizeX; ++x) { pixelArr[idx++] = y%2 == 0 ? 255 : 0; pixelArr[idx++] = x%2 == 0 ? 255 : 0; pixelArr[idx++] = (x+y)%2 == 0 ? 255 : 0; pixelArr[idx++] = 255; } } const imageData = new ImageData(pixelArr, sizeX, sizeY); const texture = cee.Texture.fromImageData(imageData, { generateMipmaps: false, wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE, minFilter: cee.TextureMinFilter.LINEAR }); part.set(texture, pickInfo.intersectionPoint);
Render HTML using SVG/XML
// Render HTML with SVG and XML const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 300; canvas.height = 200; // Background gradient { var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); grd.addColorStop(0, "#eeeeee"); grd.addColorStop(1, "#ffffff"); ctx.fillStyle = grd; ctx.fillRect(0, 0, canvas.width, canvas.height); } // Draw border { ctx.lineWidth = 2; ctx.fillStyle = "black"; ctx.strokeRect(0, 0, canvas.width, canvas.height); } const data = ` data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='${canvas.width}' height='${canvas.height}'> <foreignObject width='100%' height='100%'> <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px;font-family:verdana; padding-top: 0px; padding-right: 10px;padding-bottom: 10px;padding-left: 10px;'> <h1>Region ${this.m_labelMrkModel.partCount}</h1> <table> <tr><td><b>Surface Area</b></td><td></td><td>0.02e-4 m^2</td></tr> <tr><td><b>Minimum</b></td><td><b>Average</b></td><td><b>Maximum</b></td></tr> <tr><td>0.1e-2 m^2</td><td>0.2e-2 m^2</td><td>0.4e-2 m^2</td></tr> <tr><td><b>Flow rate:</b></td><td></td><td>0.2e-2 m^3/s</td></tr> <tr><td> </td><td></td><td></td></tr> <tr><td><b>Pressure force:</b></td><td></td><td></td></tr> <tr><td>x: 0.1e-2 N</td><td>y: 0.2e-2 N</td><td>z: 0.4e-2 N</td></tr> </table> </div> </foreignObject> </svg> `; const img = new Image(); img.src = data; const myThis = this; img.onload = (_ev: Event) => { ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const texture = cee.Texture.fromImageData(imageData, { generateMipmaps: false, wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE, minFilter: cee.TextureMinFilter.LINEAR }); myThis.m_pickingImageLabelPart.set(texture, pickInfo.intersectionPoint); }
Note: If you want to use a NPOT (non-power-of-two) texture, make sure you provide texture options
TextureOptions
without mipmap when you generate the texture, e.g.:{ generateMipmaps: false, wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE, minFilter: cee.TextureMinFilter.LINEAR }
Use
MarkupModel.addImageLabelPart
to create a new instance of this class.Example showing HTML text rendered to SVG/XML and shown as PartImageLabel parts:
Methods
Accessors
- cee.mrk.PartImageLabel.attachmentAppearance
Returns an active reference to the attachment appearance settings for this part.
- cee.mrk.PartImageLabel.attachmentLineLength
Length in pixels of the line that attaches the label to its 3D position
Note
attachmentLineLength is deprecated: This property is deprecated and will be removed in a future version. Use
attachmentAppearance.lineLength
instead.
- cee.mrk.PartImageLabel.attachmentPointVisible
Show attachment point
Note
attachmentPointVisible is deprecated: This property is deprecated and will be removed in a future version. Use
attachmentAppearance.anchorPointSize
instead.
- cee.mrk.PartImageLabel.customData
Custom data for the part. This field is not used by EnvisionWeb.
Methods
rayIntersect
- cee.mrk.PartImageLabel.rayIntersect(ray, hitItem)
Picking
- Arguments
ray (
cee.Ray
) –hitItem (
cee.mrk.PartHitItem
) –
- Return type
boolean
set
- cee.mrk.PartImageLabel.set(image, pos)
Set the image to use for the label and the position (3d coordinate) of the label
- Arguments
image (
cee.Texture
) –pos (
cee.Vec3
) –
- Return type
void