svg-pen-sketch
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).
How to use
(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>
Parameters:
Stroke Styles:
- Any CSS style can be applied by adding the style name, and value, in the
strokeStylesobject
Stroke Parameters:
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.
Eraser Parameters
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)
Build Instructions
- 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
Todo
- 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
5 Oct 28, 2022
4.4k Jan 2, 2023
1 Aug 16, 2022
2 Oct 28, 2021
6 Feb 12, 2022
4 Oct 21, 2022
23 Oct 5, 2022
181 Oct 6, 2022
28 Jan 2, 2023
17 Dec 13, 2022
3 Sep 22, 2022
3 Nov 2, 2022
1 Oct 13, 2022
9.1k Jan 4, 2023
6.8k Jan 5, 2023
31 Dec 10, 2022
5 Dec 20, 2022
9 Aug 29, 2022
1 Feb 7, 2022