当前位置: 动力学知识库 > 问答 > 编程问答 >

canvas - Is it possible to fill polygon with pattern using Fabric.js?

问题描述:

I was draw polygon object in canvas of pattern image.

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

}));

});

I found this source here.

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

But i want to fill in polygon object as SVG type file.

Is it possible ???

Thanks...

网友答案:

just replace: patternSourceCanvas.add(img);

with: patternSourceCanvas.add(yourShape);

yourShape in the above code may be svg or any simple shapes or whatever,they will be used as the patterns to fill your polygon.

分享给朋友:
您可能感兴趣的文章:
随机阅读: