我用 fabric.js 在 Canvas 上绘制了一座六层楼的建筑。为了只显示一层,我这样做:
building.selectFloor = function(floorId){
for (var i = 0; i < floors.length; i++){
if (floorId == floors[i].name){
floors[i].visible = true;
}else{
floors[i].visible = false;
}
}
canvas.renderAll();
};
但没有任何变化 - 所有楼层仍然可见。设置为 visible = false 的楼层不会消失,直到稍后在窗口调整大小时调用 renderAll():
$(window).resize(setSize);
setSize();
function setSize(){
viewportWidth = $(window).width();
viewportHeight = $(window).height();
$appContainer.css({ "width": viewportWidth, "height": viewportHeight});
canvas.setDimensions({ width: viewportWidth, height: viewportHeight });
if (canvas.building){
canvas.building.center();
canvas.building.scaleX = canvas.building.scaleY = (viewportWidth + viewportHeight) / (1920 + 1080);
canvas.renderAll();
}
}
但随后它们确实消失了。为什么一个 renderAll() 工作,而另一个不工作?我尝试将无法正常运行的 renderAll() 包装在 window.timeOut 中以查看延迟是否有帮助,但没有成功。
最佳答案
好的 - 所以我最终弄清楚了:building
是一个似乎被某种内部结构魔法缓存的组,并且正在渲染缓存版本而不是更新版本。要呈现更新版本,您必须这样做
canvas.building.set('dirty', true);
canvas.renderAll();
希望对下线的人有所帮助。
编辑
原来还有一个更简单的解决方案:
canvas.building.objectCaching = false
关于javascript - renderAll() 在 fabric.js 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41774096/