free-draw
Version:
Free draw shapes use canvas
39 lines (38 loc) • 1.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Free Draw with canvas</title>
<style>
.canvas-wrap {
border: 2px solid;
}
</style>
</head>
<body>
<canvas class="canvas-wrap" id="canvas" width="800" height="600"></canvas>
<script src="../build/FreeDraw.js"></script>
<script>
const freeDraw = new FreeDraw.default({
canvas: document.getElementById('canvas'),
eventsReceive: ['mouseenter', 'mouseleave', 'drag', 'doubleclick'],
eventsCallBack: (event, key, eventType) => {
console.log(event, key, eventType)
}
});
freeDraw.zoomAndOffset(3.0, [0, 0], 100, 100)
// const ellipse = freeDraw.addShape({ id: 'ellipse-1', type: 'ellipse', x: 20.213123, y: 20.123123, radiusX: 20.123, radiusY: 20.124124 });
// const ellipse = freeDraw.addShape({ id: 'rect-1', type: 'rect', width: 200, height: 100, startPoint: [100, 100] });
const ellipse = freeDraw.addShape({ id: 'polygon-1', type: 'polygon' });
// window.setTimeout(() => {
// console.log(ellipse.finish())
// console.log(ellipse)
// }, 5000)
// window.setTimeout(() => {
// console.log(ellipse.editShape())
// }, 6000)
</script>
</body>
</html>