在Fabric JS中动态重现背景

问题描述

我是一名新手程序员,刚开始冒险时,正在寻找解决我问题的方法。

我想在移动绿色对象的同时重现背景,并将其动态发送到Fabric js中的红色对象。我完全不知道该怎么办。

JSFiddle:https://jsfiddle.net/8h2akjog

enter image description here

谢谢您的帮助:)

var canvas = new fabric.Canvas('can');
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
var link = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU';

var img = new fabric.Image('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU',{
     left: 1,top: 1,lockMovementX: true,lockMovementY: true,selectable: false,hasBorders: false
});
canvas.add(img);

fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU',function(myImg) {
 canvas.add(myImg);
 canvas.sendToBack(myImg)
});


[{"x":52,"y":283},{"x":52,{"x":342,"y":183},{"x":152,"y":183}]

var polygon = new fabric.Polygon([ 
        { x: 52,y: 283 },{ x: 52,{ x: 342,y: 283},y: 183 },{ x: 152,y: 183 }],{ 
        fill: 'rgba(0,0)',stroke: 'green'
});

var polygon2 = new fabric.Polygon([ 
        { x: 102,y: 333 },{ x: 102,{ x: 392,y: 333},y: 233 },{ x: 202,y: 233 }],stroke: 'red'
});
canvas.add(polygon,polygon2);

canvas.renderAll();

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)