Question

我正在尝试将事件绑定到背景图像：

var imgInstance = fabric.Image.fromURL(path, function(oImg) {

    oImg.on("selected", function() {
        alert();
    });

    canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas), {
        top: 0,
        left: 0
    });

    oImg.on("selected", function() {
        alert();
    });
});

我可以让它发挥作用。我正在尝试绑定鼠标事件来处理拖动，所以我可以移动图像，当它比画布大时，就像background-cover css属性一样。

思想？

谢谢你们！

解决方案：

var DragStart = false;

canvas.on('mouse:down', function(options) {
    if (!options.target) {
        DragStart = true;
    }else {
        DragStart = false;
    }
});

canvas.on('mouse:move', function(options) {
    if (DragStart) {

        var bounds = getBounds(options.e); // validate boundaries between image and canvas

        canvas.backgroundImage.top = bounds.y;
        canvas.backgroundImage.left = bounds.x;
        canvas.renderAll();
    }
});

Answer 1

您似乎无法向背景图像添加事件......但画布会发出事件，如果您单击画布并且未设置目标，则必须单击背景。背景图片不会被迫占用整个背景，但我不确定不会让它占据整个背景的理由。

你确实传入了鼠标事件，所以如果背景图像没有占据整个背景，你可以进行数学计算并找出他们点击的位置。

＆＃13;

window.canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true });

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(o) {
	canvas.setBackgroundImage(o, canvas.renderAll.bind(canvas), {
    top: 0,
    left: 0
  });
});

canvas.on('mouse:down', function(options) {
  if (!options.target) {
  	console.log('target is null')
  
  }
});


canvas.add(new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

＆＃13;

fabric.js：将事件绑定到背景图像

1 个答案: