Tough.js
Tough.js is a gentle-weight weight (~8k), Canvas basically based solely library that lets in you to plot in a sketchy, hand-drawn-love, vogue.
The library defines primitives to plot traces, curves, arcs, polygons, circles, and ellipses. It additionally helps drawing SVG paths.
Install
Basically the most modern Tough.js would possibly maybe well well additionally impartial even be downloaded from the dist folder.
or from npm:
npm install --place roughjs
Usage
const rc = rough.canvas(doc.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, top
Lines and Ellipses
rc.circle(eighty, 120, 50); // centerX, centerY, diameter
rc.ellipse(300, 100, a hundred and fifty, eighty); // centerX, centerY, width, top
rc.line(eighty, 120, 300, 100); // x1, y1, x2, y2
Filling
rc.circle(50, 50, eighty, { occupy: 'red' }); // occupy with red hachure
rc.rectangle(120, 15, eighty, eighty, { occupy: 'red' });
rc.circle(50, a hundred and fifty, eighty, {
occupy: "rgb(10,a hundred and fifty,10)",
fillWeight: Three // thicker traces for hacure
});
rc.rectangle(220, 15, eighty, eighty, {
occupy: 'red',
hachureAngle: 60, // perspective of hachure,
hachureGap: 8
});
rc.rectangle(120, one zero five, eighty, eighty, {
occupy: 'rgba(255,zero,200,zero.2)',
fillStyle: 'solid' // solid occupy
});
Sketching vogue
rc.rectangle(15, 15, eighty, eighty, { roughness: zero.5, occupy: 'red' });
rc.rectangle(120, 15, eighty, eighty, { roughness: 2.8, occupy: 'blue' });
rc.rectangle(220, 15, eighty, eighty, { bowing: 6, stroke: 'green', strokeWidth: Three });
SVG Paths
rc.path('M80 eighty A 45 45, zero, zero, zero, a hundred twenty 5 a hundred twenty 5 L a hundred twenty 5 eighty Z', { occupy: 'green' });
rc.path('M230 eighty A 45 45, zero, 1, zero, 275 a hundred twenty 5 L 275 eighty Z', { occupy: 'red' });
rc.path('M80 230 A 45 45, zero, zero, 1, a hundred twenty 5 275 L a hundred twenty 5 230 Z', { occupy: 'red' });
rc.path('M230 230 A 45 45, zero, 1, 1, 275 275 L 275 230 Z', { occupy: 'blue' });
SVG Route with simplification:
Using web workers
When you would possibly maybe well well well maintain Workly imported on your web pages (~1k most arresting), RoughJS will robotically offload all processing to a web worker – releasing up your predominant UI thread. Here’s gargantuan when increasing complex drawings using RoughJs love maps. Read extra about it here.
(source code for this plot in examples)
Examples
Gape examples here
API & Documentation
Tubby Tough.js API
License
MIT License (c) Preet Shihn
Read More
Commentaires récents