如何選擇和拖動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; 
});