ericdrowell
Kinetic.Path cannot be open with a fill
A Kinetic.Path shape cannot be open and be filled.
Curerntly, if the path is closed, it is filled, otherwise it's not possible to fill.
Checking the code, it seems to be intentionally.
if (closedPath) {
context.fillStrokeShape(this);
}
else {
context.strokeShape(this);
}
You can do a checkout, modify src/plugins/Path.js:86 and change it to always do a fill:
context.fillStrokeShape(this);
Correct that it's by design. We had the opposite bug filed where an open shape was incorrectly filling when they just wanted it stroked, so this seems the most appropriate behavior.
-----Original Message----- From: "Dieter Luypaert" [email protected] Sent: 2/10/2014 3:28 PM To: "ericdrowell/KineticJS" [email protected] Subject: Re: [KineticJS] Kinetic.Path cannot be open with a fill (#721)
Checking the code, it seems to be intentionally. if (closedPath) { context.fillStrokeShape(this); } else { context.strokeShape(this); } You can do a checkout, modify src/plugins/Path.js:86 and change it to: context.fillStrokeShape(this); — Reply to this email directly or view it on GitHub.
I don't agree with this choice.
You can set fillEnabled to false in your application logic when deemed necessary. Like it is now, there is no way to have a fill on an open shape.
Also conveying to the SVG logic, a fill should work on an open path. http://jsfiddle.net/XxCa5/1/
I'm not going to debate which is the "most appropriate behaviour", however, not being able to fill an open path is a lack of functionality that I simply cannot do without (I'd have to switch to another framework).
I'm happy to rework the changes to add a special "fillOpenPath" attribute. The default for this would be false (to maintain backward compatibility). The rendering logic would then be:
if (closedPath || fillOpenPath) {
context.fillStrokeShape(this);
} else {
context.strokeShape(this);
}
If I may comment on this issue with an example, why this path can't be filled like this (made with free-drawing on FabricJS)?
Add a ",z" to the end of your path to close the path (necessary for filling).
On Tue, Oct 28, 2014 at 1:06 PM, Bernardo F. Domingues < [email protected]> wrote:
If I may comment on this issue with an example, why this path http://jsfiddle.net/bernardofd/vvd87737/ can't be filled like this (made with free-drawing on FabricJS)? [image: image] https://cloud.githubusercontent.com/assets/2365802/4812964/84b89632-5ec4-11e4-9fea-4d72c6424dc9.png
— Reply to this email directly or view it on GitHub https://github.com/ericdrowell/KineticJS/issues/721#issuecomment-60792480 .
@jfollas Yes, indeed. Thank you for your response. But this might not be the end result that the user may want, since it creates a black line that closes the polygon. In order to reproduce exactly, I may have to create two overlapping paths, one with the stroke and other with the fill, as seen here (enhanced).
It's not an easy problem to solve universally. Unfortunately, SVG Path support in Kinetic does not attempt to handle all edge cases. As you discovered, you may need to manually split the path into multiple shapes to have different behavior for different parts.
Or, maybe before closing the path with a z command, you can try to M to your first point (so closing won't create that line connecting to the first point).
On Tue, Oct 28, 2014 at 1:34 PM, Bernardo F. Domingues < [email protected]> wrote:
@jfollas https://github.com/jfollas Yes, indeed. Thank you for your response. But this might not be the end result that the user may want, since it creates a black line that closes the polygon. In order to reproduce exactly, I may have to create two overlapping paths, one with the stroke and other with the fill, as seen here http://jsfiddle.net/bernardofd/vvd87737/2/ (enhanced).
— Reply to this email directly or view it on GitHub https://github.com/ericdrowell/KineticJS/issues/721#issuecomment-60797285 .
@jfollas Very nice. It did the trick. For my application, creating two Paths was not a viable solution.
Thank you.