ProtectedcontentBBoxThe 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.
ProtectedlastThe timestamp (milliseconds) at which the component was last changed (i.e. created/translated).
ProtectedapplyAttach 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.
ProtectedcreateComponent-specific implementation of clone.
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.
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.
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.
ProtectedserializeReturn null iff this object cannot be safely serialized/deserialized.
Store the width and height for bounding box computations while the image is loading.
Returns 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).
OptionalwithOptional method: Divides this component into sections roughly along the given path,
removing parts that are roughly within shape.
Notes:
undefined if unsupported.viewport should be provided to determine how newly-added points should be rounded.
StaticdeserializeConvert a string or an object produced by JSON.parse into an AbstractComponent.
StaticdeserializeStaticfromLoad from an image. Waits for the image to load if incomplete.
The image, elem, must not taint
an HTMLCanvasElement when rendered.
StaticregisterStore 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.
Represents a raster image.
Example: Adding images:
import { Editor, ImageComponent, Mat33 } from 'js-draw'; const editor = new Editor(document.body); // // Adding an image // const myHtmlImage = new Image(); myHtmlImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAAKklEQVQIW2Ns022zZGRgfPnz8s8HDQwN/xgZgKBDu0PuL8tf5d8/fz8FAOiDD1H2gfpGAAAAAElFTkSuQmCC'; const rotated45Degrees = Mat33.zRotation(Math.PI / 4); // A 45 degree = pi/4 radian rotation const scaledByFactorOf100 = Mat33.scaling2D(100); // Scale **and** rotate const transform = rotated45Degrees.rightMul(scaledByFactorOf100); const imageComponent = await ImageComponent.fromImage(myHtmlImage, transform); await editor.dispatch(editor.image.addElement(imageComponent)); // // Make a new image from the editor itself (with editor.toDataURL) // const toolbar = editor.addToolbar(); toolbar.addActionButton('From editor', async () => { const dataUrl = editor.toDataURL(); const htmlImage = new Image(); htmlImage.src = dataUrl; const imageComponent = await ImageComponent.fromImage(htmlImage, Mat33.identity); await editor.addAndCenterComponents([ imageComponent ]); });