OptionalapplyByFlattening: booleanReturns the parent of the given element, if it exists.
all elements in the image, sorted by z-index (low to high).
This can be slow for large images. If you only need all elemenst in part of the image, consider using getElementsIntersectingRegion instead.
Note: The result does not include background elements. See getBackgroundComponents.
Returns all components that make up the background of this image. These components are rendered below all other components.
a list of AbstractComponents intersecting region, sorted by increasing z-index.
Components in the background layer are only included if includeBackground is true.
the AbstractComponent with id, if it exists.
Forces a re-render of elem when the image is next re-rendered as a whole.
Does nothing if elem is not in this.
Renders this image to the given renderer.
If viewport is non-null, only components that can be seen from that viewport
will be rendered. If viewport is null, all components are rendered.
Example:
import {Editor,CanvasRenderer} from 'js-draw';
// Create an editor and load initial data -- don't add to the body (hidden editor).
const editor = new Editor(document.createElement('div'));
await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
---visible---
// Given some editor.
// Set up the canvas to be drawn onto.
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Ensure that the canvas can fit the entire rendering
const viewport = editor.image.getImportExportViewport();
canvas.width = viewport.getScreenRectSize().x;
canvas.height = viewport.getScreenRectSize().y;
// Render editor.image onto the renderer
const renderer = new CanvasRenderer(ctx, viewport);
editor.image.render(renderer, viewport);
// Add the rendered canvas to the document.
document.body.appendChild(canvas);
Returns a Command that sets whether the image should autoresize when
AbstractComponents are added/removed.
import { Editor } from 'js-draw';
const editor = new Editor(document.body);
const toolbar = editor.addToolbar();
// Add a save button to demonstrate what the output looks like
// (it should change size to fit whatever was drawn)
toolbar.addSaveButton(() => {
document.body.replaceChildren(editor.toSVG({ sanitize: true }));
});
// Actually using setAutoresizeEnabled:
//
// To set autoresize without announcing for accessibility/making undoable
const addToHistory = false;
editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), addToHistory);
// Add to undo history **and** announce for accessibility
//editor.dispatch(editor.image.setAutoresizeEnabled(true), true);
Sets the import/export rectangle to the given imageRect. Disables
autoresize if it was previously enabled.
Note: The import/export rectangle is the same as the size of any BackgroundComponents (and other components that auto-resize).
StaticaddReturns a command that adds the given element to the EditorImage.
If applyByFlattening is true, the content of the wet ink renderer is
rendered onto the main rendering canvas instead of doing a full re-render.
Example:
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));