我怎样才能在画布中的矩形下方移动图像？

Question

I could select the background image from inside rectangle, but not able to move. To move the image, i should go outside of the rectangle. I know that the rectangle is created over the image, I'm looking for any option to move the image as it is selectable from inside rectangle.

My canvas screenshot

This is how i set the image and rectangle.

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

Use preserveObjectStacking so it wont come up while dragging, and use perPixelTargetFind to click through the object if it is transparent.

DEMO

 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>