lineAlignment at small sizes

Expected Behavior

• Inside stroke is contained within the fillable area of an object (it certainly shouldn’t extend further than center stroke)
• Outside stroke edges do not clip

Current Behavior

https://pixiplayground.com/#/edit/bvjRVoDSNkUH9TGF_Ihsm

Columns left to right are: Outside, Center, Inside Rows are the same item

Possible Solution

Eeek, I know this a tough problem, stuff starts breaking down when stroke is larger than the fillable area.

• The outside stroke edges clipping looks like a miterLimit issue (could that be exposed for Graphics lineStyle)?
• Clipping the inside stroke to the fill of the item

Environment

• pixi.js version: _e.g. 5.2.1
• Browser & Version: Chrome 80
• OS & Version: macOS Mojave
• Running Example: https://pixiplayground.com/#/edit/bvjRVoDSNkUH9TGF_Ihsm

[georeith]

@SukantPal thanks for the explanation. So my understanding is that its not necessarily the optimal way of it working but its a design decision based on it being more expensive to work out where the fill will be located.

The reason this is an issue for me is that I am building a drawing tool for designers and thus want them to be able to add polygons and choose their line alignment, so I am unable to control the direction of the polygons created.

I will be looking at porting my existing line alignment which uses double width stroke and composite operations to perform inside and outside strokes. Will feedback my success.

[georeith]

@ivanpopelyshev that’s fair, I am just starting down my journey with pixi.js and evaluating its level of support for our current offering (as we feel the need to move to a more performant base). I have similar time constraints at the moment and like you need to put more time into bigger issues but when this is a larger priority for us I will try and revive the miterLimit and lineJoin issues.

Regarding the inside stroke escaping the fill area has this been evaluated before?

Not sure how you are implementing lineAlignment but I had a canvas 2D solution that doesn’t require path offsetting: https://jsbin.com/merosuranu/1/edit?html,js,output

I think we will fix many vector-related before the end of year, because I’m working on huge Flash-related converted projects. If MiterLimit difficulty is 1 , then stuff I’m working for is likely 200.

This is very exciting 😄