Teken anchorpoints van de polygonen

www/js/svg.js

@@ -1,14 +1,20 @@
 
 function getPathShapeBetweenPoints(p1, p2, corners) {
-    let d = `M ${p1.x},${p1.y} L `;
+    let cornerPoints = [/*[p1.x,p1.y]*/];
     if(corners == 4){
-        // draw inbetween p1 & p2.
-        d += ` ${p1.x},${p2.y} ${p2.x},${p2.y}  ${p2.x},${p1.y}  ${p1.x},${p1.y} `;
+            // 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));
 
@@ -37,10 +43,37 @@ function getPathShapeBetweenPoints(p1, p2, corners) {
         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;
-            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';
 }