JavaScript手繪風格的圖形庫RoughJS使用指南

標籤：raw   i++   img   工作   nts   實體   for   lap   使用指南   

RoughJS是一個輕量級的JavaScript圖形庫（壓縮後約9KB），可以讓你在網頁上繪製素描風格、手繪樣式般的圖形。RoughJS定義了繪製直線，曲線，圓弧，多邊形，圓和橢圓的圖元，同時它還支援繪製SVG路徑。

這裡是它的專案網站地址：https://roughjs.com/

RoughJS可以同時在Canvas和SVG上工作，這是一個非常實用的特性。

安裝

最新的RoughJS庫可以在Github中下載。

或者從npm下載：

npm install --save roughjs

使用

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

或者使用SVG

const rc = rough.svg(svg);let node = rc.rectangle(10, 10, 200, 200); // x, y, width, heightsvg.appendChild(node);

繪製線和橢圓

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‘ }); // fill with red hachurerc.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路徑

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（大小約1k），RoughJS自動將所有處理工作拋給Web Worker，同時釋放UI主線程。有了Web Worker的支援，在使用RoughJs（如地圖）建立複雜圖形時，就非常有用了。你可以在這裡閱讀更多相關資訊。

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

你可以在這裡看到使用RoughJS產生地圖的例子。

例子

你可以在這個頁面中看到一些RoughJS使用例子。

簡單的基本圖形繪製

<canvas id="canvas" width="800" height="600"></canvas>

<script>const rc = rough.canvas(document.getElementById(‘canvas‘));//line and rectanglerc.rectangle(10, 10, 100, 100);rc.rectangle(140, 10, 100, 100, {  fill: ‘rgba(255,0,0,0.2)‘,  fillStyle: ‘solid‘,  roughness: 2});rc.rectangle(10, 130, 100, 100, {  fill: ‘red‘,  stroke: ‘blue‘,  hachureAngle: 60,  hachureGap: 10,  fillWeight: 5,  strokeWidth: 5});// ellipse and circlerc.ellipse(350, 50, 150, 80);rc.ellipse(610, 50, 150, 80, {  fill: ‘blue‘});rc.circle(480, 50, 80, {  stroke: ‘red‘, strokeWidth: 2,  fill: ‘rgba(0,255,0,0.3)‘, fillStyle: ‘solid‘});//overlapping circlesrc.circle(480, 150, 80, {  stroke: ‘red‘, strokeWidth: 4,  fill: ‘rgba(0,255,0,1)‘, fillWeight: 4, hachureGap: 6});rc.circle(530, 150, 80, {  stroke: ‘blue‘, strokeWidth: 4,  fill: ‘rgba(255,255,0,1)‘, fillWeight: 4, hachureGap: 6});// linearPath and polygonrc.linearPath([[690, 10], [790, 20], [750, 120], [690, 100]], {  roughness: 0.7,  stroke: ‘red‘, strokeWidth: 4});rc.polygon([[690, 130], [790, 140], [750, 240], [690, 220]]);rc.polygon([[690, 250], [790, 260], [750, 360], [690, 340]], {  stroke: ‘red‘, strokeWidth: 4,  fill: ‘rgba(0,0,255,0.2)‘, fillStyle: ‘solid‘});rc.polygon([[690, 370], [790, 385], [750, 480], [690, 460]], {  stroke: ‘red‘,  hachureAngle: 65,  fill: ‘rgba(0,0,255,0.6)‘});// arcsrc.arc(350, 200, 200, 180, Math.PI, Math.PI * 1.6);rc.arc(350, 300, 200, 180, Math.PI, Math.PI * 1.6, true);rc.arc(350, 300, 200, 180, 0, Math.PI / 2, true, {  stroke: ‘red‘, strokeWidth: 4,  fill: ‘rgba(255,255,0,0.4)‘, fillStyle: ‘solid‘});rc.arc(350, 300, 200, 180, Math.PI / 2, Math.PI, true, {  stroke: ‘blue‘, strokeWidth: 2,  fill: ‘rgba(255,0,255,0.4)‘});// draw sine curvelet points = [];for (let i = 0; i < 20; i++) {  // 4pi - 400px  let x = (400 / 20) * i + 10;  let xdeg = (Math.PI / 100) * x;  let y = Math.round(Math.sin(xdeg) * 90) + 500;  points.push([x, y]);}rc.curve(points, {  roughness: 1.2, stroke: ‘red‘, strokeWidth: 3});</script>

查看示範

結合D3.js繪製直條圖

<script src="rough.min.js"></script><script src="https://d3js.org/d3.v4.min.js"></script>

<canvas id="canvas" width="960" height="500"></canvas>

<script>var canvas = document.getElementById(‘canvas‘);const rc = rough.canvas(canvas, {  options: {    fill: "blue",    roughness: 0.8,    bowing: 0.7  }});var context = canvas.getContext("2d");var margin = { top: 20, right: 20, bottom: 30, left: 40 },  width = canvas.width - margin.left - margin.right,  height = canvas.height - margin.top - margin.bottom;var x = d3.scaleBand()  .rangeRound([0, width])  .padding(0.1);var y = d3.scaleLinear()  .rangeRound([height, 0]);context.translate(margin.left, margin.top);d3.tsv("data.tsv", function (d) {  d.frequency = +d.frequency;  return d;}, function (error, data) {  if (error) throw error;  x.domain(data.map(function (d) { return d.letter; }));  y.domain([0, d3.max(data, function (d) { return d.frequency; })]);  var yTickCount = 10,    yTicks = y.ticks(yTickCount),    yTickFormat = y.tickFormat(yTickCount, "%");  data.forEach(function (d) {    rc.rectangle(x(d.letter), y(d.frequency), x.bandwidth(), height - y(d.frequency));  });  context.beginPath();  x.domain().forEach(function (d) {    context.moveTo(x(d) + x.bandwidth() / 2, height);    context.lineTo(x(d) + x.bandwidth() / 2, height + 6);  });  context.strokeStyle = "black";  context.stroke();  context.textAlign = "center";  context.textBaseline = "top";  x.domain().forEach(function (d) {    context.fillText(d, x(d) + x.bandwidth() / 2, height + 6);  });  context.beginPath();  yTicks.forEach(function (d) {    context.moveTo(0, y(d) + 0.5);    context.lineTo(-6, y(d) + 0.5);  });  context.strokeStyle = "black";  context.stroke();  context.textAlign = "right";  context.textBaseline = "middle";  yTicks.forEach(function (d) {    context.fillText(yTickFormat(d), -9, y(d));  });  context.beginPath();  context.moveTo(-6.5, 0 + 0.5);  context.lineTo(0.5, 0 + 0.5);  context.lineTo(0.5, height + 0.5);  context.lineTo(-6.5, height + 0.5);  context.strokeStyle = "black";  context.stroke();  context.save();  context.rotate(-Math.PI / 2);  context.textAlign = "right";  context.textBaseline = "top";  context.font = "bold 10px sans-serif";  context.fillText("Frequency", -10, 10);  context.restore();});</script>

查看示範

API

• RoughCanvas and RoughSVG
• Methods and Properties
• Options
• Config

你可以非常歡樂地使用RoughJS，祝你好運！

JavaScript手繪風格的圖形庫RoughJS使用指南