svg-pen-sketch
v1.2.2
Published
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).
Downloads
6
Readme
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
strokeStyles
object
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 build
to generate a development build - Run
npm run test
to 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 constructor~~
- ~~Add some options to change stroke styles~~