拖动现有对象时绘制重复的对象

Question

我正在使用fabric js创建形状的项目。我可以根据fabric js文档创建所有形状。

我有一个问题，在下面创建一个形状到用户拖动的形状。

请在下面找到了更好的理解小提琴，

$(document).ready(function() { 
 
    //Getting the canvas 
 
    var canvas1 = new fabric.Canvas("canvas2"); 
 
    var freeDrawing = true; 
 
    var divPos = {}; 
 
    var offset = $("#canvas2").offset(); 
 
    $(document).mousemove(function(e) { 
 
     divPos = { 
 
      left: e.pageX - offset.left, 
 
      top: e.pageY - offset.top 
 
     }; 
 
    }); 
 
    $('#2').click(function() { 
 

 
     console.log("Button 2 cilcked"); 
 

 
     //Declaring the variables 
 
     var isMouseDown = false; 
 
     var refRect; 
 

 
     //Setting the mouse events 
 
     canvas1.on('mouse:down', function(event) { 
 
      //Defining the procedure 
 
      isMouseDown = true; 
 
      //Getting yhe mouse Co-ordinates 
 
      //Creating the rectangle object 
 
      if (freeDrawing) { 
 
       var rect = new fabric.Rect({ 
 
        left: divPos.left, 
 
        top: divPos.top, 
 
        width: 0, 
 
        height: 0, 
 
        stroke: 'red', 
 
        strokeWidth: 3, 
 
        fill: '' 
 
       }); 
 
       canvas1.add(rect); 
 
       refRect = rect; //**Reference of rectangle object 
 
      } 
 

 
     }); 
 

 
     canvas1.on('mouse:move', function(event) { 
 
      // Defining the procedure 
 

 
      if (!isMouseDown) { 
 
       return; 
 
      } 
 
      //Getting yhe mouse Co-ordinates 
 
      if (freeDrawing) { 
 
       var posX = divPos.left; 
 
       var posY = divPos.top; 
 

 
       refRect.setWidth(Math.abs((posX - refRect.get('left')))); 
 
       refRect.setHeight(Math.abs((posY - refRect.get('top')))); 
 
       canvas1.renderAll(); 
 
      } 
 

 
     }); 
 

 

 
     canvas1.on('mouse:up', function() { 
 
      //alert("mouse up!"); 
 
      canvas1.add(refRect); 
 
      isMouseDown = false; 
 
      canvas1.add(); 
 
      //freeDrawing=false; // **Disables line drawing 
 
     }); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas2" width=500 height=500 style="height:500px;width:500px;"></canvas> 
 
<img width=500 height=500 alt="" id="scream" src="canvas.png" style="display:none;"/> 
 
<div style="position: relative; width: 1300px; height:30px; border: 2px solid black; margin-top: 5px"> 
 
<input type="button" id="2" value="rectangle">

这里是fiddle

Answer 1

$(document).ready(function() { 
 
    //Getting the canvas 
 
    var canvas = new fabric.Canvas("canvas"); 
 
    var rect, isMouseDown = false; 
 
    $('#selection').click(function() { 
 
     canvas.selection = true; 
 
     changeStatus(true); 
 
     //remove mouse event 
 
     canvas.off('mouse:down', onMouseDown); 
 
     canvas.off('mouse:move', onMouseMove); 
 
     canvas.off('mouse:up', onMouseUp); 
 
    }) 
 

 
    function changeStatus(value) { 
 
     canvas.forEachObject(function(obj) { 
 
      obj.selectable = value; 
 
     }) 
 
     canvas.renderAll(); 
 
    } 
 
    $('#rectangle').click(function() { 
 
     canvas.selection = false; 
 
     changeStatus(false); 
 
     //register mouse event 
 
     canvas.on('mouse:down', onMouseDown); 
 
     canvas.on('mouse:move', onMouseMove); 
 
     canvas.on('mouse:up', onMouseUp); 
 
    }); 
 

 
    function onMouseDown(event) { 
 
     //Defining the procedure 
 
     isMouseDown = true; 
 
     var pointer = canvas.getPointer(event.e); 
 
     //Creating the rectangle object 
 
     rect = new fabric.Rect({ 
 
      left: pointer.x, 
 
      top: pointer.y, 
 
      width: 0, 
 
      height: 0, 
 
      stroke: 'red', 
 
      strokeWidth: 3, 
 
      selectable: false, 
 
      fill: '' 
 
     }); 
 
     canvas.add(rect); 
 
    } 
 

 
    function onMouseMove(event) { 
 
     // Defining the procedure 
 
     if (!isMouseDown) { 
 
      return; 
 
     } 
 
     var pointer = canvas.getPointer(event.e); 
 
     rect.setWidth(Math.abs((pointer.x - rect.get('left')))); 
 
     rect.setHeight(Math.abs((pointer.y - rect.get('top')))); 
 
     canvas.renderAll(); 
 
    } 
 

 
    function onMouseUp() { 
 
     //alert("mouse up!"); 
 
     rect.setCoords(); 
 
     isMouseDown = false; 
 
    } 
 
});

canvas { 
 
    border: 2px dotted green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" charset="utf-8"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.js" charset="utf-8"></script> 
 
<canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas> 
 
<img width=500 height=500 alt="" id="scream" src="canvas.png" style="display:none;" /> 
 
<br> 
 
<input type="button" id="rectangle" value="rectangle"> 
 
<input type="button" id="selection" value="selection">

创建2个按钮，1>选择2>矩形

在选择>删除所有鼠标事件，改变对象为true的可选状态，

和矩形>添加鼠标事件到画布上，并改变所有对象可选状态都为false。