How to add text content to a view using a decorator?

[MYDJH]

"Hello, while reading an official example, I tried to add text next to the horizontal line, but it didn't work. Is there any way to achieve this effect?"
The link to the example:https://www.itwinjs.org/sandboxes/iTwinPlatform/Curve%20Fractions
This is my code:

curvesData.forEach((curveData) => {

      const curve = curveData.curve;

      const marker = curveData.curvePointMarker;

      const curvePoint = marker.worldLocation;

      const derivative = curveData.derivativeAtPoint;

      decoratorState.setColor(ColorDef.white);
      decoratorState.setFill(false);
      decoratorState.setLineThickness(5);
      decoratorState.setLinePixels(LinePixels.Solid);
      decoratorState.addGeometry(curve);
      decoratorState.addMarker(marker);


      const arrowEnd = curvePoint.plusScaled(derivative, 1);
      decoratorState.setColor(ColorDef.green);
      decoratorState.setFill(false);
      decoratorState.setLineThickness(1);
      console.log(curvePoint,arrowEnd,"arrowEnd")
      decoratorState.addLine(LineSegment3d.create(curvePoint, arrowEnd)); 


      const normalized = derivative.normalize()!;
      const onStem = arrowEnd.plusScaled(normalized, -1.0);
      const perpendicular = normalized.crossProduct(Vector3d.unitZ());

      const triangle = [
        arrowEnd.clone(),
        onStem.plusScaled(perpendicular, 0.5),
        onStem.plusScaled(perpendicular, -0.5),
      ];
      const linestring = LineString3d.create(triangle);
      const loop = Loop.create(linestring.clone());

      decoratorState.setLineThickness(0);
      decoratorState.addGeometry(loop); 

    const verticalLineLength = 10;
    const verticalLineEnd1 = curvePoint.plusScaled(perpendicular, verticalLineLength);
    const verticalLineEnd2 = curvePoint.plusScaled(perpendicular, -verticalLineLength);

    decoratorState.setColor(ColorDef.red); 
    decoratorState.setLineThickness(2);
    decoratorState.setLinePixels(LinePixels.Code3);
    decoratorState.addLine(LineSegment3d.create(verticalLineEnd1, verticalLineEnd2)); 


  const textPosition = curvePoint.plusScaled(perpendicular, -5); 
  const textProps = {
    text: "Text Here",           
    font: 0,                    
    height: 10,                 
    width: 50,                 
    bold: true,                 
    italic: false,              
    underline: false,           
    origin: textPosition,     
    widthFactor: 1,             
  };
  const textString = new TextString(textProps);
  decoratorState.addText(textString);
    });

  }, [decoratorState, fraction, curvesData]);

The effect I want to achieve:

Thank you very much for your attention, and I look forward to your suggestions

[pmconne]

Your code snippet lacks sufficient context. For example, I don't know what the type of decoratorState is.

Your link produces a 404. I assume it contains some of the missing context. Can you fix it please?

Is this code running on the front-end or back-end?

[MYDJH]

I'm very sorry for the trouble I caused you，This is the latest link to the example.https://www.itwinjs.org/sandboxes/iTwinPlatform/Curve%20Fractions

[MYDJH]

I'm very sorry for the inconvenience I have caused you.
This is the latest link to the example.https://www.itwinjs.org/sandboxes/iTwinPlatform/Curve%20Fractions
Could you please copy and open it in the browser? I'm not sure why clicking directly leads to a 404 error。
You can also find it this way.
https://developer.bentley.com/samples/

"This is the location of the modified code. Replace it with the code above, and you'll be able to see the effect."

[pmconne]

TextString represents text in a geometry stream. Doing anything useful with the text requires access to C and C++ libraries like freetype, which are not accessible from the front-end.

Browsers are really, really good at rendering text. You can use canvas decorations or HTML decorations to get the browser to efficiently render text into your Viewport.

If you really, truly need to render a TextString because the above options do not meet your requirements, and you have access to an iModel on the backend containing the required fonts, you can produce graphics from it using requestElementGraphics.