Pre loader

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

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
2

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
  • You must to post comments
0
0

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;
  }
}
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.