Javascript FabricJS绘图图像消失

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

但在画了2-3秒后，三角形消失了，不再显示

这是我的密码

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);
}

函数drawObject（）{
如果（被拖动==true&&y y\u高度2）{
你的期末考试--；
y_高度_2=y_高度_1；
}否则{
y_final++；
}
抽油顶（）；
}
}
函数drawRoof（）{
var canvas=newfabric.canvas（'canvas'）；
var roof=新织物。三角形({
宽度：200，
高度：y_最终/2，
填充：“蓝色”，
左：150，
排名：200
});
画布。添加（屋顶）；
}

拖动时是否正在创建新对象？我看不出这是代码的一部分

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

---

请看一下这把小提琴

window.onload=函数（）{
var canvas=newfabric.canvas（'canvas'）；
/* 
注意：开始和结束处理程序是元素的事件；其余的绑定到
画布容器。
*/
函数handleDragStart（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
this.classList.add（'img_拖动'）；
}
功能手柄（e）{
如果（如默认）{
e、 预防默认值（）；
}
e、 dataTransfer.dropEffect='copy'；
返回false；
}
函数handleDragEnter（e）{
this.classList.add（'over'）；
}
功能手柄（e）{
this.classList.remove（'over'）；
}
函数handleDrop（e）{
如果（如停止播放）{
e、 stopPropagation（）；//停止浏览器重定向。
}
var img=document.querySelector（“#images img.img_拖动”）；
var newImage=newfabric.Image（img{
宽度：img.width，
高度：img.height，
//根据相对事件坐标设置新对象的中心
//到画布容器。
左：e.layerX，
顶部：e.layerY
});
newImage.hasControls=newImage.hasBorders=false；
canvas.add（newImage）；
返回false；
}
功能手柄（e）{
//此/e.target是源节点。
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
}
if（现代化draganddrop）{
var images=document.queryselectoral（“#images img”）；
[]forEach.call（图像、函数（img）{
img.addEventListener（'dragstart'，handleDragStart，false）；
img.addEventListener（'dragend'，handleDragEnd，false）；
});
var canvascanner=document.getElementById（“画布容器”）；
canvasContainer.addEventListener（'dragenter'，handleDragEnter，false）；
canvasContainer.addEventListener（'Dragver'，handleDragOver，false）；
canvasContainer.addEventListener（'dragleave'，handleDragLeave，false）；
canvasContainer.addEventListener（'drop'，handleDrop，false）；
}否则{
警报（“此浏览器不支持HTML5拖放API。”）；
}
}

是的，谢谢，这正是我想要的，我稍后会实施它，如果它有效，我会给你反馈！谢谢好的，如果您想要更多的实现，请询问。查看fabricjs站点可以查看文档和演示页面。我也是新手，我学到了很多

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();
}

window.onload = function () {

        var canvas = new fabric.Canvas('canvas');

        /* 
        NOTE: the start and end handlers are events for the <img> elements; the rest are bound to 
        the canvas container.
        */

        function handleDragStart(e) {
            [].forEach.call(images, function (img) {
                img.classList.remove('img_dragging');
            });
            this.classList.add('img_dragging');
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault(); 
            }

            e.dataTransfer.dropEffect = 'copy';
            return false;
        }

        function handleDragEnter(e) {                
            this.classList.add('over');
        }

        function handleDragLeave(e) {
            this.classList.remove('over'); 
        }

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

            var img = document.querySelector('#images img.img_dragging');

            var newImage = new fabric.Image(img, {
                width: img.width,
                height: img.height,
                // Set the center of the new object based on the event coordinates relative
                // to the canvas container.
                left: e.layerX,
                top: e.layerY
            });
            newImage.hasControls = newImage.hasBorders = false;
            canvas.add(newImage);

            return false;
        }

        function handleDragEnd(e) {
            // this/e.target is the source node.
            [].forEach.call(images, function (img) {
                img.classList.remove('img_dragging');
            });
        }

        if (Modernizr.draganddrop) {



            var images = document.querySelectorAll('#images img');
            [].forEach.call(images, function (img) {
                img.addEventListener('dragstart', handleDragStart, false);
                img.addEventListener('dragend', handleDragEnd, false);
            });

            var canvasContainer = document.getElementById("canvas-container");
            canvasContainer.addEventListener('dragenter', handleDragEnter, false);
            canvasContainer.addEventListener('dragover', handleDragOver, false);
            canvasContainer.addEventListener('dragleave', handleDragLeave, false);
            canvasContainer.addEventListener('drop', handleDrop, false);
        } else {

            alert("This browser doesn't support the HTML5 Drag and Drop API.");
        }
    }