-
"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?" 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: |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
Your code snippet lacks sufficient context. For example, I don't know what the type of 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? |
Beta Was this translation helpful? Give feedback.
-
I'm very sorry for the inconvenience I have caused you. "This is the location of the modified code. Replace it with the code above, and you'll be able to see the effect." |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
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.