Я новичок в Фабри c JS. Я нарисовал несколько фигур и поэкспериментировал с выделением.
Fabri c имеет функцию выделения объектов при перетаскивании мышью, но если прямоугольник выделения касается части фигур, то фигуры / объекты будет выделен.
Но у меня есть проблема, чтобы выбрать только объекты, которые присутствуют внутри прямоугольника выбора. Пожалуйста, помогите мне с проблемой.
Заранее спасибо, и вот скрипка https://jsfiddle.net/sabarisivakumar/rqmnacez/1/
var canvas = new fabric.Canvas('canvas1');
canvas.selectionFullyContained = false;
function drawcircle() {
var circle, isDown, origX, origY, lines;
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 2,
stroke: 'black',
// fill: 'White',
fill: 'rgba(0,0,0,0)',
selectable: true,
originX: 'center',
originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({
radius: Math.abs(origX - pointer.x)
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
circle.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawrec() {
var rect, isDown, origX, origY;
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'rgba(0,0,0,0)',
stroke: 'black',
transparentCorners: false
});
canvas.add(rect);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
rect.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawLine() {
// canvas.on('mouse:down');
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 3,
fill: '#07ff11a3',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function (o) {
// isDown = true;
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;
line.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function select() {
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
// canvas.selection = true;
canvas.selection = true;
canvas.selectionFullyContained = true;
}