Doodle3D-Slicer/simpleExample/coming_test.js
2017-08-17 16:13:21 +02:00

81 lines
1.7 KiB
JavaScript

import Shape from 'clipper-js';
import comb from '../src/sliceActions/helpers/comb.js';
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 720;
canvas.height = 480;
const context = canvas.getContext('2d');
const outline = new Shape([[
{ x: 100, y: 100 },
{ x: 400, y: 100 },
{ x: 400, y: 150 },
{ x: 200, y: 150 },
{ x: 200, y: 200 },
{ x: 400, y: 200 },
{ x: 400, y: 250 },
{ x: 200, y: 250 },
{ x: 200, y: 300 },
{ x: 400, y: 300 },
{ x: 400, y: 400 },
{ x: 100, y: 400 }
], [
{ x: 130, y: 310 },
{ x: 130, y: 370 },
{ x: 360, y: 370 },
{ x: 360, y: 360 },
{ x: 150, y: 360 },
{ x: 150, y: 350 },
{ x: 360, y: 350 },
{ x: 360, y: 340 },
{ x: 150, y: 340 },
{ x: 150, y: 330 },
{ x: 360, y: 330 },
{ x: 360, y: 310 }
]], true, true, false);
const start = { x: 380, y: 120 };
const end = { x: 200, y: 380 };
let combPath = comb(outline, start, end);
canvas.onmousemove = (event) => {
start.x = event.x;
start.y = event.y;
combPath = comb(outline, start, end);
draw();
};
draw();
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = 'black';
for (const path of outline.mapToLower()) {
context.beginPath();
for (const point of path) {
context.lineTo(point.x, point.y);
}
context.closePath();
context.stroke();
}
context.strokeStyle = 'red';
context.beginPath();
for (const point of combPath) {
context.lineTo(point.x, point.y);
}
context.stroke();
context.beginPath();
context.arc(start.x, start.y, 3, 0, Math.PI * 2.0, false);
context.stroke();
context.beginPath();
context.arc(end.x, end.y, 3, 0, Math.PI * 2.0, false);
context.stroke();
}