EaselJS, Haxe and format.SVG together?

[Tom]

Hi!

Anyone tried to use format.SVG parser and renderer with javascript target and EaselJS to draw the SVG shape into a createjs.easeljs.Graphics object?
This way the svg remains scalable and I can add shadow, and etc.

(I know, that EaselJS can parse svg into image, but it is not scalable, so it is not an option.)

I also tried to use createjs.easeljs.DOMElement with svg background, but it can use shadow via CSS filter / -webkit-filter, and in Chrome the oredring is buggy. (without filter it is good)

So, any source to use format.SVG with javascript target?

[JLM]

Tom

I don't understand why you would want to do this?  SVG in browsers in probably normally hardware accelerated and if you want a rendered image you can grab the pixels easy enough, and it's fairly easy in code to add to a current svg using code. For instance with hxDaedalus js target I added optional SVG rendering which you can turn on with a compiler flag: -D svg you can try the examples by unhashing that line in the hxml's. 
https://github.com/hxDaedalus/hxDaedalus-javascript-examples
If you want scaleable you just resample the svg, I have put svg scaling into hxDaedalus https://github.com/hxDaedalus/hxDaedalus/blob/master/src/hxDaedalus/svg/BasicSvg.hx#L57.
To convert SVG to an image, and just inject a different scale into the input data string.
    public function processSVG(data: String) {
        img = new Image();
        img.onload = function() { drawOnScreen( data ); }
        img.src = 'data:image/svg+xml;base64,' + Browser.window.btoa( data );
    }
        var w = img.width;
        var h = img.height;
        canvasRenderingContext2D.drawImage( img, 0, 0, w, h );
Kind of missing the point of why you want your own javascript renderer of svg when browser have really good ones?

[Tom]

Hi!

I'm come from Haxe-Flash, and I used to make everything by myself - hard to teach myself, that not need to reinvent the wheel.
My knowledge about using the browsers' inner svg renderer is limited, but I eager to learn.
Thanks for your guidelines, I will try it, definitely.

Best regards!
Tom

[Justin L Mills]

Tom

No worries I am also a flasher and always trying to learn more and sometimes doing it the hard way like you :) But maybe try native browser svg if you can.

Best Justin

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/d/optout.

[Yaroslav Sivakov]

Hello, Tom! I try to using "format.SVG" in my project NanoFL (to parse SVG into my internal structures and render them to the canvas through EaselJS). My exprerience: format.SVG is very basic library. SVG support many things what "format.SVG" don't know. So you can use this library only for very simple SVG images.
I spend several months and write a open-source parser which much more functional and bug-free, but it is not a library, it is a plugin to NanoFL editor. But you can use its code as your base: https://bitbucket.org/nanofl/plugins/src/8f7c3e08d34a/SvgImporterPlugin/?at=default.

пятница, 10 июля 2015 г., 11:22:58 UTC+3 пользователь Tom написал:

[Tom]

Thanks, Yaroslav!

I will try it, because the mobile browsers' svg support is not so good. Eg. in mobile chrome there is a mess, from 3 distinct svgs, 2 appears the same. On desktop this is working well.
I tried createjs.easeljs.DOMElement, and it is almost perfect, except some zindex bug, but it can be fix, and on mobile there is ok.

So DOMElement is perfect with some workaround, but I would prefer more universal solution, so I will try your code, thanks for the sharing.