Class Stroke

Represents an AbstractComponent made up of one or more Paths.

Example

For some Editor editor and Stroke stroke,

Restyling:

editor.dispatch(stroke.updateStyle({ color: Color4.red }));

Transforming:

editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));

Adding:

import {
	Editor, EditorImage, Stroke, Path, Color4,
} from 'js-draw';

const editor = new Editor(document.body);

const stroke = Stroke.fromFilled(
	Path.fromString('m0,0 l100,100 l0,-10 z'),
	Color4.red,
);
editor.dispatch(EditorImage.addComponent(stroke));

Hierarchy (View Summary)

Implements

Constructors

constructor

Properties

contentBBox lastChangedTime

Methods

applyTransformation attachLoadSaveData clone createClone description forceStyle getBBox getExactBBox getId getLoadSaveData getParts getPath getProportionalRenderingTime getSizingMode getStyle getZIndex intersects intersectsRect isBackground isSelectable keyPoints occludesEverythingBelowWhenRenderedInRect onAddToImage onRemoveFromImage render serialize serializeToJSON setZIndex transformBy updateStyle withRegionErased deserialize fromFilled fromStroked registerComponent

Constructors

constructor

  • new Stroke(parts: RenderablePathSpec[], initialZIndex?: number): Stroke

  • Creates a Stroke from the given parts. All parts should have the same color.

    Parameters

    Returns Stroke

    Example

    // A path that starts at (1,1), moves to the right by (2, 0),
    // then moves down and right by (3, 3)
    const path = Path.fromString('m1,1 2,0 3,3');

    const stroke = new Stroke([
        // Fill with red
        pathToRenderable(path, { fill: Color4.red })
    ]);

Properties

ProtectedcontentBBox

contentBBox: Rect2

The bounding box of this component. getBBox, by default, returns contentBBox. This must be set by components.

If this changes, EditorImage.queueRerenderOf should be called for this object (provided that this object has been added to the editor.)

Note: This value is ignored if getSizingMode returns FillScreen or FillImage.

ProtectedlastChangedTime

lastChangedTime: number

The timestamp (milliseconds) at which the component was last changed (i.e. created/translated).

Deprecated

Methods

ProtectedapplyTransformation

attachLoadSaveData

clone

ProtectedcreateClone

description

forceStyle

getBBox

getExactBBox

getId

getLoadSaveData

getParts

  • getParts(): Readonly<RenderablePathSpecWithPath>[]

  • Returns Readonly<RenderablePathSpecWithPath>[]

    A list of the parts that make up this path. Many paths only have one part.

    Each part (a RenderablePathSpec) contains information about the style and geometry of that part of the stroke. Use the .path property to do collision detection and other operations involving the stroke's geometry.

    Note that many of Path's methods (e.g. Path.intersection) take a strokeWidth parameter that can be gotten from RenderablePathSpec.style .stroke.width.

getPath

getProportionalRenderingTime

getSizingMode

getStyle

getZIndex

intersects

intersectsRect

  • intersectsRect(rect: Rect2): boolean

  • Parameters

    Returns boolean

    true if this component intersects rect -- it is entirely contained within the rectangle or one of the rectangle's edges intersects this component.

    The default implementation assumes that this.getExactBBox() returns a tight bounding box -- that any horiziontal/vertical line that intersects this' boounding box also intersects a point in this component. If this is not the case, components must override this function.

isBackground

isSelectable

keyPoints

occludesEverythingBelowWhenRenderedInRect

onAddToImage

onRemoveFromImage

render

serialize

  • serialize(): {
        data: string
        | number
        | any[]
        | Record<string, any>;
        id: string;
        loadSaveData: LoadSaveDataTable;
        name: string;
        zIndex: number;
    }

  • Convert the component to an object that can be passed to JSON.stringify.

    Do not rely on the output of this function to take a particular form — this function's output can change form without a major version increase.

    Returns {
        data: string | number | any[] | Record<string, any>;
        id: string;
        loadSaveData: LoadSaveDataTable;
        name: string;
        zIndex: number;
    }

ProtectedserializeToJSON

  • serializeToJSON(): {
        path: string;
        style: {
            fill: string;
            stroke: undefined
            | { color: string; width: number };
        };
    }[]

  • Return null iff this object cannot be safely serialized/deserialized.

    Returns {
        path: string;
        style: {
            fill: string;
            stroke: undefined | { color: string; width: number };
        };
    }[]

setZIndex

transformBy

updateStyle

withRegionErased

Staticdeserialize

StaticfromFilled

StaticfromStroked

  • fromStroked(path: string | Path, style: StrokeRenerdingStyle): Stroke

  • Creates a new Stroke from a Path and style. Strokes created with this method have transparent fill.

    Example:

    import { Editor, Stroke, Color4 } from 'js-draw';
const editor = new Editor(document.body);
---visible---
const stroke = Stroke.fromStroked('m0,0 l10,10', { width: 10, color: Color4.red });
editor.dispatch(editor.image.addComponent(stroke));

    Notice that path can be a string that specifies an SVG path

    Parameters

    Returns Stroke

    See

    fromFilled

StaticregisterComponent

Settings

Member Visibility

On This Page

Constructors
Properties
Methods
OpenSource licenses