【发布时间】：2017-07-15 17:34:31
【问题描述】：
我正在使用 fabric js 创建圆圈和箭头。如果我点击单选箭头按钮，我可以用鼠标绘制一个箭头，圆形按钮也是如此。
圆形按钮工作正常，但如果我更改为箭头按钮，它会为我绘制一个圆形 + 箭头，我不明白为什么会发生这种情况。
我的 HTML 代码：
<label class="btn btn-default btn-lg">
<input type="radio" name="drawing-shape" id="drawing-arrow-shape">
<i class="glyphicon glyphicon-arrow-right"></i>
</label>
<label class="btn btn-default btn-lg">
<input type="radio" name="drawing-shape" id="drawing-circle-shape">
<i class="glyphicon glyphicon-record"></i>
</label>
这是我的js函数：
drawingCircle.change = function() {
canvas.isCircleMode = true;
canvas.isArrowMode = false;
canvas.isDrawingMode = false;
if (canvas.isCircleMode) {
currentShapeName.innerHTML = 'Circle';
drawCircle(true);
drawArrow(false);
}
};
drawingArrow.change = function() {
canvas.isArrowMode = true;
canvas.isCircleMode = false;
canvas.isDrawingMode = false;
if (canvas.isArrowMode) {
currentShapeName.innerHTML = 'Arrow';
state = true;
drawCircle(false);
drawArrow(state, 100, 100, 150, 150);
if(state) {
var startX, startY, endX, endY;
canvas.on('mouse:down', function() {
var pointer = canvas.getPointer(event.e);
startX = pointer.x;
startY = pointer.y;
});
canvas.on('mouse:up', function() {
var pointer = canvas.getPointer(event.e);
endX = pointer.x;
endY = pointer.y;
drawArrow(true, startX, startY, endX, endY);
});
} else {
return;
}
}
};
function drawCircle(go) {
var circle, isDown, origX, origY;
if (go == false) {
console.log("circle false!!");
isDown = false;
return;
}
if($('#drawing-circle-shape').is(':checked')) {
console.log("circle checked");
canvas.on('mouse:down', function(o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
radius: pointer.x - origX,
angle: 0,
fill: '',
stroke: 'red',
strokeWidth: 3,
});
canvas.add(circle);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
var radius = Math.max(Math.abs(origY - pointer.y), Math.abs(origX - pointer.x)) / 2;
if (radius > circle.strokeWidth) {
radius -= circle.strokeWidth / 2;
}
circle.set({
radius: radius
});
if (origX > pointer.x) {
circle.set({
originX: 'right'
});
} else {
circle.set({
originX: 'left'
});
}
if (origY > pointer.y) {
circle.set({
originY: 'bottom'
});
} else {
circle.set({
originY: 'top'
});
}
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
});
} else {
return;
}
}
function drawArrow(go, fromx, fromy, tox, toy) {
if (go == false) {
console.log("arrow false");
return;
}
if($('#drawing-arrow-shape').is(':checked')) {
var angle = Math.atan2(toy - fromy, tox - fromx);
var headlen = 15; // arrow head size
// bring the line end back some to account for arrow head.
tox = tox - (headlen) * Math.cos(angle);
toy = toy - (headlen) * Math.sin(angle);
// calculate the points.
var points = [{
x: fromx, // start point
y: fromy
}, {
x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2),
y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
}, {
x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2),
y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
}, {
x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
}, {
x: tox + (headlen) * Math.cos(angle), // tip
y: toy + (headlen) * Math.sin(angle)
}, {
x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
}, {
x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
}, {
x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
}, {
x: fromx,
y: fromy
}];
var pline = new fabric.Polyline(points, {
fill: 'black',
stroke: 'black',
opacity: 1,
strokeWidth: 2,
originX: 'left',
originY: 'top',
selectable: true
});
canvas.add(pline);
canvas.renderAll();
} else {
return;
}
【问题讨论】：
-
它是因为你要添加到画布的事件，管理它会正常工作
-
@Durage 我不太明白，您能否进一步解释一下或显示您的意思？
-
canvas.on('mouse:down',function)这将在您按下鼠标时一直监听，不仅在圆圈或箭头上，如果您定义了它，那么它将一直存在。所以要注销事件，你需要像canvas.off('mouse:down',function)
标签： javascript jquery fabricjs