PathDrawer
JointJS+ provides a PathDrawer plugin that enables the ability to draw <path> elements.
Installation
Access PathDrawer via the ui namespace, and create an instance. A target reference to an <svg> on the page is
needed.
import { ui } from '@joint/plus';
new ui.PathDrawer({
target: document.getElementById('example-canvas'),
pathAttributes: {
'class': 'example-path'
}
});
There is also a UMD version available
Include joint.ui.pathDrawer.js and joint.ui.pathDrawer.css in your HTML:
<head>
<link rel="stylesheet" type="text/css" href="joint.ui.pathDrawer.css">
</head>
<body>
<svg id="example-canvas" width="800" height="800"></svg>
<script src="joint.js"></script>
<script src="joint.ui.pathDrawer.js"></script>
</body>
Access PathDrawer through the joint.ui namespace:
new joint.ui.PathDrawer({
target: document.getElementById('example-canvas'),
pathAttributes: {
'class': 'example-path'
}
});
How does PathDrawer work?
PathDrawer allows users to draw <path> elements. The constructor needs a target, a reference to an <svg>
SVGSVGElement on the page, which will act as a drawing area. You can use an <svg> element created previously in
the DOM.
Create a PathDrawer
The following example creates an instance of path drawer. Clicking on the canvas creates a <path> element. The
user can continue drawing, and return to the first point if desired. Double-clicking stops drawing the current <path>.
Emulate user interaction
For more fine-tuned programmatic control, you can emulate user interaction with delegated or synthetic mouse events. For example, to start drawing a path immediately after a path drawer is initialized:
paper.on('blank.pointerdown', function(event) {
const vCanvas = V('svg', {
width: 400,
height: 400
}).appendTo(this.paper.el);
const pathDrawer = this.pathDrawer = new ui.PathDrawer({
el: vCanvas.node
});
pathDrawer.onPointerDown(event);
}, this);
PathDrawer Interaction
Users can interact with PathDrawer objects by clicking/touching its canvas:
mousedown / touchstart
Calls onPointerDown(event). If this is the first click of a path, creates a new path with a new start point. Otherwise,
finishes the previous action, and starts a new one. If the user does not release the mouse, it triggers a bound
mousemove/touchmove event, and the option enableCurves is set to true, this function starts drawing a curveto
control point until a mouseup/touchend event is registered. Otherwise, it starts drawing a lineto path segment.
mousedown .start-point / touchstart .start-point
Calls onStartPointPointerDown(event). Closes the path.
mousemove
Calls onPointerMove(event). If the user is currently drawing a path segment, the path endpoint moves with user pointer.
dblclick
Calls onDoubleClick(event). Stops path drawing at the location of the double click. The path is not finished with a
closepath segment.
contextmenu
Calls onContextMenu(event). Stops path drawing at the location of the previous anchor point. The path is not finished
with a closepath segment.