kicanvas
kicanvas copied to clipboard
theacodes
non-default text & knockout text renders incorrectly
hi! I've noticed that knockout text (reverse video) and fancy fonts (georgia on the mac, in this case) don't render correctly. it looks like the inside/outside rules are wrong. https://github.com/plinkysynth/scratch_stuff/blob/main/hellokicanvas.kicad_pcb (I tried to make a direct kicanvas link but its not loading?! it loads locally tho)
I've also created a more minimal file consisting of the board outline and a single letter 'o' in georgia font, if that's helpful for a simpler repro. https://github.com/plinkysynth/scratch_stuff/blob/main/minimal.kicad_pcb
sorry if this is a dup, I couldn't see one!
(sorry I forgot to say - repros on chrome, firefox and safari mac, all up to date as of today.) ~~perhaps the fix will be as simple as setting - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule - to evenodd, rather than nonzero (the default)? but I havent looked at the code.~~ oh it looks like you're tesselating to triangles. that makes the fix trickier. :(
We don't use SVG for rendering. KiCanvas hasn't yet implemented custom fonts or knockout text, but it's coming..
On Tue, Oct 24, 2023, 1:40 PM Alex Evans @.***> wrote:
(sorry I forgot to say - repros on chrome, firefox and safari mac, all up to date as of today.) perhaps the fix will be as simple as setting - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule - to evenodd, rather than nonzero (the default)? but I havent looked at the code.
— Reply to this email directly, view it on GitHub https://github.com/theacodes/kicanvas/issues/50#issuecomment-1777719718, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB5I4Y44BYOV5F7RE7PS73YA74R3AVCNFSM6AAAAAA6OBIK3WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZXG4YTSNZRHA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
understood! I went and looked after I left my comment and saw that you're tesselating the polygons yourself. awesome, but yeah, makes it tricker. I guess you need a good javascript tesselator with support for self intersecting polygons + odd/even rules? ironically old old gl used to have a one liner more or less to do this (GLUtessellator) but I dont think GLU made it into the webgl age :) however, I can vouch for this guy being amazing so its exciting that this exists: https://github.com/memononen/tess2.js/