Javascript 如何将矩形添加到缩放的画布区域？

我使用的是Fabric JS。每次我按下

Add Door

按钮时，它都会在左上角创建一个。我给出了价值观​​在矩形中（左：40，上：40，）。 但是，当我在我缩放的区域上按下按钮时，我希望它将其添加到我缩放的区域。我看了几个例子，但找不到我想要的。我该怎么做

var canvas=newfabric.canvas（'c'）；
canvas.setBackgroundImage（'https://i.hizliresim.com/0pIPiv.jpg，canvas.renderAll.bind（canvas））；
var-uniqids=0；
$（“#门”）。在（“点击”上，功能（e）{
rect=新结构。rect({
id:uniqid，
左:40,，
前40名，
宽度：35，
身高：50，
填充：“蓝色”，
笔划：“蓝色”，
冲程宽度：5，
笔划制服：错，
哈斯：是的，
});  
var uniqid=uniqids.toString（）；
var text=new fabric.text（uniqid{
尺寸：30，
原文：“中心”，
原创：“对”
});
var group=new fabric.group（[rect，text]{
左:0,，
前100名，
});
canvas.add（组）；
uniqids++；
canvas.on（'selection:cleared'，c=>{
控制台日志（“空”）；
});
canvas.selection=false；
});
//*****************************
//canvas.on（'mouse:wheel'，函数（opt）{
//var delta=选择e deltaY；
//var zoom=canvas.getZoom（）；
//缩放*=0.999**delta；
//如果（缩放>20）缩放=20；
//如果（缩放<0.01）缩放=0.01；
//canvas.setZoom（缩放）；
//opt.e.preventDefault（）；
//选择e.停止播放（）；
// })
$（'#getid'）。单击（函数（）{
var activeObject=canvas.getActiveObjects（）；
警报（canvas.getActiveObject（）.id）；
});
//***************************************
$（#保存”）。在（“单击”上，函数（e）{
$（“.save”）.html（canvas.toSVG（））；
});
$（“#删除”）。单击（函数（）{
var activeObject=canvas.getActiveObjects（）；
canvas.discardActiveObject（）；
canvas.remove（…activeObject）；
});
$（“#btnResetZoom”）。打开（“单击”，函数（e）{
setViewportTransform（[1,0,0,1,0,0]）；
});
canvas.on（'mouse:wheel'，函数（opt）{
var delta=选择e deltaY；
var zoom=canvas.getZoom（）；
缩放*=0.999**delta；
如果（缩放>20）缩放=20；
如果（缩放<1）缩放=1；
zoomToPoint（{x:opt.e.offsetX，y:opt.e.offsetY}，zoom）；
opt.e.preventDefault（）；
选择e.停止播放（）；
});
var shiftKeyDown=真；
var mouseDownPoint=null；
canvas.on（'mouse:move'，函数（选项）{
if（向下移动键和鼠标向下点（&M）{
var pointer=canvas.getPointer（options.e，true）；
var mouseMovePoint=newfabric.Point（pointer.x，pointer.y）；
canvas.relativePan（mouseMovePoint.subtract（mouseDownPoint））；
mouseDownPoint=mouseMovePoint；
边界（画布）中的keepositioninbounds；
}
});
变量方向={
左:0,，
上:1,，
右:2,，
下降：3
};
var zoomLevel=0；
var zoomLevelMin=0；
var zoomLevelMax=3；
var shiftKeyDown=错误；
var mouseDownPoint=null；
canvas.on（'mouse:down'，函数（选项）{
var pointer=canvas.getPointer（options.e，true）；
mouseDownPoint=newfabric.Point（pointer.x，pointer.y）；
});
canvas.on（'mouse:up'，函数（选项）{
mouseDownPoint=null；
});
canvas.on（'mouse:move'，函数（选项）{
if（向下移动键和鼠标向下点（&M）{
var pointer=canvas.getPointer（options.e，true）；
var mouseMovePoint=newfabric.Point（pointer.x，pointer.y）；
canvas.relativePan（mouseMovePoint.subtract（mouseDownPoint））；
mouseDownPoint=mouseMovePoint；
边界（画布）中的keepositioninbounds；
}
});
fabric.util.addListener（document.body，'keydown'，函数（选项）{
如果（选项。重复）{
返回；
}
var key=options.which | | options.keyCode；//密钥检测
如果（键==16）{//handle Shift键
canvas.defaultCursor='move'；
canvas.selection=false；
shiftKeyDown=true；
}如果（key==37）{//处理左键
移动（方向左）；
}如果（键===38）{//处理向上键
移动（方向向上）；
}如果（key==39）{//处理右键，则为else
移动（方向。右）；
}否则，如果（键===40）{//按下键
移动（方向向下）；
}
});
fabric.util.addListener（document.body，'keyup'，函数（选项）{
var key=options.which | | options.keyCode；//密钥检测
如果（键==16）{//handle Shift键
canvas.defaultCursor='default'；
canvas.selection=true；
shiftKeyDown=false；
}
});
//jQuery（“.canvas container”）.on（'mousewheel'，函数（选项）{
//var delta=options.originalEvent.wheelDelta；
//如果（增量！=0）{
//var pointer=canvas.getPointer（options.e，true）；
//var point=新结构点（pointer.x，pointer.y）；
//如果（增量>0）{
//zoomIn（点）；
//}else if（delta<0）{
//zoomOut（点）；
//     }
//   }
// });
功能移动（方向）{
开关（方向）{
case Direction.LEFT：
relativePan（新的fabric.Point（-10*canvas.getZoom（），0））；
打破
案例说明.UP：
relativePan（新的fabric.Point（0，-10*canvas.getZoom（））；
打破
case Direction.RIGHT：
relativePan（新的fabric.Point（10*canvas.getZoom（），0））；
打破
case Direction.DOWN：
relativePan（新的fabric.Point（0,10*canvas.getZoom（））；
打破
}
边界（画布）中的keepositioninbounds；
}
//函数缩放（点）{
//if（zoomLevelzoomLevel最小值）{
//zoomLevel--；
//canvas.zoomToPoint（point，Math.pow（2，zoomLevel））；
//边界（画布）中的keepositioninbounds；
//   }
// }
函数keepositioninbounds（）{
var zoom=canvas.getZoom（）；
var xMin=（2-zoom）*canvas.getWidth（）/2；
var xMax=zoom*canvas.getWidth（）/2；
var yMin=（2-zoom）*canvas.getHeight（）/2；
var yMax=zoom*canvas.getHeight（）/2；
var point=新结构点（画布。
    $("#door").on("click", function (e) {
    const points = {};
    const iVpt = fabric.util.invertTransform(canvas.viewportTransform);
    points.tl = fabric.util.transformPoint({x: 40, y: 40}, iVpt);
    rect = new fabric.Rect({
        id: uniqid,
        left: points.tl.x,
        top: points.tl.y,
        width: 35,
        height: 50,
        fill: "blue",
        stroke: "blue",
        strokeWidth: 5,
        strokeUniform: false,
        hasControls: true,
    });