FabricJS - Как перетаскивать объект в заполненном формой объекте?

Question

Im пытается рисовать линию формы (fabric.Line).

, а затем после нарисованной формы. он заполнил изображение.

Закончив рисование формы, я хочу, чтобы перетащить наполненное изображение (внутри Shape)

Вот jsfiddle >>http://jsfiddle.net/dTpVw/

var canvas = new fabric.Canvas('c', { selection:false }); 
var mode = "add"; 
var currentShape; 

canvas.observe("mouse:move", function (event) { 
    var pos = canvas.getPointer(event.e); 
     if (mode === "edit" && currentShape) { 
      if (currentShape.type === "line") { 
       currentShape.set({ 
        x2 : pos.x, 
        y2 : pos.y 
       }); 
       canvas.renderAll(); 
      } else if (currentShape.type === "polygon") { 
       var points = currentShape.get("points"); 
       points[points.length - 1].x = pos.x - currentShape.get("left"); 
       points[points.length - 1].y = pos.y - currentShape.get("top"); 
       currentShape.set({ 
        points : points 
       }); 
       canvas.renderAll(); 
      } 
     } 
}); 

canvas.observe("mouse:down", function (event) { 
    var pos = canvas.getPointer(event.e); 

     if (mode === "add") { 
      var polygon = new fabric.Line([ pos.x, pos.y, pos.x + 2, 
        pos.y + 2 ], { 
           fill : 'red' 
      }); 
      currentShape = polygon; 
      canvas.add(currentShape); 
      mode = "edit"; 
     } else if (mode === "edit" && currentShape 
       && currentShape.type === "line") { 
      // replace line with polygon 
      canvas.remove(currentShape); 
      var points = []; 
      points.push({ 
       x : currentShape.x1 - pos.x, 
       y : currentShape.y1 - pos.y 
      }); 
      points.push({ 
       x : currentShape.x2 - pos.x, 
       y : currentShape.y2 - pos.y 
      }); 
      points.push({ 
       x : currentShape.x2 - pos.x + 5, 
       y : currentShape.y2 - pos.y + 5 
      }); 
      var polygon = new fabric.Polygon(points, { 
       fill : 'blue', 
       left : pos.x, 
       top : pos.y, 
       opacity: 0.5 // 투명도 적용 
      }); 
      canvas.add(polygon); 
      Spolygon = polygon; 
      currentShape = polygon; 
      canvas.renderAll(); 
     } else if (mode === "edit" && currentShape 
       && currentShape.type === "polygon") { 
      var points = currentShape.get("points"); 
      points.push({ 
       x : pos.x - currentShape.get("left"), 
       y : pos.y - currentShape.get("top") 
      }); 
      currentShape.set({ 
       points : points 
      }); 
      canvas.renderAll(); 
     } 
}); 

function loadPattern(url) { 
    fabric.util.loadImage(url, function(img) { 
      console.log(Spolygon); 
      Spolygon.fill = new fabric.Pattern({ 
       source : img, 
       repeat : 'repeat' 
      }); 
      canvas.renderAll(); 
     }); 

     Spolygon.hasControls = false; 
     // Spolygon.selectable = false; 
     Spolygon.hasRotatingPoint = false; 
     Spolygon.lockMovementX = true; 
     Spolygon.lockMovementY = true; 
} 

function dblClickHandler(event) 
{ 
    currentShape.setCoords(); 
    mode ="add2"; 
    loadPattern('http://fabricjs.com/assets/retina_wood.png'); 
}; 
fabric.util.addListener(fabric.document, 'dblclick', dblClickHandler); 
//fabric.util.removeListener(canvas.upperCanvasEl, 'dblclick', dblClickHandler); 

Спасибо за чтение на мой вопрос ... Пожалуйста, кто-то помочь мне T_T

Answer 1

Попробуйте что-нибудь подобное в вашем случае dblClickHandler:

function dblClickHandler(event) 
{ 
    currentShape.setCoords(); 
    mode ="add2"; 
    loadPattern('http://fabricjs.com/assets/retina_wood.png'); 
    //alert(currentShape.height); 
    //alert(currentShape.width); 
    currentShape.hasControls = true; 
    currentShape.hasRotatingPoint = true; 
    currentShape.lockMovementX = false; 
    currentShape.lockMovementY = false; 
    canvas.setActiveObject(currentShape); 
    canvas.renderAll(); 

}; 

Я обновил свою скрипку: http://jsfiddle.net/dTpVw/3/

Я надеюсь, что это помогает ...