Canvas용 손으로 그린 ​​스타일 그래픽 라이브러리인 Rough.js

이번에는 Canvas의 손그림 스타일 그래픽 라이브러리 Rough.js를 가져왔습니다. Canvas의 손그림 스타일 그래픽 라이브러리 Rough.js를 사용할 때 주의사항은 무엇인가요?

머리말

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

Rough.js

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

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

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

Installation

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

NPM

npm install --save roughjs

사용 방법

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height

Line 및 Ellipse

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

Fill

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

스케치 스타일

rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG Path

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: 'purple' });
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', { fill: 'blue' });

간단한 SVG 경로

Web Workers와 결합

웹 페이지에 Workly Web Workers 가져오기 라이브러리가 있는 경우 RoughJS는 자동으로 모든 작업을 Web Worker에게 전달하여 UI를 출시합니다. 메인 스레드. 이는 RoughJS를 사용하여 복잡한 그림(예: maps)을 만들 때 매우 유용합니다. 그것에 대해 자세히 읽어보십시오.

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

최대 너비 및 최소 너비 사용에 대한 팁

텍스트 정렬로 양쪽 끝에서 정렬을 달성하는 방법

위 내용은 Canvas용 손으로 그린 ​​스타일 그래픽 라이브러리인 Rough.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!