我是Fabric JS的新手。我绘制了多个形状,并且在选择中玩过。
[织物具有通过鼠标拖动选择对象的功能,但是如果选择矩形接触到形状的一部分,则形状/对象将突出显示。
但是我只选择选择矩形内的对象。请帮我解决这个问题。
谢谢,这是小提琴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;
}
您正在寻找的功能是Canvas.selectionFullyContained,实际上您确实在小提琴中启用了它。
问题是它是在fabric.js v2.0.0中引入的,而您的小提琴正在使用v1.6.3。这是将fabric.js升级到v3.6.2的原始代码段:
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<button onclick="drawcircle()"> Circle</button>
<button onclick="drawrec()"> Rectangle</button>
<button onclick="drawLine()">Line</button>
<button onclick="select()">select</button>
<canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas>