Strokes: tessellate thick strokes to triangles so joint and cap styles apply#12
Open
neilrackett wants to merge 1 commit into
Open
Strokes: tessellate thick strokes to triangles so joint and cap styles apply#12neilrackett wants to merge 1 commit into
neilrackett wants to merge 1 commit into
Conversation
…s apply draw_pathes was hardcoded to GPU-expanded LineElements, which draw every segment as an independent quad: polylines rendered with a notch at each corner regardless of the JointStyle requested via lineStyle (a commented out branch shows a choice used to exist here). The complete miter/bevel/ round joint and cap implementation in getTriangleElements was unreachable - nothing called it. Route non-hairline strokes thicker than 1.5px through the triangle tessellator, using the same UnpackFillStyle material path as fills; hairlines and very thin strokes keep the fast LineElements path, where joints are invisible anyway. Triangle-built stroke shapes skip the LineElements shape pool (tryPoolShape already routes them to the triangle pool) and participate in the existing _lastStroke rebuild mechanism unchanged. Observed with an AS3 charting app drawing 8px polylines with JointStyle.MITER: corners rendered as two butt ends with a notch; with this change they render as proper mitered joints.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Strokes: tessellate thick strokes to triangles so joint and cap styles apply
This PR makes
lineStylejoint styles (miter/bevel/round) and cap styles workfor runtime-drawn strokes. Currently a polyline drawn with e.g.
JointStyle.MITERrenders with a notch at every corner:before — each segment is an independent quad, corners are two butt ends;
after — corners are proper mitered joints (or bevel/round as requested).
The bug
GraphicsFactoryStrokes.draw_pathesis hardcoded to build strokes asGPU-expanded
LineElements. Each segment is expanded to a quad independently,so no joint geometry can exist between segments — the requested
JointStyleand
CapsStyleon interior corners are ignored by construction. Acommented-out branch in
draw_pathessuggests there used to be a choice ofpath here.
Meanwhile
getTriangleElements— a complete CPU tessellation with fullmiter/bevel/round joint handling and cap support (including the miter-limit
clamp) — is unreachable: nothing in the codebase calls it.
The fix
Route non-hairline strokes thicker than 1.5px through
getTriangleElements,using the same
UnpackFillStylematerial path that fills use. Hairlines andvery thin strokes keep the fast
LineElementspath, where joints areinvisible anyway.
Bookkeeping: triangle-built stroke shapes are created fresh via
Shape.getShape(not from the LineElements stroke pool);tryPoolShapealready routes triangle shapes to the triangle pool, and the existing
_lastStrokeremove-and-rebuild mechanism works unchanged.Real-world impact
Found reviving an AS3/Flex-era charting app under AwayFL: 8px chart polylines
drawn with
JointStyle.MITER, miterLimit 255rendered with a visible notch atevery data point. With this change the peaks render as sharp mitered corners,
matching Flash. Verified against the app end-to-end (charts, plus a sweep of
other pages for stroke regressions).