1

パターン画像のキャンバスにポリゴンオブジェクトを描画しました。

fabric.Image.fromURL("http://netdna.webdesignerdepot.com/uploads/album_artwork/t2-7.jpg", function(img) {

    img.scaleToWidth(100).set({
      originX: 'left',
      originY: 'top'
    });

    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(img);

    var pattern = new fabric.Pattern({
      source: function() {
        patternSourceCanvas.setDimensions({
          width: img.getWidth() + 0,
          height: img.getHeight() + 0
        });
        return patternSourceCanvas.getElement();
      },
      repeat: 'repeat'
    });

    canvas.add(new fabric.Polygon([
      {x: 185, y: 0},
      {x: 250, y: 100},
      {x: 385, y: 170},
      {x: 0, y: 245} ], {
        left: 220,
        top: 200,
        angle: -30,
        fill: pattern
      }));
});

このソースhereを見つけました。

http://fabricjs.com/dynamic-patterns/

しかし、ポリゴンオブジェクトをSVGタイプのファイルとして塗りつぶしたいです。

出来ますか ？？？

ありがとう...

4

1 に答える 1

0

置き換えるだけです: patternSourceCanvas.add(img);

with: patternSourceCanvas.add(yourShape);

上記のコードの yourShape は、svg または任意の単純な形状などである可能性があり、ポリゴンを塗りつぶすパターンとして使用されます。

于 2013-10-29T04:10:44.233 に答える