Canvas를 기반으로 한 손으로 그린 ​​스타일 그래픽 라이브러리인 Rough.js에 대한 간략한 토론

Canvas 기반의 손으로 그린 ​​스타일의 그래픽 JS 라이브러리를 추천합니다.

Rough.js는 대략적인 손으로 그린 ​​스타일을 그릴 수 있는 경량(약 8k) 캔버스 기반 라이브러리입니다.

선, 곡선, 호, 다각형, 원, 타원 그리기를 위한 기본 기능을 제공하고 SVG 경로 그리기를 지원합니다.

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

다운로드 링크: https://github.com/pshihn/rough/tree/master/dist

 npm install --roughjs 저장

 const rc = rough.canvas(document.getElementById('canvas'));rc.직사각형(10, 10, 200, 200) // x, y, 너비, 높이

 rc.circle(80, 120, 50); // centerX, centerY, Diameterrc.ellipse(300, 100, 150, 80); // centerX, centerY, width, heightrc.line(80, 120, 300, 100) ; // x1, y1, x2, y2

 rc.circle(50, 50, 80, { fill: 'red' }); // 빨간색으로 채우기 hachurerc.lectangle(120, 15, 80, 80, { fill: 'red' }); , 150, 80, { fill: rgb(10,150,10), fillWeight: 3 // 더 두꺼운 선 hachure});rc.직사각형(220, 15, 80, 80, { fill: 'red', hachureAngle: 60, // 하추레 각도, hachureGap: 8});rc.직사각형(120, 105, 80, 80 , { fill: 'rgba(255,0,200,0.2)', fillStyle: 'solid' // 솔리드 채우다});

 rc.직사각형(15, 15, 80, 80, { 거칠기: 0.5, 채우기: '빨간색' });rc.직사각형(120, 15, 80, 80, { 거칠기: 2.8, 채우기: '파란색' }); rc.직사각형(220, 15, 80, 80, { 활: 6, 스트로크: '녹색', 스트로크Width: 3 });

 rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { 채우기: '녹색' });rc.path('M230 80 A 45 45, 0, 1, 0 , 275 125 L 275 80 Z', { 채우기: '보라색' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { 채우기: '빨간색' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { 채우기: '파란색' });

웹 워커와 결합

웹 페이지에 Workly Web Workers 가져오기 라이브러리가 있는 경우 RoughJS는 자동으로 모든 작업을 웹 작업자에게 전송하여 UI 메인 스레드를 해제합니다. 이는 RoughJS를 사용하여 지도와 같은 복잡한 그림을 만들 때 매우 유용합니다. 자세히 읽어보세요.

 <script src=https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js></script><script src=../../dist/rough.min.js> </script>

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

API 및 문서

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

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.