Question

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

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

tbody:hover tr {
  background-color: #ffa768;
}

tbody:nth-child(odd) {
  background-color: blue;
}

tbody:nth-child(even) {
  background-color: rgba(237, 234, 235, 0.2);
}

td:nth-child(3) {
  width: 200px;
}

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>

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

1 个答案: