Невозможно выбрать объекты после рисования в FabricJS

Question

Я пытаюсь освободить рисованный прямоугольник на холсте.

Это мой JSFiddle.

Код:

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!"); 
     isMouseDown = false; 
     // freeDrawing=false; // **Disables line drawing 
    }); 
}); 

Проблема, с которой я столкнулся после рисования прямоугольника я не могу перемещать, изменять размеры или, по крайней мере, выберите нарисованный прямоугольник.

Answer 1

Ошибка: Вы не добавляете объект, когда мышь вставлена. Просто измените мышь: до функции событий, как это:

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

Это будет работать нормально. :)

Answer 2

Я также сталкиваюсь с той же проблемой, спасибо за предоставленное решение. Если вы заметили в этой скрипке, создается дублирующий объект при перемещении фигуры.

Как решить проблему.

$(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; 
      //freeDrawing=false; // **Disables line drawing 
     }); 
    }); 
}); 

JS Fiddle Ссылка здесь.

http://jsfiddle.net/PrakashS/8u1cqasa/75/