Javascript SVG到形状(EaselJS)

Javascript SVG到形状(EaselJS),javascript,canvas,shape,easeljs,Javascript,Canvas,Shape,Easeljs,在EaselJS中,只有形状可以成为遮罩,所以我想知道是否可以将Inkscape中的SVG转换为EaselJS,我找到了这个很棒的工具——它允许我将SVG转换为上下文,但是有没有一种方法/工具可以轻松地将SVG转换为EaselJS形状(这几乎与Flash/AS3中的形状相同)?我只需要这样一个基本形状: <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns

在EaselJS中,只有形状可以成为遮罩,所以我想知道是否可以将Inkscape中的SVG转换为EaselJS,我找到了这个很棒的工具——它允许我将SVG转换为上下文,但是有没有一种方法/工具可以轻松地将SVG转换为EaselJS形状(这几乎与Flash/AS3中的形状相同)?我只需要这样一个基本形状:

<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>

image/svg+xml

在您提供的网页上生成js代码后,您可以覆盖名为的shape中的函数。只需将生成的代码粘贴到函数中,就可以看到图像

示例代码:

  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;

试试Fabric.js——我试过这样做:SVG显示在画布上,但不幸的是,剪辑是为原始rect完成的。省略s.graphics.beginul()等也无济于事。任何帮助都将不胜感激。。。