如何在fabric js中将图像添加到多边形? [英] How to add image to polygon in fabric js?
本文介绍了如何在fabric js中将图像添加到多边形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
1 当我尝试向图像中添加图像时,我正在创建具有定点的多边形多边形对象.图像不在多边形中渲染.它是从画布的起点渲染的.以下是我使用的代码.请告诉我我在哪里做错了. 感谢您的帮助!
1I am creating a polygon with definite points,when i try to add an image to the polygon object.Image is not rendering in the polygon.it is rendering from starting point of the canvas. Below is the code i used.Please tell me where i am doing wrong. Appreciate any help!Thanks
Jsfiddle链接 https://jsfiddle.net/u3bfscom/6/ 添加点并创建多边形,然后添加纹理.
Jsfiddle Link https://jsfiddle.net/u3bfscom/6/ Add Points and create polygon later add Texture.
fabric.Image.fromURL('https://image.freepik.com/free-photo/roof-texture_21206171.jpg', function (oImg) {
for(var i=0;canvas.getObjects().length>i;i++)
{
if(canvas.getObjects()[i].name=="Polygon")
{
canvas.getObjects()[i].set(oImg);
}
}
canvas.renderAll();
});
推荐答案
得到答案.
fabric.Image.fromURL('https://image.freepik.com/free-photo/roof-texture_21206171.jpg', function (img) {
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getWidth(),
height: img.getHeight()
});
return patternSourceCanvas.getElement();
},
});
console.log(img);
for(var i=0;canvas.getObjects().length>i;i++)
{
if(canvas.getObjects()[i].name=="Polygon")
{
canvas.getObjects()[i].set("fill", pattern);
canvas.renderAll();
}
}
});
这篇关于如何在fabric js中将图像添加到多边形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文