accept-and-work/auto-accept
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Teken anchorpoints van de polygonen

Browse source
This commit is contained in:
Ruben van de Ven 2020-12-22 12:04:42 +01:00
parent fb223cd7fa
commit 7329f8e7ae
1 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
www/js/svg.js
View file

@ -1,14 +1,20 @@
function getPathShapeBetweenPoints(p1, p2, corners) { function getPathShapeBetweenPoints(p1, p2, corners) {
let d = `M ${p1.x},${p1.y} L `; let cornerPoints = [/*[p1.x,p1.y]*/];
if(corners == 4){ if(corners == 4){
// draw inbetween p1 & p2. // draw inbetween p1 & p2.
d += ` ${p1.x},${p2.y} ${p2.x},${p2.y} ${p2.x},${p1.y} ${p1.x},${p1.y} `; // 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{ else{
// find center of circle that describes the polygon of which p1 and p2 are part // 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 // it's _not_ the center between the two points, as p1 and p2 are corners on the shape
// distance between p1 and p2 // distance between p1 and p2
const length = Math.sqrt(Math.pow(p1.x-p2.x,2)+ Math.pow(p1.y - p2.y, 2)); const length = Math.sqrt(Math.pow(p1.x-p2.x,2)+ Math.pow(p1.y - p2.y, 2));
@ -37,10 +43,37 @@ function getPathShapeBetweenPoints(p1, p2, corners) {
for (let a = 0; a < Math.PI*2; a += segmentAngle) { for (let a = 0; a < Math.PI*2; a += segmentAngle) {
let x = radius * Math.sin(a-startRot) + cx; let x = radius * Math.sin(a-startRot) + cx;
let y = radius * Math.cos(a-startRot) + cy; let y = radius * Math.cos(a-startRot) + cy;
d += ` ${x},${y}`; cornerPoints.push([x,y])
// d += ` ${x},${y}`;
// d += ` A 50 50 100 1 1 ${x} ${y+0.1} L `
} }
} }
// 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'; return d + ' Z';
} }