Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slight difference between Stroke and strokeOffset #4

Open
chrism opened this issue Jul 29, 2019 · 0 comments
Open

Slight difference between Stroke and strokeOffset #4

chrism opened this issue Jul 29, 2019 · 0 comments
Labels
bug Something isn't working

Comments

@chrism
Copy link

chrism commented Jul 29, 2019

Hi,

Thanks for the great library, it's really proving to be very useful.

I have noticed one of my shapes has a small difference between the native stroke and the generated offsetStroke and wondered if there was a way to fix it.

The shape itself is a path based on two touching identical ovals, which have the same length trimmed off to create an S-like shape.

// my original shape of two ovals
let pathData = "M512,512 c141.385,0,256-71.635,256-160S653.385,192,512,192s-256,71.635-256,160S370.615,512,512,512s256,71.635,256,160 S653.385,832,512,832s-256-71.635-256-160S370.615,512,512,512"
var path = new Path(pathData);
path.strokeColor = 'black';
path.strokeWidth = 32;

// some lengths to use to trim the shape
let fullLength = path.length
let trimLength = fullLength / 16 ;

// trimmed path with start and end cropped
var trimmedPath = path.splitAt(trimLength);
var endPath = trimmedPath.splitAt(trimmedPath.length - trimLength);
path.remove();
endPath.remove();

// need to clear the handles so the joins are straight
trimmedPath.firstSegment.handleIn.set({ x: 0, y: 0 });
trimmedPath.lastSegment.handleOut.set({ x: 0, y: 0 });
trimmedPath.lastSegment.selected = true;
trimmedPath.firstSegment.selected = true;

// offset code
var offsetPath = trimmedPath.offsetStroke(16);
offsetPath.fillColor = 'red';
offsetPath.opacity = 0.5;
offsetPath.selected = true;

You can see in the image attached that the start section matches perfectly, but for some reason the end section is drawn differently and doesn't quite match the original stroke.

Is there something I could do to resolve this difference?

Many thanks.
Screenshot 2019-07-29 at 17 30 53

@glenzli glenzli added the bug Something isn't working label Apr 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants