Question

我正在尝试从不同的SVG文件加载路径，并将其保留在数组中。我真的不希望它们出现在画布上，因为我主要是使用它们来从它们创建新路径。但是，我确实希望不时地将它们实际添加到要渲染的画布中。

下面是显示我的问题的代码段：

var canvas = new fabric.Canvas('c', {
    backgroundColor: 'skyblue'
});
canvas.renderAll();

var orig_shapes = []; // I want to store the paths here

function loadShape(url){
    fabric.loadSVGFromURL(url, function(paths, options){
        let shape = paths[0];
        orig_shapes.push(shape);
    });
}

loadShape('path0.svg');
loadShape('path1.svg');

// Add all the loaded shapes to the canvas
console.log(orig_shapes.length);
orig_shapes.forEach(function(shape, index, arr) {
    canvas.add(orig_shapes[index]);
});

canvas.renderAll();

此脚本加载在网页内<body>元素的末尾。

我希望在控制台中看到渲染的路径和一个2。不幸的是，我得到的只是一个蓝色背景和一个0。

尽管如此，如果我在控制台中检查orig_shapes.length()，我确实会得到一个2；因此，显然，路径最终被推送到了数组（但在我需要的时候没有）。我什至可以在控制台中将路径添加到画布canvas.add(orig_shapes[i])上。它们呈现没有问题。

那是什么问题？为什么这没有按预期工作？

Answer 1

正如Durga所说，loadSVGFromURL是一个异步函数，因此我需要首先检查SVG是否已加载。这是使用Promises来确保这一点的脚本版本：

var canvas = new fabric.Canvas('c', {
    backgroundColor: 'skyblue'
});
canvas.renderAll();

var orig_shapes = [];

function loadShape(url){
    return new Promise(function(resolve, reject){
        fabric.loadSVGFromURL(url, function(paths, options){
            let shape = paths[0];
            orig_shapes.push(shape);
            resolve(shape);
        });
    });
}

function loadShapes(urls, shape_callback) {
    let promises = [];
    urls.forEach(function(url) {
        promises.push(loadShape(url).then(shape_callback));
    });

    return Promise.all(promises);
}

function addToCanvas(object) {
    canvas.add(object);
}

loadShapes(['path0.svg', 'path1.svg'])
    .then(function(objs) {
        objs.forEach(addToCanvas);
    });

loadShape和loadShapes都允许我设置特定的动作，分别在加载单个形状和加载所有形状时执行。

加载的SVG路径不会立即推送到阵列中

1 个答案: