Sketch Pen SVG – An easy-to-use JavaScript library aims to make it easy to draw on SVG elements when using a digital pen (such as a Surface pen).
Great for online drawing application such as signature board, drawing board, etc.
Angular Module To Draw On Images | Ngx Image Drawing
How to make use of it:
1. Install & obtain the SVG-pen-sketch.
# NPM $ npm i svg-pen-sketch --save
2. Import the SVG-pen-sketch as a module.
import svgSketch from "svg-pen-sketch";
3. Or run the script build after which load the svg-pen-sketch.js
from the dist folder.
$ npm install $ npm run-script build
<script src="./dist/svg-pen-sketch.js"></script>
4. Create an SVG aspect SVG element to be drawn on.
<svg> ... </svg>
5. Create an instance of the SVG-pen-sketch and customize the kinds of SVG strokes.
let svgSketch = SvgPenSketch.default; const canvas = new svgSketch(document.querySelector("svg"), { // stroke styles here "stroke": "black", "stroke-width": "1px" });
6. Callback features that shall be triggered when drawing.
canvas.penDownCallback = (path, event) => { // do something console.log(`Pointer location = (${event.offsetX},${event.offsetY}) @ ${event.timeStamp}`); }; canvas.eraserDownCallback = (removedPaths, event) => { // do something if (removedPaths.length > 0) console.log("Removed strokes", removedPaths); }; canvas.penUpCallback = () => { // do something }; canvas.eraserUpCallback = () => { // do something };
7. Update the styles of the SVG strokes.
canvas.strokeStyles = { "stroke": "red", "stroke-width": "2px" };
8. Return the SVG element.
canvas.getElement();
9. Toggle the use of the eraser.
canvas.toggleForcedEraser();
SVG Drawing JavaScript Library, Creating Invisible Pen Effect in SVG, SVG pen sketch Plugin/Github
See Demo And Download
Official Website(Desousak): Click Here
This superior jQuery/javascript plugin is developed by Desousak. For extra Advanced Usages, please go to the official website.
Be First to Comment