Protected
addThrows if no stroke builder exists.
Returns a ReactiveValue that updates based on whether this tool is enabled.
Returns true iff the tool handled the event and thus should receive additional events.
Returns true iff there are additional pointers down and the tool should remain active to handle the additional events.
For most purposes, this should return false
or nothing.
Protected
previewChanges the type of stroke created by the pen. The given factory
can be one of the built-in
stroke factories (e.g. makeFreehandLineBuilder) or a custom stroke factory.
Example:
import { Editor, PenTool, makePolylineBuilder, makeOutlinedCircleBuilder, makeOutlinedRectangleBuilder, makeArrowBuilder, makePressureSensitiveFreehandLineBuilder, makeFreehandLineBuilder, InputEvtType, sendPenEvent, } from 'js-draw'; import { Color4, Vec2 } from '@js-draw/math'; const editor = new Editor(document.body); editor.addToolbar(); // Different pen types that build strokes in different ways. This is a list of some of the // default ones: const strokeBuilders = [ makePolylineBuilder, makeOutlinedCircleBuilder, makeOutlinedRectangleBuilder, makeArrowBuilder, makePressureSensitiveFreehandLineBuilder, makeFreehandLineBuilder, ]; // Get the first pen const pen = editor.toolController.getMatchingTools(PenTool)[0]; // If using a different pen (e.g. the second), be sure to select it! // pen.setEnabled(true); // Draw something with each style for (const factory of strokeBuilders) { // Make the pen use a certain style. pen.setStrokeFactory(factory); // What happens if the following line is uncommented? // pen.setStrokeFactory(makeArrowBuilder); // Select a random pen color const penColor = Color4.ofRGB(Math.random(), Math.random(), Math.random()); pen.setColor(penColor); // Draw something! const imageSize = editor.getImportExportRect().size; const startPos = Vec2.of(Math.random() * imageSize.x, Math.random() * imageSize.y); const endPos = Vec2.of(Math.random() * imageSize.x, Math.random() * imageSize.y); sendPenEvent(editor, InputEvtType.PointerDownEvt, startPos); sendPenEvent(editor, InputEvtType.PointerMoveEvt, startPos.lerp(endPos, 0.5)); sendPenEvent(editor, InputEvtType.PointerUpEvt, endPos); }
Connect this tool to a set of other tools, ensuring that at most one of the tools in the group is enabled.
Protected
toConverts a pointer
to a StrokeDataPoint
.
A tool that allows drawing shapes and freehand lines.
To change the type of shape drawn by the pen (e.g. to switch to the rectangle pen type), see setStrokeFactory.