javascript - Fabric js loadFromJSON 问题

Question

我正在开发这个图形可视化工具。以下是我正在做的示例代码。首先我创建新的 Canvas ，有一个简单的 jQuery 单击事件将图像对象添加到 Canvas 。在处理此 Canvas 后，我需要从数据库加载数据，我已设法通过默认支持的“序列化”将数据保存在数据库中由 Fabric-js 提供。并将数据作为 json 对象检索以加载到 Canvas 中。我想要的是完全删除当前的工作 Canvas 并加载一个带有数据库检索数据的新 Canvas 。这是我到目前为止所做的...

(function() {

var canvasOffsetHeight = '400';
var canvasOffsetWidth = '600';

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

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    canvas.setHeight(canvasOffsetHeight);
    canvas.setWidth(canvasOffsetWidth);
    canvas.renderAll();
}
// resize on init
resizeCanvas();

jQuery('.category ul').on('click', 'li', function (e) {
    var imgElement = jQuery(this).children("img")[0];

    var imgInstance = new fabric.Image(imgElement, {
        left: 100,
        top: 100,
        angle: 0,
        opacity: 1
    });
    canvas.add(imgInstance);
    canvas.renderAll();

    return false;

});

jQuery('#obj').click(function(){

    canvas_data = '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}';

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

    canvas.loadFromJSON(canvas_data,canvas.renderAll.bind(canvas));

});
})();

这里假设“canvas_data”是来自数据库的数据。问题是，当我从对象加载数据时，它会正确显示在 Canvas 上，但一旦我单击它们，它们就会消失。

我认为因为主函数在加载时运行，所以当我单击它时，它会触发主函数并加载上一个 Canvas 。我想要的是清除旧 Canvas 并使用数据库数据加载新 Canvas 。请帮忙。他们说“loadFromJSON”会自动为我们执行此操作，但它似乎对我不起作用。

Answer 1

无需创建另一个 Canvas 对象。因此 #obj.click 中的代码变为:

jQuery('#obj').click(function(){

    canvas_data = '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}';



    canvas.loadFromJSON(canvas_data,canvas.renderAll.bind(canvas));

});