75 lines
1.9 KiB
HTML
75 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Ink</title>
|
|
<style>
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button on:click="DRAW">Draw</button>
|
|
</nav>
|
|
<script type="module">
|
|
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
|
|
import { FolkInk } from '../src/canvas/fc-ink.ts';
|
|
|
|
FolkGeometry.register();
|
|
FolkInk.register();
|
|
|
|
const drawButton = document.querySelector('button');
|
|
|
|
async function draw(e) {
|
|
if (e.target === drawButton) return;
|
|
|
|
// Stop the default focus and pointer capture of geometry elements
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const ink = document.createElement('folk-ink');
|
|
|
|
document.body.appendChild(ink);
|
|
|
|
await ink.draw(e);
|
|
const rect = ink.getPathBox();
|
|
|
|
ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]);
|
|
|
|
const geometry = document.createElement('fc-geometry');
|
|
geometry.x = rect.x;
|
|
geometry.y = rect.y;
|
|
geometry.height = rect.height;
|
|
geometry.width = rect.width;
|
|
geometry.appendChild(ink);
|
|
|
|
document.body.appendChild(geometry);
|
|
}
|
|
|
|
let isDrawing = false;
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target !== drawButton) return;
|
|
|
|
isDrawing = !isDrawing;
|
|
|
|
if (isDrawing) {
|
|
document.addEventListener('pointerdown', draw, { capture: true });
|
|
drawButton.textContent = 'Drawing';
|
|
} else {
|
|
document.removeEventListener('pointerdown', draw, { capture: true });
|
|
drawButton.textContent = 'Draw';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|