diff --git a/www/js/svg.js b/www/js/svg.js index b0acd2b..2b73143 100644 --- a/www/js/svg.js +++ b/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'; }