我按
加载画布canvas.loadFromJSON(templates[templateInd].contents, setCanvasAgain);
其中setCanvasAgain遍历画布上的对象以设置一些新属性。在函数的最后,我调用canvas.renderAll()
function setCanvasAgain() {
canvas.forEachObject(function(object) {
//var customPosition = canvas._objects[i].customPosition;
var customPosition = object.customPosition;
if (customPosition == 'content-header') {
console.log('templates[templateInd].catPictoHeader:');
console.log(templates[templateInd].catPictoHeader);
// addPictoLine(position,count,categoryArray){
header += addPictoLine(customPosition, templates[templateInd].pictoInputsHeader, templates[templateInd].catPictoHeader);
//pictoCount++;
} else if (customPosition == 'content-body') {
if (object.type == 'text') {
//addTextLine params: textCount,arrayLength
body += addTextLine(textCount, templates[templateInd].textInputs);
textCount++;
} else if (object.label == 'picto') {
body += addPictoLine(customPosition, templates[templateInd].pictoInputsBody, templates[templateInd].catPictoBody);
//pictoCount++;
} else if (object.label == 'verkeersteken') {
body += addPictoLine(customPosition, templates[templateInd].vtknInputsBody, templates[templateInd].catVtknBody);
}
} else if (customPosition == 'content-footer') {
footer += addPictoLine(customPosition, templates[templateInd].pictoInputsFooter, templates[templateInd].catPictoFooter);
//pictoCount++;
}
addControlBtn(object, customPosition);
// //console.log(i);
object.set({
lockMovementX: true,
lockMovementY: true,
hasControls: false
});
});
canvas.renderAll();
}
但是当它完成并且我尝试将画布设置为SVG时,它显示为空白。如果我试图查看画布,那里也没有任何物体(因此无需绘制)。看起来json内容没有与canvas绑定... 我也尝试过经典
canvas.loadFromJSON(templates[templateInd].contents, canvas.renderAll.bind(canvas))
但结果相同。那么如何从JSON中获取对象与canvas /绑定以设置为画布的对象?
提前致谢!
编辑:
我又遇到了一个问题: templates [templateInd] .contents包含字符串化画布。具有由fabric.util.object.extend设置的自定义属性的对象。在字符串化画布中,这些自定义属性看起来很好。但是当我将字符串化的对象添加到画布时,自定义属性就会消失......或者我应该将它放在一个单独的问题中?