setLineDash

[chrisritter]

The new dashed line implementation in KineticJS 4.2.0 only works in Google Chrome.

While I know that this is documented in the Change Log, is it possible to shim support for dashed lines in Safari, Mozilla Firefox, Android Mobile, and IE9-10?

Given current web demographics approx. 75% of Desktop users/ at least 90% of Mobile users will not be able to see the dashed lines: http://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0

[ericdrowell]

Yea, I was expecting this to be a problem :(

The thing is, I want KineticJS to move forward. Previously, KineticJS only supported dashed straight lines. If we hook into the native dash line support (only chrome supports this right now), then any stroke can be dashed, including splines (which is coming for the next release).

I don't want browsers who aren't implementing the spec to hold us back. Just like today in web development, if you're using IE6, you won't get pretty rounded corners. This is a form of graceful degradation. I fully expect most browsers (especially FF and Safari) to implement dashed lines soon.

It is true that I could put in logic that sometimes draws dashed lines when its possible, manually, in browsers that dont support dashed lines (like straight lines, or straight strokes in IE9), but this is effectively adding bloat to the framework in order to make up for browsers not keeping up. Also, since dashed lines are purely aesthetic, it shouldn't break applications.

What do you think?

[chrisritter]

My only concern is Mozilla Firefox/mobile users, I think users on IE9 are used to graceful degradation but I worry that Firefox and mobile users expect the same experience as Google Chrome users.

That said if shimming support for other browsers adds too much complexity/blocks innovation, then I'm all for it.

[ericdrowell]

FF is usually pretty good with keeping up. I would be really surprised if they don't implement it within the next couple of months

[brian-c]

In what way is this "moving forward" if it breaks the library in current browsers?

I'd understand if this were breaking in even slightly older versions of Firefox, but matching a spec means nothing if it's not supported by the current implementations.

[chrisritter]

@brian-c

Yeah, I just downloaded Mozilla Firefox Nightly 20.0a1 (three versions ahead of the current version) and setLineDash is still not supported.

[ericdrowell]

For the time being, I don't have plans to reintroduce the lineDash logic just for the Line shape, because I'm fairly certain it will cause more confusion for people than its worth. In doing so, line dashes will work in all browsers, but will only work for general strokes for browsers that have implemented lineDash. It's easier to understand if its all or nothing, if a browser always supports it, or doesn't at all.

To me, the lineDash attribute is a lot like the border-radius CSS property. When creating a website, you can use border-radius to get nice rounded corners in modern browsers, while knowing that older browsers will just render the sharp corners. It won't break the app. This is a form of graceful degradation.

If more people make a ruckus about this I'll consider putting it back in, but currently I have a lot of bigger fish to fry in regards to bugz and enhancements :)

[chrisritter]

That's fine -- we'll survive without line dashes in Firefox :)

[lehni]

http://github.com/paperjs/paper.js has emulation of dashed lines at pretty decent speed. It chops curves into the bits that are to be rendered and uses bezier commands to draw them. Most of the code is in

https://github.com/paperjs/paper.js/blob/master/src/path/PathFlattener.js

And here you see how this class is used to draw:

https://github.com/paperjs/paper.js/blob/master/src/path/Path.js#L1937