svg - How do I compensate for the extra pixels added by stroke-linecap="round" in my calculated arc? -
i'm creating arc based on sunrise , sunset using following example of sunrise @ 6:15am
hour * 15 = 90 minutes * 0.25 = 3.75 hour + minutes = 93.75
here function used calculate path.
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 }
and here svg snippet
<path id="sun_ring_start" :d="getarcs(27, 93.75, 0)" fill="none" stroke="yellow" stroke-width="3" stroke-linecap="round" />
if use stroke-linecap="butt" stroke-width="3" can see arc starts @ 6:15 on clock face. when set stroke-linecap="round" stroke-width="3" arc starts earlier 6:15 because of pixels added stroke-linecap="round".
how can compensate pixels added stroke-linecap="round"?
work out round cap radius (half line width) corresponds in degrees. add or subract start/end angle appropriate.
var strokewidth = 3; var capsizeindegrees = (strokewidth/2) * 360 / cirumference.
it won't exact, should near enough needs.
Comments
Post a Comment