fabric.js形狀錯誤后免費繪制

Question

我對fabric.js有問題。 我可以在畫布上繪制一個正方形，但是如果我切換到自由繪制，則線條將從形狀的中間開始。

在這里看看：

jsfiddle

 var functouse = "pencil"; var pensize = 5; var pencolour = "#000000"; var fillcolour = "#ffffff"; var canvas = new fabric.Canvas('sketchpad', { isDrawingMode: true }); fabric.Object.prototype.transparentCorners = false; canvas.selection = false; canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); }); canvas.observe('object:selected ', function(e) { console.log('selected something'); }); //fabric.Object.prototype.transparentCorners = false; var line; var isDown; var initX = 0; var initY = 0; $(".top_butt").click(function() { functouse = $(this).attr('data-id'); }); function mousedown(o) { isDown = true; var pointer = canvas.getPointer(oe); if (functouse == "pencil") { canvas.isDrawingMode = true; canvas.freeDrawingColor = pencolour; canvas.freeDrawingLineWidth = pensize; canvas.freeDrawingMode = 'Pencil'; } else if (functouse == "square") { initX = pointer.x; initY = pointer.y; canvas.isDrawingMode = false; var square = new fabric.Rect({ width: 0.1, height: 0.1, left: initX, top: initY, fill: fillcolour, stroke: pencolour, strokeWidth: pensize, selectable: false, hasBorders: false, hasControls: false }); canvas.add(square); canvas.setActiveObject(square); } } function mousemove(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (functouse == "square") { var ww = Math.abs(pointer.x - initX); var hh = Math.abs(pointer.y - initY); if (!ww || !hh) { return false; } var square = canvas.getActiveObject(); square.set('width', ww).set('height', hh); canvas.renderAll(); } else if (functouse == "pencil") { if (initX == -1 || initY == -1) { initX = pointer.x; initY = pointer.y; } } } function mouseup(o) { isDown = false; if (functouse == "square") { initX = -1; initY = -1; var square = canvas.getActiveObject(); square.setCoords(); //canvas.add(square); canvas.renderAll(); //canvas.pointer $('canvas').css('cursor', 'nw-resize'); } else if (functouse == "pencil") { canvas.forEachObject(function(o) { o.selectable = false, o.lockMovementX = true, o.lockMovementY = true, o.lockScaling = true }); } } 

 p span{ cursor: pointer; } canvas{ border: solid thin #ccc; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <p><span class="top_butt" data-id='square'>Square</span> | <span class="top_butt" data-id='pencil'>Pencil</span></p> <canvas id="sketchpad" width="400" height="600"></canvas> <p> Uno y dos </p> 

畫一個正方形，然后畫一條線，您會明白我的意思。

需要特別注意的是：我不明白為什么它會開始使用非常細的線進行繪制，並且僅當線結束時才采用我設置的線尺寸。

第三點是：是否可以從左上角而不是中心繪制正方形。

Answer 1

您需要使用off()刪除事件處理程序，並且我已經更新了您的結構版本。 看一看。

演示

 var functouse = "pencil"; var pensize = 5; var pencolour = "#000000"; var fillcolour = "#ffffff"; var canvas = new fabric.Canvas('sketchpad', { isDrawingMode: true }); fabric.Object.prototype.transparentCorners = false; canvas.selection = false; canvas.on('object:selected ', function(e) { console.log('selected something'); }); //fabric.Object.prototype.transparentCorners = false; var line; var isDown; var square; var initX = 0; var initY = 0; $(".top_butt").click(function() { functouse = $(this).attr('data-id'); removeEvents(); if (functouse == "pencil") { setObjectSelectable(false); canvas.isDrawingMode = true; canvas.freeDrawingColor = pencolour; canvas.freeDrawingLineWidth = pensize; canvas.freeDrawingMode = 'Pencil'; } else if (functouse == "square") { canvas.isDrawingMode = false; setObjectSelectable(false); addEvent(); } else { canvas.isDrawingMode = false; setObjectSelectable(true); } }); function setObjectSelectable(val) { canvas.forEachObject(function(obj) { obj.selectable = val; }) canvas.renderAll(); } function removeEvents() { canvas.off('mouse:down'); canvas.off('mouse:move'); canvas.off('mouse:up'); } function addEvent() { canvas.on('mouse:down', mousedown); canvas.on('mouse:move', mousemove); canvas.on('mouse:up', mouseup); } function mousedown(o) { isDown = true; var pointer = canvas.getPointer(oe); initX = pointer.x; initY = pointer.y; canvas.isDrawingMode = false; square = new fabric.Rect({ width: 0.1, height: 0.1, left: initX, top: initY, fill: fillcolour, stroke: pencolour, strokeWidth: pensize, selectable: false, hasBorders: false, hasControls: false }); canvas.add(square); canvas.setActiveObject(square); } function mousemove(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); var ww = Math.abs(pointer.x - initX); var hh = Math.abs(pointer.y - initY); if (!ww || !hh) { return false; } square.set('width', ww).set('height', hh); canvas.renderAll(); } function mouseup(o) { isDown = false; initX = -1; initY = -1; square.setCoords(); square = null; //canvas.add(square); canvas.renderAll(); } 

 p span{ cursor: pointer; } canvas{ border: solid thin #ccc; } 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><span class="top_butt" data-id='square'>Square</span> | <span class="top_butt" data-id='pencil'>Pencil</span>| <span class="top_butt" data-id='selection'>Selection</span></p> <canvas id="sketchpad" width="400" height="600"></canvas> <p> Uno y dos </p>