javascript - 从另一个 Javascript 脚本 (Canvas3D) 更新 QML 属性

Question

我在从 QML 读取 javascript 变量时遇到问题。我知道这看起来很简单，但这是一个特殊情况:

我正在使用 canvas3D 生成大量 3D 球体，并且由于 instenciation 非常长，我想显示一个进度条。

为此，我这样做了:

import "test6.js" as GLCode

Item {
id: mainview
width: 1280
height: 768
visible: true



// THE PROGRESS BAR

ProgressBar {
    id : progressBar
    anchors.centerIn: parent
    value: canvas3d.progress
    z:1
}


//THE CANVAS3D (WebGL)
Canvas3D {
    id: canvas3d
    anchors.fill: parent
    focus: true

    property double progress:0 //MY VARIABLE I WANT TO UPDATE FROM test6.js


    property var list : []

    // Emitted when one time initializations should happen
    onInitializeGL: {
        GLCode.initializeGL(canvas3d);
    }

我的canvas3d中有一个属性名称progress，我正在尝试从test6.js脚本修改它

在initializeGL(canvas3d)函数中，每次添加球体时我都会更新进度值:

for ( i = 0; i < spheresNum; i ++ ) {

    var x = list[i][0];
    var y = list[i][1];
    var z = list[i][2];
    drawSphere(x,y,z,i);
    canvas3d.progress = i/spheresNum*100;
}

现在的问题是，只有当initializeGL()结束时我才能获取更新的进度值。现在就像:

Progress Bar to 0%
(Waiting for all the sphere to be instanciated)
(initializeGL() ends)
Progress Bar to 100%

这没什么用。我更喜欢在每次创建球体时让条形移动。

你知道我该怎么做吗？

Answer 1

您只能看到 0% 和 100% 作为进度，因为在 QML 引擎响应 canvas3d.progress 的更改值之前，initializeGL() 中的 for 循环已完全执行 并更新 progessBar.value 的值。 for 循环和从 progessBar.value 到 canvas3d.progress 的属性绑定(bind)更新在同一线程中运行。

解决这个问题的方法是只调用initializeGL()一步，然后让出CPU来更新进度。我的想法是使用一个单次计时器，它会调用自己 numSphere 次并初始化第 i 个镜头中的第 i 个球体。

逐步初始化函数将在 test6.js 中定义如下:

function initializeGLSphere(i) {
    var x = list[i][0];
    var y = list[i][1];
    var z = list[i][2];
    drawSphere(x,y,z,i);
}

在Canvas3d实例之后，添加单次计时器:

property int currentSphere = 0

Timer {
    id: timer
    repeat: false
    interval: 0
    onTriggered: {
        GLCode.initializeGLSphere(currentSphere)
        ++currentSphere
        progessBar.progress = currentSphere / GLCode.numSpheres
        if (currentSphere < GLCode.numSpheres) {
            timer.restart()
        }
    }
}

计时器在onInitializeGL中启动:

onInitializeGL: timer.start()

启动单次计时器意味着将事件放入主 Qt 事件循环中。一旦定时器间隔到期，定时器就会触发。 0 毫秒的间隔意味着计时器事件到达事件队列(循环)前面时尽快触发并执行 onTriggered。

在处理计时器事件之间，事件队列还将给 QML 引擎一些时间来更新 progressBar.progress 的属性绑定(bind)。因此，您应该看到很多介于 0 和 100 之间的中间进度值。但是，您不会看到全部，因为在属性绑定(bind)更新发生之前可能会处理多个计时器事件。如果您想查看更多进度更新，只需增加计时器间隔即可。