我正在使用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;
}
答案 0 :(得分：1)
<强> DEMO
var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
canvas.perPixelTargetFind = true;
var isDown, circle = null;
function changeSelection() {
canvas.selection != canvas.selection;
changeSelectionObj(true);
unRegisterEvent();
}
function unRegisterEvent() {
canvas.off('mouse:down', onCircleMouseDown);
canvas.off('mouse:move', onCircleMouseMove);
canvas.off('mouse:up', onCircleMouseUp);
canvas.off('mouse:down', onArrowMouseDown);
canvas.off('mouse:move', onArrowMouseMove);
canvas.off('mouse:up', onArrowMouseUp);
}
function changeSelectionObj(val) {
canvas.forEachObject(
function(obj) {
obj['selectable'] = val;
obj.setCoords();
});
canvas.renderAll();
}
function drawArrow() {
canvas.off('mouse:down', onCircleMouseDown);
canvas.off('mouse:move', onCircleMouseMove);
canvas.off('mouse:up', onCircleMouseUp);
canvas.on('mouse:down', onArrowMouseDown);
canvas.on('mouse:move', onArrowMouseMove);
canvas.on('mouse:up', onArrowMouseUp);
changeSelectionObj(false);
}
function drawCircle() {
canvas.on('mouse:down', onCircleMouseDown);
canvas.on('mouse:move', onCircleMouseMove);
canvas.on('mouse:up', onCircleMouseUp);
canvas.off('mouse:down', onArrowMouseDown);
canvas.off('mouse:move', onArrowMouseMove);
canvas.off('mouse:up', onArrowMouseUp);
changeSelectionObj(false);
}
function onArrowMouseDown(o) {
var pointer = canvas.getPointer(o.e);
startX = pointer.x;
startY = pointer.y;
}
function onArrowMouseUp(o) {
var pointer = canvas.getPointer(o.e);
endX = pointer.x;
endY = pointer.y;
showArrow(startX, startY, endX, endY);
}
function onArrowMouseMove(e) {
}
function onCircleMouseDown(o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
if (!circle) {
circle = new fabric.Circle({
left: origX,
top: origY,
originX: 'center',
originY: 'center',
radius:0,
fill: '',
stroke: 'red',
strokeWidth: 3,
selectable: false
});
canvas.add(circle);
}
}
function onCircleMouseMove(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({
radius: Math.sqrt(Math.pow((origX - pointer.x), 2) + Math.pow((origY - pointer.y), 2))
});
canvas.renderAll();
}
function onCircleMouseUp(o) {
isDown = false;
circle = null;
}
function showArrow(fromx, fromy, tox, toy) {
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: false
});
canvas.add(pline);
canvas.renderAll();
}canvas {
border: 2px dotted green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas><br>
<input type="radio" name='choose' id="selection" onclick="changeSelection();">Selection
<input type="radio" name='choose' id="drawing-arrow-shape" onclick="drawArrow();">Draw Arrow
<input type="radio" name='choose' id="drawing-circle-shape" onclick="drawCircle();">Draw Circle
检查你的eventlistener，你要添加到canvs，但不是删除，检查演示。