Question

我正在尝试将Html JS库Char.js改编为QML QtQuick 2.4。

该库具有动画场景的功能。如果我没有为它设置动画，那么一切都很有效（例如，动画只有一步动画）。

使用动画时，画布会冻结，直到动画结束，然后重绘场景。这是animationLoop函数：

animationLoop = helpers.animationLoop = function(callback,totalSteps,easingString,onProgress,onComplete,chartInstance){

        var currentStep = 0,
            easingFunction = easingEffects[easingString] || easingEffects.linear;

        var animationFrame = function(){
            currentStep++;
            var stepDecimal = currentStep/totalSteps;
            var easeDecimal = easingFunction(stepDecimal);

            callback.call(chartInstance,easeDecimal,stepDecimal, currentStep);
            onProgress.call(chartInstance,easeDecimal,stepDecimal);
            if (currentStep < totalSteps){
                chartInstance.animationFrame = chartInstance.chart.canvas.requestAnimationFrame(animationFrame);
            } else{
                onComplete.apply(chartInstance);
            }
        };
        chartInstance.chart.canvas.requestAnimationFrame(animationFrame);
    },

每次调用onAnimationProgress回调时，我都会调用Canvas requestPaint函数来重绘场景。不幸的是，直到动画的每一步都完成后才会调用onPaint函数。

可以使用chartInstance.chart.canvas访问Canvas对象。我试图在每次迭代时调用directely chartInstance.chart.canvas.requestPaint（），这不起作用。我仍然需要等到动画结束才能正确地重新绘制场景。

onAnimationProgress: function(easeDecimal,stepDecimal) {
    skipNextChartUpdate = true;
    requestPaint();
}


onPaint: {
    if (!chartInstance) {
        initializeChart()
    } else if(!skipNextChartUpdate) {
        chartInstance.scale.update({width:width,height:height});
        chartInstance.resize(chartInstance.update);
    } else {
        skipNextChartUpdate = false;
    }
}

Answer 1

这或多或少正如我所料。 requestPaint不是立即操作，而是请求以后重新绘制。因此，如果您在单个JS函数中多次调用requestPaint，则每个（vsync）帧只会收到一个onPaint事件。

因此，如果您想要驱动动画，您应该通过调用requestPaint（以便将来要求另一个onPaint事件）在onPaint中驱动它们，如果还有更多动画要显示的话。

Qt QML Canvas requestPaint不会立即重绘场景

1 个答案: