An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).
(Importing as a node module)
import svgSketch from "svg-pen-sketch";
// Prep the svg element to be drawn on (custom path styles can be passed in optionally)
const strokeStyle = {"stroke": "red", "stroke-width": "10px"};
const canvas = new svgSketch(document.querySelector("svg"), strokeStyle);
// The svg element that is being used can be returned with getElement()
canvas.getElement();
// The styling of the paths can be updated by updating the strokeStyles object
// NOTE: This will only affect new strokes drawn
canvas.strokeStyles = {"stroke": "black", "stroke-width": "1px"};
// Callbacks can be set for various events
canvas.penDownCallback = (path, event) => {};
canvas.penUpCallback = (path, event) => {};
// Same can be done for the eraser end of a pen (if it has one)
canvas.eraserDownCallback = (editedPaths, event) => {};
canvas.eraserUpCallback = (event) => {};
// Toggles the use of the eraser
// Useful for when certain pens dont support the eraser
canvas.toggleForcedEraser();(Including the source in your project)
<body>
<script src="https://cdn.jsdelivr.net/npm/svg-pen-sketch"></script>
<script>
let svgSketch = SvgPenSketch.default;
// Prep the svg element to be drawn on (custom path styles can be passed in optionally)
const strokeStyle = {"stroke": "red", "stroke-width": "10px"};
const canvas = new svgSketch(document.querySelector("svg"), strokeStyle);
// The svg element that is being used can be returned with getElement()
canvas.getElement();
// The styling of the paths can be updated by updating the strokeStyles object
// NOTE: This will only affect new strokes drawn
canvas.strokeStyles = {"stroke": "black", "stroke-width": "1px"};
// Callbacks can be set for various events
canvas.penDownCallback = (path, event) => {};
canvas.penUpCallback = (path, event) => {};
// Same can be done for the eraser end of a pen (if it has one)
canvas.eraserDownCallback = (editedPaths, event) => {};
canvas.eraserUpCallback = (event) => {};
// Toggles the use of the eraser
// Useful for when certain pens dont support the eraser
canvas.toggleForcedEraser();
</script>
</body>- Any CSS style can be applied by adding the style name, and value, in the
strokeStylesobject
lineFunc: A function that converts screen coordinates to an SVG Path - can be overwritten to introduce functionality such as the use of splines (various other D3 curve functions can be found here)minDist: The minimum distance that is allowed between strokes (smaller values preferred for pixel-eraser functionality - but can be slow)maxTimeDelta: The maximum time allowed between samples (done to keep a stable sample rate somewhat). Keep in mind this is a maximum, and quicker events can still occur.
eraserMode: Which eraser mode to use when erasing. Currently supports"object"and"pixel"for the object and pixel erasers, respectivelyeraserSize: The size of the eraser handle. Note that small eraser sizes (i.e. 1) can cause skipping issues - it will be addressed in later versions)
- Clone the repository and run
npm install - Run
npm run buildto generate a development build - Run
npm run testto generate and test a build (uses the tests located intests/)
Demos can be found in the demos/ folder - make sure you build the project at least once before running them
- More tests need to be made
- Fix stroke recognition issues for the eraser (some portions of strokes are being missed)
- Try to fix the issue with strokes being cut off if the screen is resized
Add some error checking for the element passed in the constructorAdd some options to change stroke styles