如何选择和拖动fabric.js中的对象

Question

我有这jsfiddle作为一个例子，在这里我用fabric.js在我们按钮点击时会创建线..我的问题是如何选择或移动画布中的对象fabric.js？

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

var line, isDown; 

canvas.on('mouse:down', function(o){ 
    isDown = true; 
    var pointer = canvas.getPointer(o.e); 
    var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; 
    line = new fabric.Line(points, { 
    strokeWidth: 5, 
    fill: 'red', 
    stroke: 'red', 
    originX: 'center', 
    originY: 'center' 
    }); 
    canvas.add(line); 
}); 

canvas.on('mouse:move', function(o){ 
    if (!isDown) return; 
    var pointer = canvas.getPointer(o.e); 
    line.set({ x2: pointer.x, y2: pointer.y }); 
    canvas.renderAll(); 
}); 

canvas.on('mouse:up', function(o){ 
    isDown = false; 
}); 

，如果我做的第一行作为var canvas = new fabric.Canvas('c', { selection: true });我可以得到边界框，但我可以“牛逼能拖

Answer 1

我解决了这个问题。

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

var line, isDown; 

canvas.on('mouse:down', function(o){ 
    if(canvas.findTarget(o.e))return; 
    isDown = true; 
    var pointer = canvas.getPointer(o.e); 
    var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; 
    line = new fabric.Line(points, { 
    strokeWidth: 5, 
    fill: 'red', 
    stroke: 'red', 
    originX: 'center', 
    originY: 'center' 
    }); 
    canvas.add(line); 
}); 

canvas.on('mouse:move', function(o){ 
    if (!isDown) return; 
    var pointer = canvas.getPointer(o.e); 
    line.set({ x2: pointer.x, y2: pointer.y }); 
    line.setCoords(); 
    canvas.renderAll(); 
}); 

canvas.on('mouse:up', function(o){ 
    isDown = false; 
});