javascript - 我怎样才能在 Canvas 中的矩形下方移动图像？

Question

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

My canvas screenshot

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

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();
}

Answer 1

使用preserveObjectStacking所以它不会在拖动时出现，并使用perPixelTargetFind如果对象是透明的，则单击它。

演示

var canvas = new fabric.Canvas('canvas',{
 preserveObjectStacking: true
});
var image = new fabric.Image('');
var rect = new fabric.Rect({
  left: 160,
  top: 80,
  id: 'innerCan',
  fill: 'transparent',
  stroke: '#fff',
  strokeWidth: 1,
  width: 100,
  height: 100,
  selectable: false,
  perPixelTargetFind : true
});
canvas.add(image,rect);
image.setSrc('//fabricjs.com/assets/pug.jpg',function(img){
  img.set({ scaleX:canvas.width/img.width,scaleY: canvas.height/img.height});
  img.setCoords();
  canvas.renderAll();
})

canvas{
 border: 2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=300 height=300></canvas>