New TextBox Markup released

Visualization Solutions HOOPS Visualize Web
,
21

I used AI to quickly prototype this function to replace the existing one in text_insertion.js:

async function createPngImageFromText(textSettings) {
  // Grab the image element
  const imgElement = document.getElementById("myImage");

  if (!imgElement) {
    throw new Error("Image element #myImage not found");
  }

  // Create an ArrayPngImage from the image's Base64 data
  const base64Data = imgElement.src.split(",")[1]; // strip "data:image/png;base64,"
  const binaryStr = atob(base64Data);
  const len = binaryStr.length;
  const buffer = new Uint8Array(len);

  for (let i = 0; i < len; i++) {
    buffer[i] = binaryStr.charCodeAt(i);
  }

  // Create the ArrayPngImage using HOOPS Web Viewer API
  const image = new ArrayPngImage(buffer, imgElement.width, imgElement.height);
  return image;
}

You will need to include your image tag called “myImage” in text_insertion.html, something like:

<img id="myImage" src="data:image/png;base64,iVBORw0KGgoA....and..so..on" style="display:none;">
22

Yes, I have tried to make some modifications, but what I want is the ball mark effect. The border of this part is set as a rectangle by default and I can’t change it to a circle? Are there any other methods?

image
image454×300 25.3 KB

23

The text insertion example is designed for text boxes. That said, the box itself is just a mesh and then a texture is applied. You will need to create your own circle mesh instead of a quad/box mesh. Please refer to the function _createTextBoxItem which creates the mesh. As a reference, the topic of mesh creation is covered in our docs.