新しいファブリックJSのドラッグアンドドロップイメージの問題

Question

ファブリックJSの最新バージョンでは、イメージドロップ機能が期待通りに機能しません。

function handleDrop(e) { 
     e.preventDefault(); 
     // this/e.target is current target element. 

     if (e.stopPropagation) { 
      e.stopPropagation(); // stops the browser from redirecting. 
     } 

     var obj = document.querySelector('#draggable_items_container .drag_item.draggable_items'); 

     if($(obj).attr('data-type')=='image') 
     { 
      var image_url = $(obj).attr('data-value'); 
      var new_image = new fabric.Image(obj, { 
       width: obj.width, 
       height: obj.height, 
       left: e.layerX, 
       top: e.layerY, 
      }); 
      canvas.add(new_image); 
     } 
     else 
     { 
      var text_value = $(obj).attr('data-value'); 
      if(text_value=='') 
      { 
       alert('You cant drag blank text'); 
       return false; 
      } 

      var params = { 
       canvas_obj : canvas, 
       text: text_value, 
       left : e.layerX, 
       top : e.layerY, 
       font_size : 22, 
       editable: false, 
      }; 
      add_text_canvas(params); 
     } 
     return false; 
    } 

ワーキングフィドル：

http://jsfiddle.net/dhavalsisodiya/w8kkc/412/

2.0.0-beta.7に働いていない
http://jsfiddle.net/Ahammadalipk/w8kkc/185/

は、どのようにこの問題を解決するには？あなたは、実際の画像の幅と高さを設定する必要が

Answer 1

var newImage = new fabric.Image(img, { 
    width: img.naturalWidth, 
    height: img.naturalHeight, 
    scaleX: setImageWidth/img.naturalWidth,   
    scaleY: setImageHeight/img.naturalHeight, 
    // Set the center of the new object based on the event coordinates relative 
    // to the canvas container. 
    left: e.layerX, 
    top: e.layerY 
}); 

、その後、あなたの条件に応じて、XとYをスケーリング。ここが更新されましたfiddle