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

Question

I'm trying to bind an event to a background image:

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

I can get it work. I'm trying to bind mouse events to handle drag, so i can move the image when it's bigger than the canvas, like background-cover css property.

Thoughts?

Thanks guys!

SOLUTION:

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

It doesn't seem like you can add events to the background image... but the canvas does emit events and if you click the canvas and no target is set then they must be clicking the background. Background image are not forced to take up the whole background but I'm not sure reasons to not make it take up the whole background.

You do get the mouse event passed in though so if the background image does not take up the whole background you could do that math and figure out where they clicked.

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

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