我正在尝试创建一个“馅饼楔”。我不擅长。自从我开始尝试以来已经很长时间了。我看过很多示例,并在 JS 中完成了这个代码生成器:
var startPointX = 200;
var startPointY = 200;
var startAngle = 180;
var endAngle = 210;
var x1 = startPointX + 180*Math.cos(Math.PI*startAngle/180);
var y1 = startPointY + 180*Math.sin(Math.PI*startAngle/180);
var x2 = startPointX + 180*Math.cos(Math.PI*endAngle/180);
var y2 = startPointY + 180*Math.sin(Math.PI*endAngle/180);
console.log("M200,200 L" + x1 + "," + y1 + " A180,180 0 0,1 " + x2 + "," + y2 + " z");
效果很好!
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M200,200 L20,200 A180,180 0 0,1 44.1,110 z" fill="red" stroke="none" stroke-width="0" />
</svg>
但是,我需要做的是更改生成的“楔形”的半径。我似乎无法弄清楚哪些参数对应,或者我将如何修改我的方程式以进行补偿。替换所有“180”会给我一些奇怪的结果。
最佳答案
弧中的前两个值(在 A 之后)是弧的起始坐标,因此应等于 x1,y1。尝试:
var startPointX = 200;
var startPointY = 200;
var startAngle = 180;
var endAngle = 210;
var radius = 100;
var x1 = startPointX + radius * Math.cos(Math.PI * startAngle/180);
var y1 = startPointY + radius * Math.sin(Math.PI * startAngle/180);
var x2 = startPointX + radius * Math.cos(Math.PI * endAngle/180);
var y2 = startPointY + radius * Math.sin(Math.PI * endAngle/180);
console.log("M200,200 L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0,1 " + x2 + "," + y2 + " z");
关于javascript - SVG JavaScript "pie wedge"生成器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13092979/