How to add arrow and line from the Pen in the toolbar? #84
Unanswered
PineSongCN
asked this question in
Q&A
Replies: 1 comment
-
This wasn't previously possible, but should be addressed by this patch! I plan to release a new version soon. Update: I'm including an example that demonstrates changing the pen style dynamically with v1.22.0: Example of changing pen styles dynamicallyThis example is based on the sample code for 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);
let i = 0;
// Update the pen style dynamically
setInterval(() => {
i ++;
i %= strokeBuilders.length;
const factory = strokeBuilders[i];
// 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.ofRGBA(Math.random(), Math.random(), Math.random(), 0.5);
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);
}, 250); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Beta Was this translation helpful? Give feedback.
All reactions