Doodle3D-Slicer/comb.js

98 lines
2.2 KiB
JavaScript
Raw Normal View History

2018-05-24 16:14:03 +02:00
import comb from './src/sliceActions/helpers/comb.js';
2018-05-02 16:29:44 +02:00
2018-05-02 15:07:03 +02:00
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
2018-05-24 16:14:03 +02:00
canvas.width = 800;
canvas.height = 800;
2018-05-02 15:07:03 +02:00
const context = canvas.getContext('2d');
context.lineJoin = 'bevel';
function circle(radius = 10, x = 0, y = 0, clockWise = true, segments = 40) {
const shape = [];
for (let rad = 0; rad < Math.PI * 2; rad += Math.PI * 2 / segments) {
if (clockWise) {
shape.push({ x: Math.cos(rad) * radius + x, y: Math.sin(rad) * radius + y });
} else {
shape.push({ x: Math.cos(rad) * radius + x, y: -Math.sin(rad) * radius + y });
}
}
return shape;
}
2018-05-24 16:14:03 +02:00
const START = { x: 200, y: 400 };
2018-05-02 17:42:31 +02:00
const END = { x: 400, y: 300 };
2018-05-24 16:14:03 +02:00
const POLYGON = [[
{ x: 10, y: 10 },
{ x: 600, y: 10 },
{ x: 500, y: 200 },
{ x: 600, y: 600 },
{ x: 10, y: 600 }
], [
{ x: 160, y: 120 },
{ x: 120, y: 400 },
{ x: 400, y: 400 }
]];
// const POLYGON = [
// circle(300, 305, 305, true, 4),
// circle(40, 305, 105, false, 4),
// circle(40, 305, 205, false, 4),
// circle(40, 305, 305, false, 4),
// circle(40, 305, 405, false, 4),
// circle(40, 305, 505, false, 4)
// ];
2018-05-02 15:07:03 +02:00
canvas.onmousedown = (event) => {
START.x = event.offsetX;
START.y = event.offsetY;
compute();
};
canvas.onmousemove = (event) => {
END.x = event.offsetX;
END.y = event.offsetY;
compute();
};
compute();
function compute() {
2018-05-24 16:14:03 +02:00
const path = comb(POLYGON, START, END);
2018-05-02 15:07:03 +02:00
// draw
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
2018-05-24 16:14:03 +02:00
for (const shape of POLYGON) {
2018-05-02 15:07:03 +02:00
let first = true;
for (const { x, y } of shape) {
if (first) {
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
first = false;
}
}
context.closePath();
context.fillStyle = 'lightgray';
context.fill();
2018-05-24 16:14:03 +02:00
context.beginPath();
for (const { x, y } of path) {
context.lineTo(x, y);
2018-05-02 15:07:03 +02:00
}
2018-05-24 16:14:03 +02:00
context.lineWidth = 2;
context.stroke();
2018-05-02 15:07:03 +02:00
context.beginPath();
context.arc(START.x, START.y, 3, 0, Math.PI * 2);
context.fillStyle = 'blue';
context.fill();
context.beginPath();
context.arc(END.x, END.y, 3, 0, Math.PI * 2);
context.fillStyle = 'red';
context.fill();
}