Javascript 如何在fabric.js中选择和拖动对象
我这里有一个例子,我在这里使用了fabric.js,当我们点击按钮时,它将创建行。。我的问题是如何在fabric.js中选择或移动画布中的对象Javascript 如何在fabric.js中选择和拖动对象,javascript,canvas,fabricjs,Javascript,Canvas,Fabricjs,我这里有一个例子,我在这里使用了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
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=newfabric.canvas('c',{selection:true})代码>我可以得到边界框,但无法拖动我解决了这个问题
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;
});