如何补偿计算弧中描边线帽= "round"添加的额外像素？

Question

我正在使用以下上午 6：15 日出示例创建基于日出和日落的弧

线

hour * 15 = 90
minutes  * 0.25 = 3.75
hour + minutes = 93.75

这是我用来计算路径的函数。

polarToCartesian: function (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))
}
},
describeArc: function (x, y, radius, startAngle, endAngle) {
var start = this.polarToCartesian(x, y, radius, endAngle)
var end = this.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
}

这是 svg 片段

<path id="sun_ring_start" :d="getArcs(27, 93.75, 0)" fill="none" stroke="yellow" stroke-width="3" stroke-linecap="round" />

如果我使用stroke-linecap="butt"和stroke-width="3"，你可以看到弧线从钟面上的6：15开始。当我将笔触线帽="圆形"与笔触宽度="3"时，弧线比 6：15 更早开始，因为笔划线帽="圆形"增加了额外的像素。

如何补偿由 stroke-linecap="round" 添加的额外像素？

Answer 1

计算出圆帽半径(线宽的一半(以度为单位对应。 然后根据需要从开始/结束角度添加或子处理它。

var strokeWidth = 3;
var capSizeInDegrees = (strokeWidth/2) * 360 / cirumference.

它不一定是准确的，但它应该足够接近您的需求。