fabric.js: связать событие с фоновым изображением

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

я могу заставить его работать. Я пытаюсь связать события мыши с обработкой перетаскивания, поэтому я могу перемещать изображение, когда оно больше холста, например, свойство css background-cover.

Мысли?

Спасибо, ребята!

РЕШЕНИЕ:

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

Это не похоже, вы можете добавить события к фоновому изображению ... но холст испускает события, и если вы нажмете на холст и цель не установлен, то они должны щелкнуть фон. Фоновое изображение не вынуждено занимать весь фон, но я не уверен, почему его не заставляют занимать весь фон.

Вы получили событие мыши, хотя, если фоновое изображение не занимает весь фон, вы можете выполнить эту математику и выяснить, где они нажали.

window.canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true }); 
 

 
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(o) { 
 
\t canvas.setBackgroundImage(o, canvas.renderAll.bind(canvas), { 
 
    top: 0, 
 
    left: 0 
 
    }); 
 
}); 
 

 
canvas.on('mouse:down', function(options) { 
 
    if (!options.target) { 
 
    \t 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 
 
}));

<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>