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开始。当我设置stroke-linecap =“round”并且stroke-width =“3”时，弧开始时间早于6:15，因为stroke-linecap =“round”添加了额外的像素。

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

Answer 1

计算圆帽半径（线宽的一半）对应的度数。然后根据需要从开始/结束角度添加或减去它。

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

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

如何在我计算的弧中补偿由stroke-linecap =“round”添加的额外像素？

1 个答案: