织物js loadFromJSON问题

Question

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

(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”是数据库中的数据。 问题是当我从一个对象加载数据时，它会正确显示在画布上，但只要我点击它们，它们就会消失。

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

Answer 1

无需创建另一个画布对象。所以你在#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));

});