FabricJS - How to dragging an object in Shape filled object? - html

Question

Im trying to drawing line Shape (fabric.Line).
and then after drawn shape. it filled image.
When finished drawing an shape, I want to drag an filled image (inside Shape)
Here is the 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);
Thank you for reading my question... Please someone help me T_T

Answer 1

Try something like this in your dblClickHandler event:
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();
};
I have updated your fiddle: http://jsfiddle.net/dTpVw/3/
I hope it helps...