如何使用SVG弧为指南针的8个方向绘制1/4弧？

Question

How do I draw an arc starting at the 8 different directions, and making a 1/4 circle? Like a compass. I have been trying every combination for about an hour trying to get this to be an arc like the start of an "r" with a tail, but I can't get it working. I would like to see how it's done in all directions so I can get a better sense of how to manipulate it.

 function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } console.log(describeArc(0, 250, 25, -90, 0)) function describeArc(x, y, radius, startAngle, endAngle){ var start = polarToCartesian(x, y, radius, endAngle); var end = polarToCartesian(x, y, radius, startAngle); var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y ].join(" "); return d; }

 path { float: left; stroke-linecap: round; }

 <svg style="display: inline-block; width: 50px; height: 250px" viewBox="-20 -20 120 520" xmlns="http://www.w3.org/2000/svg"> <g> <path d=" M 0 300 l 0 -50 M 0 225 A 25 25 0 0 0 -25 275" fill="none" stroke="#000" stroke-width="10px" /> </g> </svg>

I got that function off SO, but doesn't seem to work how I would expect.

Answer 1

Your function polarToCartesian is converting polar coordinates to cartesian coordinates.
I don' think that is what you want, but you'd put the following sets of arguments in the console.log for the startAngle, endAngle

0, 45 | 45, 90 | 90, 135 | 135, 180 | 180, 225 | 225, 270 | 270, 315 | 315, 360 |.

The x and y args need to be calculated again as different coordinates in a cartesian coordinate space. These depend on where your first coordinates start. Drawing anything that depends on going around in a circle, you need to think of where the centre of the circle is. The coordinates for the centre of the circle is best described as 0, 0 and then after move the circle to the desired location. The coordinates are dependent on the radius, you have as 25. So I'd suggest:

0, -25 | 17.677, -17.677 | 25, 0 | 17.677, 17.677 | 0, 25 | -17.677, 17.677 | -25, 0 | -17.677, 17.677

The 17.677 is obtained by the pythagorus theorem of a² + b² = c².

And if you know the radius, because a right angled triangle can be made from the radius (as the hypotenuse) you get a triangle with equal sides with the hypotenuse at 45°.
So the length of one of the equal sides is √(c² / 2).

function equalSideLength(radius){
                                 return Math.sqrt(Math.pow(radius, 2)/2);
}

To illustrate an example of output, first just showing quarters and then eighths of the circle, I'd suggest the following plan and add the stroke attribute as needed and set fill to none (whitespace added for readability and scale add to see it!). And don't forget to translate the whole drawing to where you need it.

 <svg width="1000" height="1000"> <g transform="translate(100 100) scale(50)"> <path d="M0 0 L 0 -2 A2 2 0 0 1 2 0 " fill="red"/> <path d="M0 0 L 2 0 A2 2 0 0 1 0 2" fill="yellow"/> <path d="M0 0 L 0 2 A2 2 0 0 1 -2 0" fill="pink"/> <path d="M0 0 L-2 0 A2 2 0 0 1 0 -2" fill="green"/> </g> <g transform="translate(400 100) scale(50)"> <path d="M0 0 L 0 -2 A2 2 0 0 1 1.4 -1.4" fill="red"/> <path d="M0 0 L 1.4 -1.4 A2 2 0 0 1 2 0 " fill="yellow"/> <path d="M0 0 L 2 0 A2 2 0 0 1 1.4 1.4" fill="pink"/> <path d="M0 0 L 1.4 1.4 A2 2 0 0 1 0 2 " fill="green"/> <path d="M0 0 L 0 2 A2 2 0 0 1 -1.4 1.4" fill="orange"/> <path d="M0 0 L-1.4 1.4 A2 2 0 0 1 -2 0 " fill="purple"/> <path d="M0 0 L-2 0 A2 2 0 0 1 -1.4 -1.4" fill="blue"/> <path d="M0 0 L-1.4 -1.4 A2 2 0 0 1 0 -2 " fill="grey"/> </g> <svg>