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:

index.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:

index.js
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>.

Open Sandbox

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.

PathDrawer

Installation​

How does PathDrawer work?​

Create a PathDrawer​

Emulate user interaction​

PathDrawer Interaction​

mousedown / touchstart​

mousedown .start-point / touchstart .start-point​

mousemove​

dblclick​

contextmenu​

Stay in the know