FabricJS绘图图像消失

问题描述

我是FabricJS库的新手，我将其用于以下用途，
我在屏幕的左侧有一个可拖动对象，该对象只能在y方向上拖动。函数会读取该对象的y位置，然后它取决于需要绘制的三角形的高度。

I'm new with the FabricJS library and I used it for the following,I have a draggable object on the left side of my screen, which is only drag-able in an y direction. A function reads out the y position of this object and then it depends the height of my triangle which needs to be drawn.

但是在绘制三角形2-3秒后消失，不再显示。...

But after 2-3 seconds of drawing the triangle dissapears and doesn't show again....

这是我的代码。

function drawObject() {
    if (being_dragged == true && y <= 440) {
        document.getElementById(element).style.top = y + 'px';
        y_height_1 = y;
        if (y_height_1 > y_height_2) {
            y_final--;
            y_height_2 = y_height_1;
        } else {
            y_final++;
        }

        drawRoof();
    }
}

function drawRoof() {
    var canvas = new fabric.Canvas('canvas');

    var roof = new fabric.Triangle({
        width: 200,
        height: y_final / 2,
        fill: 'blue',
        left: 150,
        top: 200
    });

    canvas.add(roof);
}

推荐答案

您要创建新对象吗？什么时候拖动？我看不到它是代码的一部分。

Are you making a new object when you are dragging? I cant see its a part of the code.

您的意思是这样的吗？ >>

Do you mean something like this?? >> Fiddle

var canvas = new fabric.Canvas('canvas');
var roof = new fabric.Triangle({ width: 200,  height: 200, fill: 'blue', left: 250,  top: 200    });
var handler = new fabric.Circle({ radius: 15, fill: '#ccc', top: 300, left: 40 });
handler.hasControls = handler.hasBorders = false;

handler.lockMovementX = true;
canvas.add(roof, handler);

canvas.on({'object:moving' : resizeTriangle});

function resizeTriangle(e) {
    roof.height = e.target.getTop();
}

这篇关于FabricJS绘图图像消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！