In EaselJS only shapes can became a masks, so I was wondering if I can convert somehow SVG made in Inkscape into EaselJS, I found this great tool - http://www.professorcloud.com/svg-to-canvas/ that allows me to convert SVG to Context, but is there a way/tool to easily convert SVG to EaselJS Shape (this is almost the same object as Shape in Flash/AS3)? I need only a basic shape like this:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="776.4032"
height="405.87927"
id="svg1383">
<defs
id="defs1385" />
<metadata
id="metadata1388">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(15.455332,-13.016229)"
id="layer1">
<path
d="m 1193.5963,82.437378 a 369.81683,206.47517 0 1 1 -739.63371,0 A 369.81683,206.47517 0 1 1 1193.5963,82.437378 Z"
transform="matrix(1.0497132,0,0,0.98287671,-491.98585,134.93009)"
id="mask"
style="fill:#008000;fill-opacity:1;stroke:none;display:inline" />
</g>
<g
transform="translate(15.455332,-13.016229)"
id="layer2" />
</svg>
After you generate your js code on webpage you gave, you can override function in shape called draw . Just paste generated code in your function and you should be able to see your image.
Example code:
var s = new createjs.Shape();
// this is important because if we dont change graphics our overriden
// function wont be called.
s.graphics.beginFill("#FF0000").rect(0, 0, 75, 100);
//save old draw function
var oldDraw = s.draw;
// here we switch draw funciton to the one generated from svg file
s.draw = this.draw;
// draw our model on cache
s.cache(0, 0, 66, 113, 2);
// and now we can back to old drawing function
s.draw = oldDraw;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.