Coder Social home page Coder Social logo

LineCap and LineJoin about vg-renderer HOT 5 CLOSED

X-Ryl669 avatar X-Ryl669 commented on May 18, 2024
LineCap and LineJoin

from vg-renderer.

Comments (5)

jdryg avatar jdryg commented on May 18, 2024

To be honest, the main reason I haven't implemented round caps and joins + bevel joins is because in my project I don't really have a use for them (i.e. it would look a bit better with them, as I used them initially with NanoVG, but the difference isn't that big so I can live with that).

Another reason is that it simplifies mesh generation. E.g. the required number of indices and vertices without round joins is easily calculated in all cases (filled paths and strokes with or without AA fringes). Round joins requires either correctly calculating the number of vertices/indices before generating the mesh or have the ability to overallocate and discard unused elements (e.g. assume that each round join will always needs N vertices and if it ends up using only K (K < N) return the rest to the vertex buffer).

It's not hard to implement but it complicates things a bit more than I needed for my project.

What's supported at the moment is Square + Butt caps (just an offset as you said) and Miter joins.

Clipping line joins with scissor might be a solution but scissoring each shape separately forces a new draw command to be added to the command list. Reducing draw call was the primary reason I wrote this code, so... it's not an option for me.

from vg-renderer.

jdryg avatar jdryg commented on May 18, 2024

In case you are still interested, I just pushed the code for round caps and joins as well as bevel joins. Still no miter limit, so miter joins never convert to bevel joins.

Needs some cleanup because I decided to break the implementation of each join type into separate functions, but it works (tested in my project where I use most of the combinations).

Performance of previous features (miter joins + square/butt caps) should be the same as before. As it's expected round joins are more expensive (require more geometry especially with AA).

from vg-renderer.

X-Ryl669 avatar X-Ryl669 commented on May 18, 2024

Thanks.

Still no miter limit, so miter joins never convert to bevel joins.

Is it the function called nvgMiterLimit in Nanovg?
Never used it, but I guess it should not be hard to implement if you have bevel joins...

from vg-renderer.

jdryg avatar jdryg commented on May 18, 2024

You might not have used it but it has a default value of 4 which means that miter angles smaller than ~29 degrees get converted to bevels.

I might implement it at some point. But I have to cleanup the code first and make it more compact (a lot of the logic is shared between the various combinations).

from vg-renderer.

jdryg avatar jdryg commented on May 18, 2024

If you want to see what your output will be without miter limit in NanoVG, try setting the limit to a really large value.

from vg-renderer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.