Javascript 如何在画布中的矩形下方移动图像？

我可以从矩形内选择背景图像，但无法移动。 要移动图像，我应该跳出矩形。 我知道矩形是在图像上创建的，我正在寻找任何移动图像的选项，因为它可以从矩形内部选择

这是我设置图像和矩形的方式

changeImage(innercanvasHeight, innercanvasWidth) {

  const base_image = new Image();
  base_image.crossOrigin = 'Anonymous';
  base_image.src = 'assets/images/1wal.jpg';

  fabric.Image.fromURL(base_image.src, (myImg) => {
    const img1 = myImg.set({left: 160, top: 80, width: 600, height: 
    400, id: 'wallpaper'});
    this.FabriCanvas.add(img1).setActiveObject(img1);
    const hiddenImg = document.createElement('img');
    hiddenImg.src = this.FabriCanvas.getActiveObject().toDataURL();
    hiddenImg.id = 'target';
    hiddenImg.style.display = 'none';
    document.body.appendChild(hiddenImg);
    this.innerCanvas(innercanvasHeight, innercanvasWidth);
});


innerCanvas(height, width) {
 this.innercanvas = this.FabriCanvas.add(new fabric.Rect({
  left: 160,
  top: 80,
  id: 'innerCan',
  fill: 'transparent',
  stroke: '#fff',
  strokeWidth: 1,
  width: width,
  height: height,
  selectable: false
 }));
 this.FabriCanvas.renderAll();
}

使用，使其在拖动时不会出现，如果对象是透明的，则使用单击对象

演示

var canvas=new fabric.canvas'canvas'{ 对：对 }; var image=newfabric.image； var rect=new fabric.rect{ 左：160， 排名：80， id:'innerCan'， 填充：'透明'， 笔划：“fff”， 冲程宽度：1， 宽度：100， 身高：100， 可选：false， perPixelTargetFind：真 }; canvas.addimage，rect； image.setSrc'//fabricjs.com/assets/pug.jpg'，functionimg{ set{scaleX:canvas.width/img.width，scaleY:canvas.height/img.height}； img.setCoords； canvas.renderal； } 帆布{ 边框：2×000； }

---

你的意思是想抓取图像并拖动它，但矩形正在劫持mouseevent？“还是别的什么？”托比说得对。我只想选择图像并拖动。