41、利用 Web Workers 实现分形图像计算的优化与交互

利用 Web Workers 实现分形图像计算的优化与交互

1. 整体工作流程概述

在实现分形图像计算时，我们将使用 Web Workers 来提高计算效率。整体的工作流程如下：
1. 创建工人（Workers）数组，初始时所有工人处于空闲状态。
2. 为每个空闲工人分配任务，任务是计算分形图像的一行。
3. 工人接收任务并进行计算，计算完成后将结果返回。
4. 处理工人返回的结果，将像素绘制到画布上，并为工人重新分配任务。
5. 处理用户交互，如点击缩放和窗口大小调整。

下面是这个流程的 mermaid 流程图：

graph LR
    A[创建工人数组] --> B[为空闲工人分配任务]
    B --> C[工人计算任务]
    C --> D[工人返回结果]
    D --> E[处理结果并重新分配任务]
    E --> F{是否还有任务}
    F -- 是 --> B
    F -- 否 --> G[等待用户交互]
    G --> H{用户点击缩放}
    H -- 是 --> B
    G --> I{窗口大小调整}
    I -- 是 --> J[调整画布大小并重新分配任务]
    J --> B

2. 代码实现细节

2.1 初始化代码（mandel.js）

首先，我们需要在 mandel.js 文件中进行初始化设置。以下是初始化代码：

var numberOfWorkers = 8;
var workers = []; 
window.onload = init;

function init() {
    setupGraphics();
    for (var i = 0; i < numberOfWorkers; i++) {
        var worker = new Worker("worker.js");
        worker.onmessage = function(event) {
            processWork(event.target, event.data);
        };
        worker.idle = true;
        workers.push(worker);
    }
    startWorkers();
}

• numberOfWorkers ：定义了我们想要使用的工人数量，这里选择了 8 个。
• workers ：用于存储所有的工人对象。
• window.onload = init ：设置页面加载完成后调用 init 函数。
• init 函数：
• 调用 setupGraphics 函数进行图形初始化。
• 循环创建 8 个工人对象，并为每个工人设置消息处理函数 processWork 。
• 将每个工人的 idle 属性设置为 true ，表示初始时工人处于空闲状态。
• 将工人对象添加到 workers 数组中。
• 调用 startWorkers 函数启动工人。

2.2 启动工人代码（mandel.js）

接下来，我们需要实现 startWorkers 函数来启动工人。以下是代码：

var nextRow = 0;
var generation = 0;

function startWorkers() {
    generation++;
    nextRow = 0;
    for (var i = 0; i < workers.length; i++) {
        var worker = workers[i];
        if (worker.idle) {
            var task = createTask(nextRow);
            worker.idle = false;
            worker.postMessage(task);
            nextRow++;
        }
    }
}

• nextRow ：用于跟踪当前正在计算的行号。
• generation ：用于记录用户缩放分形图像的次数。
• startWorkers 函数：
• 每次启动工人时， generation 加 1， nextRow 重置为 0。
• 遍历 workers 数组，找到空闲的工人。
• 为空闲工人创建任务，调用 createTask 函数。
• 将工人的 idle 属性设置为 false ，表示工人正在工作。
• 使用 postMessage 方法将任务发送给工人。
• nextRow 加 1，以便为下一个工人分配下一行的任务。

2.3 工人代码（worker.js）

工人代码负责接收任务并进行计算，然后将结果返回。以下是 worker.js 文件的代码：

importScripts("workerlib.js");

onmessage = function (task) {
    var workerResult = computeRow(task.data);
    postMessage(workerResult);
}

• importScripts("workerlib.js") ：导入 workerlib.js 文件，以便调用其中的 computeRow 函数。
• onmessage 事件处理函数：
• 接收主 JavaScript 发送的任务。
• 调用 computeRow 函数进行分形图像的计算。
• 使用 postMessage 方法将计算结果返回给主 JavaScript。

3. 任务和结果的结构

在实现过程中，我们需要了解任务和结果的结构。以下是任务和结果的示例：

名称	描述	示例值
row	要计算的行号	1
width	行的宽度	1024
generation	缩放次数	1
r_min	实部最小值	2.074
r_max	实部最大值	-3.074
i	虚部值	-0.252336
max_iter	最大迭代次数	1024
escape	逃逸值	1025
values	像素值数组（仅结果中有）	[3, 9, 56, … -1, 22]

任务对象示例：

task = {
    row: 1,
    width: 1024,
    generation: 1,
    r_min: 2.074,
    r_max: -3.074,
    i: -0.252336,
    max_iter: 1024,
    escape: 1025
};

结果对象示例：

workerResult = {
    row: 1,
    width: 1024,
    generation: 1,
    r_min: 2.074,
    r_max: -3.074,
    i: -0.252336,
    max_iter: 1024,
    escape: 1025,
    values: [3, 9, 56, ... -1, 22]
};

4. 处理工人结果

当工人完成任务并返回结果时，我们需要处理这些结果。以下是处理结果的代码：

function processWork(worker, workerResults) {
    drawRow(workerResults);
    reassignWorker(worker);
}

function reassignWorker(worker) {
    var row = nextRow++;
    if (row >= canvas.height) {
        worker.idle = true;
    } else {
        var task = createTask(row);
        worker.idle = false;
        worker.postMessage(task);
    }
}

• processWork 函数：
• 调用 drawRow 函数将结果中的像素绘制到画布上。
• 调用 reassignWorker 函数为工人重新分配任务。
• reassignWorker 函数：
• 获取下一行的行号， nextRow 加 1。
• 如果行号大于等于画布的高度，说明所有行都已计算完成，将工人的 idle 属性设置为 true 。
• 否则，创建新的任务，将工人的 idle 属性设置为 false ，并将任务发送给工人。

