Краткое обсуждение Rough.js, графической библиотеки рисованного стиля, основанной на Canvas.

Порекомендуйте JS-библиотеку рисованной графики на основе Canvas.

Rough.js — это легкая (около 8 КБ) библиотека на основе Canvas, которая может рисовать грубые стили, нарисованные от руки.

Предоставляет базовые возможности рисования линий, кривых, дуг, многоугольников, кругов и эллипсов, а также поддерживает рисование путей SVG.

Гитхаб: https://github.com/pshihn/rough

Ссылка для скачивания: https://github.com/pshihn/rough/tree/master/dist

 npm install --save грубый js

 const rc =rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200 // x, y, ширина, высота);

 rc.circle(80, 120, 50); // центрX, центрY, диаметрrc.ellipse(300, 100, 150, 80); // центрX, центрY, ширина, высотаrc.line(80, 120, 300, 100) ; // х1, у1, х2, у2

 rc.circle(50, 50, 80, { fill: 'red' }); // заливка красным hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' }); , 150, 80, { fill: rgb(10,150,10), fillWeight: 3 // более толстые линии для штриховка});rc.rectangle(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // угол штриховки, hachureGap: 8});rc.rectangle(120, 105, 80, 80 , { fill: 'rgba(255,0,200,0.2)', fillStyle: 'solid' // сплошной наполнять});

 rc.rectangle(15, 15, 80, 80, { шероховатость: 0,5, заливка: 'красный' }); rc.rectangle(120, 15, 80, 80, { шероховатость: 2,8, заливка: 'синий' }); rc.rectangle(220, 15, 80, 80, { Bowing: 6, Stroke: 'зеленый', StrokeWidth: 3 });

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });rc.path('M230 80 A 45 45, 0, 1, 0 , 275 125 L 275 80 Z', { fill: 'фиолетовый' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { заполнить: 'синий' });

В сочетании с веб-воркерами

Если на веб-странице есть библиотека импорта Workly Web Workers, RoughJS автоматически передаст все операции веб-воркерам для освобождения основного потока пользовательского интерфейса. Это очень полезно при использовании RoughJS для создания сложных рисунков (например, карт). Читать далее.

 <script src=https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js></script><script src=../../dist/rough.min.js> </скрипт>

https://github.com/pshihn/rough/wiki/Примеры

API и документация

https://github.com/pshihn/rough/wiki

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.