91 lines
3.0 KiB
JavaScript
91 lines
3.0 KiB
JavaScript
|
|
function getPathShapeBetweenPoints(p1, p2, corners) {
|
|
let cornerPoints = [/*[p1.x,p1.y]*/];
|
|
if(corners == 4){
|
|
// draw inbetween p1 & p2.
|
|
// let d = `M ${p1.x},${p1.y} L `;
|
|
// d += ` ${p1.x},${p2.y} ${p2.x},${p2.y} ${p2.x},${p1.y} ${p1.x},${p1.y} `;
|
|
cornerPoints.push([p1.x, p1.y]);
|
|
cornerPoints.push([p1.x, p2.y]);
|
|
cornerPoints.push([p2.x, p2.y]);
|
|
cornerPoints.push([p2.x, p1.y]);
|
|
}
|
|
else{
|
|
// find center of circle that describes the polygon of which p1 and p2 are part
|
|
// it's _not_ the center between the two points, as p1 and p2 are corners on the shape
|
|
|
|
|
|
// distance between p1 and p2
|
|
const length = Math.sqrt(Math.pow(p1.x-p2.x,2)+ Math.pow(p1.y - p2.y, 2));
|
|
|
|
const segmentAngle = Math.PI * 2 / corners;
|
|
// TODO: can we find a way to draw not from the first 3 segments, but have the
|
|
// cursor span as many segment as possible
|
|
// const segmentsAngle = Math.floor(180/segmentAngle) * segmentAngle;
|
|
|
|
const radius = (length*.5)/Math.sin(segmentAngle);
|
|
|
|
const rotation = Math.atan2((p2.y -p1.y),(p2.x - p1.x)) + (Math.PI/2-segmentAngle);
|
|
|
|
const dx = Math.cos(rotation) * radius;// * Math.sign(p2.x - p1.x);
|
|
const dy = Math.sin(rotation) * radius;// * Math.sign(p2.y - p1.y);
|
|
// we now have the center:
|
|
const cx = p2.x - dx;
|
|
const cy = p2.y - dy;
|
|
|
|
// startpoint in relation to circle
|
|
const sx = cx - p1.x;
|
|
const sy = cy - p1.y;
|
|
|
|
let startRot = Math.asin(sx / radius);
|
|
if(sy>0){startRot = -1 * startRot + Math.PI;}
|
|
|
|
for (let a = 0; a < Math.PI*2; a += segmentAngle) {
|
|
let x = radius * Math.sin(a-startRot) + cx;
|
|
let y = radius * Math.cos(a-startRot) + cy;
|
|
cornerPoints.push([x,y])
|
|
// d += ` ${x},${y}`;
|
|
|
|
// d += ` A 50 50 100 1 1 ${x} ${y+0.1} L `
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// teken punten tussen alle punten
|
|
let allCornerPoints = [];
|
|
for (let index = 0; index < cornerPoints.length; index++) {
|
|
const c = cornerPoints[index];
|
|
const nextC = cornerPoints[(index+1)%cornerPoints.length];
|
|
allCornerPoints.push(c);
|
|
allCornerPoints.push([.5*(nextC[0]+c[0]), .5*(nextC[1]+c[1])]);
|
|
}
|
|
cornerPoints = allCornerPoints;
|
|
|
|
|
|
// create d:
|
|
let d = "";
|
|
const r = 10;
|
|
for (let index = 0; index < cornerPoints.length; index++) {
|
|
const c = cornerPoints[index];
|
|
const nextC = cornerPoints[(index+1)%cornerPoints.length];
|
|
|
|
const angle = Math.atan2(nextC[1] - c[1], nextC[0] - c[0]);
|
|
|
|
const dx = Math.cos(angle) * r;
|
|
const dy = Math.sin(angle) * r;
|
|
|
|
d += ` M ${c[0]+dx},${c[1]+dy} L `
|
|
d += ` ${nextC[0]-dx},${nextC[1]-dy}`;
|
|
// Thanks Anthony: https://stackoverflow.com/a/10477334
|
|
d += ` a ${r} ${r} 0 1,0 ${dx*2},${dy*2}`;
|
|
d += ` a ${r} ${r} 0 1,0 ${-dx*2},${-dy*2}`;
|
|
|
|
}
|
|
|
|
|
|
// console.log(d);
|
|
return d + ' Z';
|
|
}
|
|
|
|
export {getPathShapeBetweenPoints}; |