使用Fabric JS在画布中绘制圆形和矩形

Question

我正在尝试绘制三种形状。 使用三个单独的功能。

1. 线
2. 圈
3. 长方形

三个功能很好用。 但是，如果我想画一条线和两个圆圈（一个接一个运行两个功能）。 第一个可以正常工作，但是第二个可以在相同的坐标下绘制第一个和第二个，然后重复进行。有一种方法可以一次绘制一个形状。

 var canvas = new fabric.Canvas('canvas1', { selection: false }); var line, isDown; function myFun() { canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); var points = [pointer.x, pointer.y, pointer.x, pointer.y]; line = new fabric.Line(points, { strokeWidth: 20, fill: '#07ff11a3', stroke: '#07ff11a3', originX: 'center', originY: 'center' }); canvas.add(line); }); } canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; }); function drawcle() { var circle, isDown, origX, origY; canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; circle = new fabric.Circle({ left: pointer.x, top: pointer.y, radius: 1, strokeWidth: 2, stroke: 'red', fill: 'White', selectable: false, originX: 'center', originY: 'center' }); canvas.add(circle); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); circle.set({ radius: Math.abs(origX - pointer.x) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; }); } function drawrec() { var line, isDown, origX, origY; canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); line = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, fill: 'rgba(255,0,0,0.5)', transparentCorners: false }); canvas.add(line); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (origX > pointer.x) { line.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { line.set({ top: Math.abs(pointer.y) }); } line.set({ width: Math.abs(origX - pointer.x) }); line.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script> <div class="stamps"> <div class="set1"> <a class="thmb" href="#" onclick="myFun()">Line</a></br> <a class="thmb" href="#" onclick="drawcle()">Draw Circle</a></br> <a class="thmb" href="#" onclick="drawrec()">Draw Rectangle</a> </div> <div class="area"> <div class="col" id="droppable"> <canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas> </div> </div> </div> 

Answer 1

function removeEvents(){
 canvas.off('mouse:down');
 canvas.off('mouse:up');
 canvas.off('mouse:move');
}

您可以使用canvas.off()从画布中删除事件侦听器。 它之所以绘制其他形状是因为它将侦听器添加到画布，因此，当您调用绘图函数时，请从画布中删除附加的侦听器，然后添加当前侦听器。

 var canvas = new fabric.Canvas('canvas1', { selection: false }); var line, isDown; function drawLine() { removeEvents(); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); var points = [pointer.x, pointer.y, pointer.x, pointer.y]; line = new fabric.Line(points, { strokeWidth: 20, fill: '#07ff11a3', stroke: '#07ff11a3', originX: 'center', originY: 'center' }); canvas.add(line); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; }); } function drawcle() { var circle, isDown, origX, origY; removeEvents(); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; circle = new fabric.Circle({ left: pointer.x, top: pointer.y, radius: 1, strokeWidth: 2, stroke: 'red', fill: 'White', selectable: false, originX: 'center', originY: 'center' }); canvas.add(circle); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); circle.set({ radius: Math.abs(origX - pointer.x) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; }); } function drawrec() { var rect, isDown, origX, origY; removeEvents(); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, fill: 'rgba(255,0,0,0.5)', transparentCorners: false }); canvas.add(rect); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); 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; }); } function removeEvents(){ canvas.off('mouse:down'); canvas.off('mouse:up'); canvas.off('mouse:move'); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script> <div class="stamps"> <div class="set1"> <a class="thmb" href="#" onclick="drawLine()">Line</a></br> <a class="thmb" href="#" onclick="drawcle()">Draw Circle</a></br> <a class="thmb" href="#" onclick="drawrec()">Draw Rectangle</a> </div> <div class="area"> <div class="col" id="droppable"> <canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas> </div> </div> </div>