我正在尝试从不同的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])
上。它们呈现没有问题。
那是什么问题?为什么这没有按预期工作?
答案 0 :(得分:0)
正如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
都允许我设置特定的动作,分别在加载单个形状和加载所有形状时执行。