[英]how to select and drag objects in fabric.js
I have this jsfiddle as an example here i used fabric.js in this will create lines when we button clicked .. my problem is how to select or move objects in the canvas in fabric.js ? 我以这个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;
});
if i make the first line as var canvas = new fabric.Canvas('c', { selection: true });
如果我将第一行作为
var canvas = new fabric.Canvas('c', { selection: true });
i can get the bounding box but i can"t able to drag 我可以获得边界框,但我无法拖动
I solved this problem. 我解决了这个问题。
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.