CODEWITHSUNDEEP
javascriptfabricjs
esah
esah

Reputation: 57

How can i able to move image beneath rectangle in canvas?

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

Upvotes: 1

Views: 143

Answers (1)

Durga
Durga

Reputation: 15614

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>

Upvotes: 1

Related Questions