examples

2026-04-22 03:00:28 -04:00 · 2018-03-12 14:00:57 -07:00
parent 8ac05bb256
commit 4da43698b2
4 changed files with 178 additions and 0 deletions
--- a/examples/basic-showcase.html
+++ b/examples/basic-showcase.html
@@ -0,0 +1,84 @@
+<html>
+
+<head>
+  <title>RoughJS Basic Showcase</title>
+  <script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.min.js"></script>
+</head>
+
+<body>
+  <h2>RoughJS Basic Showcase</h2>
+  <canvas id="canvas" width="800" height="600"></canvas>
+
+  <script>
+    const rc = rough.canvas(document.getElementById('canvas'));
+
+    // line and rectangles
+    rc.line(60, 60, 190, 60);
+    rc.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
+    });
+
+    // ellipses and circles
+    rc.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'
+    });
+
+    // Polygons
+    rc.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)'
+    });
+
+    // Arcs
+    rc.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 curve
+    let points = [];
+    for (let i = 0; i < 20; i++) {
+      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>
+</body>
+
+</html>
--- a/examples/path-example.html
+++ b/examples/path-example.html
@@ -0,0 +1,38 @@
+<html>
+
+<head>
+  <title>RoughJS Path Example With Worker</title>
+  <script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.min.js"></script>
+</head>
+
+<body>
+  <h2>RoughJS Path Example (Using web workers)</h2>
+  <canvas id="canvas" width="800" height="600"></canvas>
+
+  <script>
+    (async () => {
+      const rc = rough.canvas(document.getElementById('canvas'));
+      await rc.path('M400 100 h 90 v 90 h -90z', {
+        stroke: 'red',
+        strokeWidth: '3',
+        fill: 'rgba(0,0,255,0.2)',
+        fillStyle: 'solid'
+      });
+      await rc.path('M400 250 h 90 v 90 h -90z', {
+        fill: 'rgba(0,0,255,0.6)'
+      });
+      await rc.path('M37,17v15H14V17z M50,0H0v50h50z', {
+        stroke: 'red',
+        strokeWidth: '1',
+        fill: 'blue'
+      });
+      await rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
+      await rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple', hachureAngle: 60, hachureGap: 5 });
+      await rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
+      await rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
+    })();
+  </script>
+</body>
+
+</html>
--- a/examples/us-map.html
+++ b/examples/us-map.html
@@ -0,0 +1,54 @@
+<html>
+
+<head>
+  <title>RoughJS Map example with D3.js</title>
+  <script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.min.js"></script>
+  <script src="//d3js.org/d3.v3.min.js"></script>
+  <script src="//d3js.org/topojson.v1.min.js"></script>
+</head>
+
+<body>
+  <h2>RoughJS Map example with D3.js</h2>
+  <canvas id="canvas" width="960" height="500"></canvas>
+
+  <script>
+    (async () => {
+      const rc = rough.canvas(document.getElementById('canvas'),
+        {
+          options: {
+            simplification: 0.2, roughness: 0.5
+          }
+        });
+      const width = 960, height = 500;
+      const projection = d3.geo.albersUsa()
+        .scale(1070)
+        .translate([width / 2, height / 2]);
+      const path = d3.geo.path()
+        .projection(projection);
+      const randomColor = () => {
+        let r = `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`;
+        return r;
+      }
+      const randomAngle = () => {
+        return (Math.random() > 0.5 ? -1 : 1) * (1 + Math.random() * 88);
+      }
+      const randomStyle = () => {
+        return (Math.random() > 0.5 ? 'solid' : '');
+      }
+      d3.json("./us.json", async (error, us) => {
+        if (error) throw error;
+        let topo = topojson.feature(us, us.objects.states).features;
+        for (let feature of topo) {
+          await rc.path(path(feature), {
+            fill: randomColor(),
+            fillStyle: randomStyle(),
+            hachureAngle: randomAngle()
+          });
+        }
+      });
+    })();
+  </script>
+</body>
+
+</html>
--- a/examples/us.json
+++ b/examples/us.json