Question

我正在尝试绘制线条形状（fabric.Line）。

然后绘制形状。它填满了图像。

完成绘制形状后，我想拖动填充的图像（在Shape内部）

这是jsfiddle＆gt;＆gt; 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/

我希望它有所帮助...

FabricJS - 如何在Shape填充对象中拖动对象？

1 个答案: