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 = (removedPaths, 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 = (removedPaths, event) => {};
canvas.eraserUpCallback = (event) => {};
// Toggles the use of the eraser
// Useful for when certain pens dont support the eraser
canvas.toggleForcedEraser();
</script>
</body>
Build Instructions
- Clone the repository and run
npm install
- Run
npm run build
to generate a development build - Run
npm run test
to generate and test a build (uses the tests located intests/
)
demos/
folder - make sure you build the project at least once before running them
Demos can be found in the Todo
- More tests need to be made
- 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