Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/design-patterns/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Design patterns 是否可以使用Fabric.js用图案填充多边形?_Design Patterns_Canvas_Svg_Fill_Fabricjs - Fatal编程技术网

Design patterns 是否可以使用Fabric.js用图案填充多边形?

Design patterns 是否可以使用Fabric.js用图案填充多边形?,design-patterns,canvas,svg,fill,fabricjs,Design Patterns,Canvas,Svg,Fill,Fabricjs,我在图案图像的画布上绘制多边形对象 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

我在图案图像的画布上绘制多边形对象

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
      }));
});
我在这里找到了这个来源

但我想将多边形对象填充为SVG类型的文件

可能吗

谢谢…

只需更换: patternSourceCanvas.addimg

与: patternSourceCanvas.addyourShape

上面代码中的形状可能是svg或任何简单的形状或其他任何形状,它们将用作填充多边形的模式