Creates a Stroke from the given parts. All parts should have the
same color.
Optional initialZIndex: number// 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 })
]);
Protected contentBBoxThe 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.
Protected lastThe timestamp (milliseconds) at which the component was last changed (i.e. created/translated).
Protected applyPrivate helper for transformBy: Apply the given transformation to all points of this.
Attach data that can be used while exporting the component (e.g. to SVG).
This is intended for use by an ImageLoader.
Returns a copy of this component.
Protected createComponent-specific implementation of clone.
Set the style of this component in a way that can't be undone/redone (does not create a command).
Prefer updateStyle(style).apply(editor).
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.
Returns information about how this component should be displayed (e.g. fill the screen or get its size from getBBox).
EditorImage.queueRerenderOf must be called to apply changes to the output of this method if this component has already been added to an EditorImage.
a partial representation of this component's style.
true if lineSegment intersects this component.
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.
Optimization
Should return true if this component covers the entire visibleRect
and would prevent anything below this component from being visible.
Should return false otherwise.
Called when this component is added to the given image.
Renders this component onto the given canvas.
If visibleRect is given, it should be the region of canvas that is visible --
rendering anything outside of visibleRect should have no visible effect on the
resultant image.
For optimal performance, implementers should call canvas.startObject and canvas.endObject
before and after rendering.
Optional visibleRect: Rect2Convert 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.
Protected serializeReturns a command that updates this component's z-index.
Returns a command that, when applied, transforms this by [affineTransfm] and updates the editor.
The transformed component is also moved to the top (use AbstractComponent.setZIndexAndTransformBy to avoid this behavior).
Returns a Command that updates portions of this component's style
to the given style.
For some component and editor,
editor.dispatch(component.updateStyle({ color: Color4.red }));
Static deserializeConvert a string or an object produced by JSON.parse into an AbstractComponent.
Static registerStore the deserialization callback (or lack of it) for [componentKind]. If components are registered multiple times (as may be done in automated tests), the most recent deserialization callback is used.
Generated using TypeDoc
Represents an AbstractComponent made up of one or more Paths.
Example
For some Editor editor and
Strokestroke,Restyling:
Transforming:
Adding:
import { Editor, EditorImage, Stroke, pathToRenderable. Path, Color4, } from 'js-draw'; const editor = new Editor(document.body); const stroke = new Stroke([ pathToRenderable(Path.fromString('m0,0 l100,100 l0,-10 z'), { fill: Color4.red }), ]); editor.dispatch(EditorImage.addElement(stroke));