Qunee for HTML5 - 中文 : 延迟绘制

V2.5版本增加了延迟绘制机制,可改善缩放交互时的界面响应体验

#delayedRendering // 启用延迟绘制,默认开启

#pauseRendering = function(pause, force){} //是否暂停或启动绘制

使用示例

在鼠标滚轮缩放和触摸捏合缩放时都启用了延迟绘制,下面是捏合缩放交互时的相关代码片段,在开始捏合事件时停止绘制画布,捏合事件结束时重新绘制画布,减少了交互过程中的CPU开销,缩短了交互响应时间

Q.PanInteraction.prototype = {
...
    startpinch: function(evt, graph){
        graph.pauseRendering(true);
    },
    onpinch: function(evt, graph){
        this._start = true;
        var dScale = evt.dScale;
        if(dScale){
            var p = graph.globalToLocal(evt.center);
            graph.zoomAt(dScale, p.x, p.y, false);
        }
    },
    endpinch: function(evt, graph){
        graph.pauseRendering(false);
    }
}

可能存在的问题

延迟绘制机制可以有效地缩短交互响应时间,但是也会代码一些问题

画布空白

开启延迟绘制后,画布会在交互结束时刷新,这意味着在交互过程中会出现空白,比如画布缩小时四周出现空白

画布抖动

画布暂停绘制时,画布的缩放平移效果全部由CSS的transform属性实现,由于不同浏览器支持效果不一致,某些特定版本浏览器下可能出现界面抖动的问题,比如Firefox V45.0.1,这时候可以选择关闭画布的延迟绘制属性:graph.delayedRendering = false; 以避免问题。