search

CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.13k stars 1.97k forks source link

Is a poly shape closing the path? #1046

Closed danzen closed 3 years ago

danzen commented 4 years ago

Just noticed that the tip of a drawPoly is cut off a little. I have had that happen when the path is not closed at the end. Just putting this here as a reminder to look at later!

danzen commented 4 years ago

image This is an example. The CreateJS code does have a closePath. And it is weird, when I use a "round" setting for the joints then it goes round. When I do a bevel it does bevels on all the rest but a different bevel on the start and stop joint. The difference is small but it is there. It is the same incorrect bevel as when miter is used. So, looking into it further.

image

image

danzen commented 4 years ago

I see... closePath just draws a straight line between the ends so that is why it looks like a bevel. So for the Poly, I just went right around to the first point again and we get the desired end.

image

In PolyStar:

ctx.moveTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);
for (var i=0; i<sides+1; i++) {
    angle += a;
    if (ps != 1) {
        ctx.lineTo(x+Math.cos(angle)*radius*ps, y+Math.sin(angle)*radius*ps);
                if (i==sides) break;
    }
    angle += a;
    ctx.lineTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);
}
ctx.closePath();
danzen commented 3 years ago

Added the change to the main branch. https://github.com/CreateJS/EaselJS/commit/9cb3b4bd7e1d49e285f65a5dd04cc56ebb3a940f Also, just thought to test with reduced alpha line color and it works fine.