mirror of
https://github.com/rough-stuff/rough.git
synced 2026-01-14 17:07:58 -05:00
102 lines
3.8 KiB
HTML
102 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
<title>RoughJS Path</title>
|
|
</head>
|
|
|
|
<body>
|
|
<demo-canvas></demo-canvas>
|
|
|
|
<script type="module">
|
|
import rough from '../../bin/rough.js';
|
|
|
|
const samples = [
|
|
'M400 100 h 90 v 90 h -90z',
|
|
'M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z',
|
|
'M50 0 L 21 90 L 98 35 L 2 35 L 79 90 Z',
|
|
'M210, 100 h190 v190 h -190 z M250, 120 v50 h80 v -50 z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM425,175L425,125L475,125L475,175Z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM267,175L267,125L317,125L317,175Z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM175,175L175,125L225,125L225,175Z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM123,175L123,125L173,125L173,175Z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM70,175L70,125L120,125L120,175Z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM25,175L25,125L75,125L75,175Z',
|
|
'M100,300L800,300L800,0L100,0ZM200,250L200,50L600,50L600,250ZM400,200L550,200L550,100L400,100ZM825,175L825,125L875,125L875,175Z',
|
|
'M0,0C171.49986081160606,0,342.9997216232121,0,461,0C461,74.77984827272596,461,149.5596965454519,461,279C285.96970007382333,279,110.93940014764667,279,0,279C0,207.8501017022878,0,136.70020340457557,0,0M52,105.5C52,105.5,52,105.5,52,105.5C52,138.463,78.314,165,111,165C143.686,165,170,138.463,170,105.5C170,72.537,143.686,46,111,46C78.314,46,52,72.537,52,105.5M261,74C261,74,261,74,261,74C261,90.066,273.265,103,288.5,103C303.735,103,316,90.066,316,74C316,57.934,303.735,45,288.5,45C273.265,45,261,57.934,261,74'
|
|
];
|
|
|
|
class DemoCanvas extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.root = this.attachShadow({ mode: 'open' });
|
|
this.root.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
border: 1px solid #000;
|
|
}
|
|
#panel {
|
|
padding: 16px 0;
|
|
}
|
|
input {
|
|
width: 500px;
|
|
padding: 10px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
<div id="panel">
|
|
<input>
|
|
<button id="submit">submit</button>
|
|
<br>
|
|
${samples.map((d, i) => `<button class="sampleButton" data-path="${d}">${i + 1}</button>`)}
|
|
</div>
|
|
<canvas id="c1" width="1000" height="1000"></canvas>
|
|
`;
|
|
}
|
|
connectedCallback() {
|
|
const input = this.root.querySelector('input');
|
|
const draw = () => {
|
|
this.draw(input.value.trim());
|
|
};
|
|
this.root.querySelector('#submit').addEventListener('click', draw);
|
|
this.root.querySelectorAll('.sampleButton').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
input.value = btn.dataset.path || '';
|
|
draw();
|
|
});
|
|
});
|
|
}
|
|
draw(path) {
|
|
const canvas = this.root.querySelector('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
const rc = rough.canvas(canvas);
|
|
rc.path(path, {
|
|
fill: 'orange',
|
|
fillWeight: 5,
|
|
hachureAngle: -45,
|
|
hachureGap: 20,
|
|
roughness: 0.1,
|
|
fillStyle: 'zigzag'
|
|
});
|
|
}
|
|
}
|
|
customElements.define('demo-canvas', DemoCanvas);
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |