Skip to main content

FreehandDrawingAnnotation

FreehandDrawingAnnotationšŸ“˜ is exported by scichart-financial-tools. It stores a drawn stroke as a polyline with many points. It inherits serialization and multi-point labels from PolyLineAnnotationšŸ“˜, then adds editing behavior that is better suited to drawn shapes: body moving, corner resize handles, optional aspect-ratio locking and an optional bounding box outline.

Most applications create this annotation through FreehandDrawingModifieršŸ“˜.

tip

In order to select the annotation click on the drawn line. Clicking not on the line does not select.

const {
    EXyDirection,
    NumberRange,
    NumericAxis,
    SciChartJsNavyTheme,
    SciChartSurface
} = SciChart; // or import from "scichart"
const { FreehandDrawingAnnotation } = SciChartFinancialTools; // if using npm, import from "scichart-financial-tools";

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
});

sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(0, 10) }));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(8, 15) }));

sciChartSurface.annotations.add(
    new FreehandDrawingAnnotation({
        // Freehand drawings are stored as many polyline points. This static example
        // uses a few points so the editable shape is easy to inspect.
        points: [
            { x: 1, y: 10 },
            { x: 1.6, y: 11.7 },
            { x: 2, y: 12 },
            { x: 2.7, y: 11.2 },
            { x: 3, y: 11 },
            { x: 4, y: 13 },
            { x: 5, y: 12.4 },
            { x: 6, y: 11 }
        ],
        stroke: "#22C55E",
        strokeThickness: 2,
        isEditable: true,
        // Body dragging lets users move the whole captured stroke.
        allowMove: true,
        // XyDirection enables both horizontal and vertical resize handles.
        resizeDirections: EXyDirection.XyDirection,
        keepAspectRatioOnResize: true,
        // The outline gives freehand strokes resize handles without exposing every point as a grip.
        showBoxOutline: true,
        showBoxOutlineOnlyWhenSelected: false
    })
);

For interactive pointer capture, see FreehandDrawingModifier.

See Alsoā€‹