5. 处理用户交互

5.1 处理点击事件

当用户点击画布时，我们需要处理点击事件，实现缩放功能。以下是处理点击事件的代码：

canvas.onclick = function(event) {
    handleClick(event.clientX, event.clientY);
};

function handleClick(x, y) {
    var width = r_max - r_min;
    var height = i_min - i_max;
    var click_r = r_min + width * x / canvas.width;
    var click_i = i_max + height * y / canvas.height;
    var zoom = 8;
    r_min = click_r - width/zoom;
    r_max = click_r + width/zoom;
    i_max = click_i - height/zoom;
    i_min = click_i + height/zoom;
    startWorkers();
}

• canvas.onclick 事件处理函数：
• 当画布被点击时，调用 handleClick 函数，并传递点击的坐标。
• handleClick 函数：
• 根据点击的坐标计算新的缩放区域。
• 更新全局变量 r_min 、 r_max 、 i_max 和 i_min 。
• 调用 startWorkers 函数重新启动工人，计算新的分形图像。

5.2 处理窗口大小调整事件

当窗口大小调整时，我们需要调整画布大小，并重新分配任务。以下是处理窗口大小调整事件的代码：

function resizeToWindow() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var width = ((i_max - i_min) * canvas.width / canvas.height);
    var r_mid = (r_max + r_min) / 2;
    r_min = r_mid - width/2;
    r_max = r_mid + width/2;
    rowData = ctx.createImageData(canvas.width, 1);
    startWorkers();
}

window.onresize = function() {
    resizeToWindow();
};

• resizeToWindow 函数：
• 将画布的宽度和高度设置为窗口的宽度和高度。
• 根据新的画布大小更新计算所需的变量。
• 重新创建 rowData 对象。
• 调用 startWorkers 函数重新启动工人，计算新的分形图像。
• window.onresize 事件处理函数：
• 当窗口大小调整时，调用 resizeToWindow 函数。

通过以上步骤，我们实现了利用 Web Workers 进行分形图像计算的优化，并处理了用户的交互事件，提高了应用的性能和用户体验。

利用 Web Workers 实现分形图像计算的优化与交互

6. 关键代码解释与总结

在前面的内容中，我们已经详细介绍了实现分形图像计算的各个部分代码。下面我们对关键代码进行总结和解释，以帮助大家更好地理解整个实现过程。

代码文件	关键函数	功能描述
mandel.js	init	初始化工人数组，为工人设置消息处理函数，并启动工人。
mandel.js	startWorkers	为空闲工人分配任务，更新任务行号和缩放次数。
worker.js	onmessage	接收任务，调用 computeRow 进行计算，并返回结果。
mandel.js	processWork	处理工人返回的结果，绘制像素并重新分配任务。
mandel.js	handleClick	处理用户点击事件，实现缩放功能。
mandel.js	resizeToWindow	处理窗口大小调整事件，调整画布大小并重新分配任务。

下面是这些关键函数之间调用关系的 mermaid 流程图：

graph LR
    A[init] --> B[startWorkers]
    B --> C[worker.onmessage]
    C --> D[processWork]
    D --> E[reassignWorker]
    E --> B
    F[canvas.onclick] --> G[handleClick]
    G --> B
    H[window.onresize] --> I[resizeToWindow]
    I --> B

7. 代码测试与验证

为了验证我们的代码是否正常工作，我们可以进行以下测试步骤：
1. 加载页面 ：将 fractal.html 文件加载到浏览器中，观察分形图像是否正常显示。
2. 点击缩放测试 ：在画布上点击，观察分形图像是否正确缩放，并且工人是否重新开始计算。
3. 窗口大小调整测试 ：调整浏览器窗口大小，观察画布是否正确调整大小，并且分形图像是否重新计算以适应新的画布大小。

通过以上测试，我们可以确保代码的正确性和稳定性。如果在测试过程中出现问题，可以根据前面介绍的代码逻辑进行调试。

8. 性能优化与扩展建议

虽然我们已经利用 Web Workers 提高了分形图像计算的效率，但仍然有一些可以优化和扩展的地方。以下是一些建议：
- 调整工人数 ：根据不同的计算机性能，可以调整 numberOfWorkers 的值，以找到最佳的计算效率。
- 优化计算算法 ：可以对 computeRow 函数进行优化，提高分形图像计算的速度。
- 增加用户交互功能 ：除了点击缩放和窗口大小调整，还可以增加更多的用户交互功能，如鼠标拖动、键盘控制等。
- 错误处理 ：在代码中添加错误处理机制，以处理可能出现的异常情况，提高代码的健壮性。

9. 总结

通过本文的介绍，我们学习了如何利用 Web Workers 实现分形图像计算的优化，并处理用户的交互事件。整个实现过程包括创建工人、分配任务、处理结果、处理用户交互等步骤。通过合理使用 Web Workers，我们可以将计算任务分配给多个线程，从而提高计算效率，同时保持 UI 的响应性。

在实际应用中，我们可以根据具体需求对代码进行优化和扩展，以满足不同用户的需求。希望本文对大家有所帮助，让大家在实现分形图像计算和处理用户交互方面有更深入的理解。

以下是一个总结性的列表，回顾整个实现过程的关键步骤：
1. 初始化工人数组，设置工人的消息处理函数。
2. 为空闲工人分配任务，启动工人进行计算。
3. 工人接收任务，进行计算并返回结果。
4. 处理工人返回的结果，绘制像素并重新分配任务。
5. 处理用户的点击缩放和窗口大小调整事件，重新启动工人计算新的分形图像。

通过以上步骤，我们实现了一个高效、交互性强的分形图像计算应用。