renderAll() 在 fabric.js 中不起作用答案

【问题标题】：renderAll() not working in fabric.jsrenderAll() 在 fabric.js 中不起作用
【发布时间】：2017-06-06 01:24:57
【问题描述】：

我在使用 fabric.js 的画布上绘制了一栋六层楼的建筑物。为了只显示一层，我这样做：

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 中，看看延迟是否有帮助，但没有运气。

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

好的 - 所以我最后想通了：building 是一个似乎被一些内部结构魔法缓存的组，并且正在渲染缓存的版本而不是更新的版本。要呈现更新的版本，您必须这样做

canvas.building.set('dirty', true);
canvas.renderAll();

希望能帮到其他人。

编辑

事实证明还有一个更简单的解决方案：

canvas.building.objectCaching = false

【讨论】：

canvas.building.objectCaching = false --> 更多相关信息：fabricjs.com/fabric-object-caching

【解决方案2】：

有一个新版本将格式改为：

canvas.requestRenderAll();

【讨论】：

【解决方案3】：

这在以后的版本中对我有用：

// for one canvas
myCanvas.objectCaching = false;

// for all canvas
fabric.Object.prototype.objectCaching = false;

// in both case it still needs to be re-rendered
myCanvas.renderAll();

ps：使用版本 4.2.0

【讨论】：