2013-03-07 5 views
1

EaselJS에서만 모양이 마스크가 될 수 있으므로 Inkscape에서 만든 SVG를 EaselJS로 변환 할 수 있는지 궁금합니다. http://www.professorcloud.com/svg-to-canvas/ SVG를 컨텍스트로 변환 할 수있게 해주는 http://www.professorcloud.com/svg-to-canvas/, SVG를 EaselJS Shape로 쉽게 변환 할 수있는 방법/도구입니다 (Flash/AS3의 Shape과 거의 동일합니다). 나는이 같은 단지 기본 모양을 필요SVG to Shape (EaselJS)

당신은 당신이 준 웹 페이지에 당신의 JS 코드를 생성 한 후
<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> 
+1

이 Fabric.js 시도 - http://fabricjs.com – kangax

답변

0

, 당신은 draw라는 형태로 기능을 대체 할 수 있습니다. 함수에 생성 된 코드를 붙여 넣기 만하면 이미지를 볼 수 있습니다.

예제 코드 :

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; 
+0

나는이 시도 다음 SVG는 캔버스에 표시되지만 불행하게도 클리핑은 원래 RECT 수행됩니다. s.graphics.beginFill() 등을 나가면 도움이되지 않습니다. 어떤 도움이라도 정말 고맙겠습니다 ... – lmeurs