Hi
I tried with the example below and able to draw the image inside the chart. But i need to draw the continues image from one index to another index. Is it possible to draw it with Scichart ?
return new CustomAnnotation({
x1,
y1,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" style="background-color:blue">
,
<image href="test/images.jpeg" height="${height}" width="${width}"/>
</svg>
});
instead of height and width is it possible to pass x2 and y2 as index.
What i am looking is mentioned in the attachments.
Also when the chart is zooming need to increase or decrease the size of the chart and fit to the index provided. Is it possible?
- Jerin Mathew asked 1 month ago
- You must login to post comments
Hello,
It is possible to extend CustomAnnotation class to support this behavior:
Live Example
class ScalableAnnotation extends CustomAnnotation {
private initialXDiff: number;
private initialYDiff: number;
public update(
xCalc: CoordinateCalculatorBase,
yCalc: CoordinateCalculatorBase,
xCoordSvgTrans: number,
yCoordSvgTrans: number
): void {
super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
const borders = this.getAnnotationBorders();
const x1Coordinate = this.getX1Coordinate(xCalc, yCalc);
const y1Coordinate = this.getY1Coordinate(xCalc, yCalc);
const x2Coordinate = this.getCoordinate(
this.x2,
xCalc,
this.xCoordinateMode
);
const y2Coordinate = this.getCoordinate(
this.y2,
yCalc,
this.yCoordinateMode
);
const width = Math.abs(x2Coordinate - x1Coordinate);
const height = Math.abs(y2Coordinate - y1Coordinate);
this.setSvgAttribute("width", width);
this.setSvgAttribute("height", height);
const borderX1 = x1Coordinate + this.xCoordShift;
const borderY1 = y1Coordinate + this.yCoordShift;
const borderX2 = borderX1 + width;
const borderY2 = borderY1 + height;
this.setAnnotationBorders(borderX1, borderX2, borderY1, borderY2);
this.updateAdornerInner();
}
// this override is required if annotation should be editable
calcDragDistance(xyValues: Point): void {
if (!this.prevValue) {
this.prevValue = xyValues;
return;
}
let { x1, x2, y1, y2 } = this.getAnnotationBorders();
if (
this.adornerDraggingPoint === EDraggingGripPoint.Body ||
this.adornerDraggingPoint === EDraggingGripPoint.x1y1
) {
this.x1 = this.x1 - (this.prevValue.x - xyValues.x);
this.y1 = this.y1 - (this.prevValue.y - xyValues.y);
this.x2 = this.x2 - (this.prevValue.x - xyValues.x);
this.y2 = this.y2 - (this.prevValue.y - xyValues.y);
}
this.prevValue = xyValues;
}
}
- Jim Risen answered 1 month ago
- You must login to post comments
Please login first to submit.