尝试计算在 svg 和 javascript 中创建的饼图切片的角度

Question

我正在通过 javascript 和 svg 创建动态饼图切片。我需要切片的两边都有边框。我无法在两个边界上进行数学运算（我可以在起始边界上得到它，但不能在切片的最终边界上得到它。

let size = 200
let slicePercentage = 33
let radius = size / 2
let circumference = Math.PI * radius * 2
let slice = ((slicePercentage / 2) * circumference) / 100 + ' ' + circumference

let line = ((size / 2) + radius) * Math.cos(slicePercentage)

我在此处包含代码以显示： https://jsfiddle.net/yg210erv/1/

Answer 1

我已经分叉了小提琴来回答您的问题here，但您可能还想检查您想要完成的几何形状。基本上，您将size 作为第二行的y 坐标，这是没有意义的。我为x 和y 的line2 坐标设置了两个变量linex 和liney。表达式很简单：

let finalAngle = 2 * Math.PI * (slicePercentage/100)
let linex = radius + (radius * Math.cos(finalAngle))
let liney = radius + (radius * Math.sin(finalAngle))

你也可以写：

let linex = radius * (1 + Math.cos(finalAngle))

但这只有在您要始终在size/2创建具有相同中心的切片时才有效。