Is it possible to Draw Continuous repeated Image From one Index to Another Index

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 ?

https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/ChartAnnotations/AnnotationsAreEasy/drawExample.ts

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?

Version

3.4.652

Images

JavaScript CustomAnnotation

Jerin Mathew asked 1 month ago

You must login to post comments

Answers (1)

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;
  }
}