report: adjust score's arc length accounting for rounded linecap #9913
Conversation
| @@ -1134,7 +1133,6 @@ | |||
| text-decoration: none; | |||
| padding: var(--score-container-padding); | |||
|
|
|||
| --circle-border-width: 8; | |||
There was a problem hiding this comment.
In order to keep this circle-stroke-width var in CSS, we'd need to use both requestAnimationFrame and getComputedStyle in order to read it. That seemed not worth it.
(And currently we never change this width)
There was a problem hiding this comment.
seems like it should be relative to the viewbox specified in the svg anyhow so seems even better 👍
|
wanna take care of #9803 too? (the part where 0 should not show an arc) |
|
the 100 is off now :( |
Yeah...... I don't love the 100 now. It's gotta be a perfect ring. |
|
If the end of the line weren't rounded I would agree this is the appropriate fix, but given that this change makes only the tip extend to where the line should be, it visually feels like the line does not extend far enough now because we have a grand total of like 2 pixels on the actual line.. 100 makes this obvious but a 25 too feels like it's just short of a quarter instead of being an actual quarter circle. WDYT about compensating for this fact and splitting the difference between master and this PR? |
Yeah I think that's the solution. I think there's four total options:
@yuinchien what do you think? Also this marks the first time that trigonometry has assisted in my career. Thanks Mr Casarella! |
|
Love it! I think for 0, we don't need the tiny circle. 100 should be full circle yes. Looks great, thanks for the detail attention to visual! |
|
updated. i implemented the "Half-trim back the arc on both ends" option. and:
gif at the top is updated. |
lies? |
oops didn't hit submit. thx done. |
| /** | ||
| * Define the score arc of the gauge | ||
| * Credit to xgad for the original technique: https://codepen.io/xgad/post/svg-radial-progress-meters | ||
| * @param {SVGCircleElement} elem |
| * @param {SVGCircleElement} elem | ||
| * @param {number} percent | ||
| */ | ||
| _setGaugeArc(elem, percent) { |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| // The rounded linecap of the stroke extends the arc past its start & end. | ||
| // First, we tweak the -90deg rotation to adjust | ||
| const strokeWidthPx = Number(elem.getAttribute('stroke-width')); | ||
| const rotationalAdjustmentPercent = 0.25 * strokeWidthPx / circumferencePx; |
There was a problem hiding this comment.
maybe pull the 0.25 (and the /2 below) into a constant for easy tweaking in the future?
| @@ -1134,7 +1133,6 @@ | |||
| text-decoration: none; | |||
| padding: var(--score-container-padding); | |||
|
|
|||
| --circle-border-width: 8; | |||
There was a problem hiding this comment.
seems like it should be relative to the viewbox specified in the svg anyhow so seems even better 👍
Co-Authored-By: Brendan Kenny <bckenny@gmail.com>
Co-Authored-By: Brendan Kenny <bckenny@gmail.com>
Co-Authored-By: Patrick Hulce <patrick.hulce@gmail.com>
I noticed that with the rounded linecap, the arc visually extends farther than it really should.
So here's the proper adjustment. After this change, the arc shortens up a little bit on both ends.
partial fix of #9803
UPDATE. I tweaked the math.. the arcs now go halfway between the two cases above.
GIF of before and after (updated):
