Raphael.js For Cocos Creator 2.x

If you’re looking for a version of ccc.Raphael, originally ported by 2youyou2 that works on Cocos Creator 2.x, look no further. I have ported it to work with the latest Cocos Creator version and you can try it out here: https://github.com/stefandee/raphael-example

The port has been developed using Cocos Creator 2.0.10 and has been reportedly tested with 2.1.3 as well.

There are a few caveats with it, though. The dashed line stroke sample is only partly working, seems that the algorithm doesn’t do right. I’m not sure if this is because the newer CC affine transform methods behave differently from the older ones or it’s just my mistake somewhere 🙂

Also, as with the original, the svg support is very basic. It’s only able to load only some specific svgs, while it’s not able to parse correctly svg exported by Inkscape, for instance (especially if they contain the group tag).

In terms of svg paths, it’s only able to render simple paths that don’t contain “holes”. You can test this using the assets/resources/svg/square_with_hole sample:

For this kind of path to work, it would be necessary to transform, on the fly, from the svg path data to a triangle mesh.

I was particularly interested in this library while working on Dog And Ball Forever as I explored loading svg to be used as level design elements and integrate them with the physics simulation (e.g. custom obstacles, terrain, etc). Even if, in the end, I have implemented a customized procedural solution for terrain, I don’t regret doing the work.

Hopefully, someone will find this useful. If you do, I’d like to hear back from you.