JavaFX Canvas appendSVG 路径渲染行为

Question

我正在寻找一块一块地绘制矢量，每次添加新块时都会重新绘制矢量。我有一个字符串，其中包含循环通过的最终 svg 的每一段路径（由字符串中的“;”描述）。此外，我添加了strokeLine 作为进度条来跟踪绘制了多少矢量。

public void renderObject(GraphicsContext playGraphics, Canvas toUpdate)
{       
    playGraphics.beginPath();
    String toAppend = "M 215 256; L 215 256; L 215 256; L 215 256; L 225 241; L 234 231; L 246 223; L 266 214; L 284 208; L 309 204; L 340 200; L 378 199; L 416 199; L 444 199; L 473 203; L 485 206; L 496 211; L 506 218; L 510 224; L 513 233; L 515 243; L 516 257; L 512 270; L 502 285; L 493 298; L 483 308; L 476 315; L 472 318; L 469 320; L 468 320; L 468 320; L 468 320; L 468 317; L 472 309; L 480 300; L 492 293; L 510 287; L 535 283; L 557 282; L 580 283; L 593 287; L 607 295; L 623 311; L 634 333; L 640 355; L 642 396; L 639 430; L 624 467; L 602 508; L 582 536; L 557 563; L 524 585; L 490 602; L 464 611; L 432 619; L 420 621; L 404 622; L 393 622; L 383 621; L 376 620; L 372 618; L 365 610; L 360 598; L 358 578; L 357 554; L 361 514; L 371 493; L 386 463; L 412 422; L 432 395; L 456 362; L 480 329; L 506 299; L 533 271; L 560 247; L 600 213; L 620 194; L 626 189; L 629 184; L 630 182; L 632 178"; 
    for (int i=0; i < toAppend.split(";").length; i++)
    {
        try {
            Thread.sleep(500);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        playGraphics.clearRect(0, 0, toUpdate.getWidth(), toUpdate.getHeight());
        playGraphics.strokeLine(50, 50, 50+10*i, 50);

        playGraphics.appendSVGPath(toAppend.split(";")[i]);
        playGraphics.stroke();
    }
}

但是，一旦在实时画布上实现，矢量就不会被绘制，只有进度条可见。考虑到渲染完成后，如果再次使用graphicsContext 对象并调用另一个playGraphics.stroke();，矢量图像可以完整地显示在画布上，这是非常奇怪的。

为什么playGraphics.stroke(); 运行失败，而playGraphics.strokeLine 运行正常？

指示正在渲染的进度条，但未显示矢量 指示正在渲染的进度条，但未显示矢量 矢量终于显示出来了，但只是在画布上画了一个点，重新调用playGraphics.stroke();

Answer 1

当您调用 stroke() 时，SVG 路径似乎以某种方式从当前路径中删除（之后它们无法附加到当前路径）。如果您只在循环完成时调用stroke()（我意识到这会破坏动画效果，因此不是解决方案），您的绘图将按预期显示。

这很复杂，因为您的睡眠调用忽略了 JavaFX 的线程规则。您的 renderObject 方法是否在 JavaFX 应用程序线程中被调用？

• 如果是这样，sleep 调用会阻止事件处理，包括绘画。
• 否则，GraphicsContext 方法调用是非法的，可能会失败或行为不可预测。来自GraphicsContext documentation：

...一旦将Canvas 节点附加到场景，就必须在JavaFX 应用程序线程上对其进行修改。

在GraphicsContext 上调用任何方法都被视为修改了其对应的Canvas，并遵循相同的线程规则。

一旦您的 Canvas 显示出来，您必须在应用程序线程中进行这些 GraphicsContext 调用。但是，您不能在应用程序线程中休眠；这会导致所有 GUI 事件挂起，包括所有视觉更新和对用户输入的所有响应。

有几种方法可以正确执行多线程。最简单的方法是创建一个新线程，允许调用 sleep，同时确保使用 Platform.runLater 在 JavaFX 应用程序线程中调用 Canvas GraphicsContext。

其他一些注意事项：

• 正则表达式的开销很大。 toAppend.split(";") 不是一个变量，它是一个昂贵的操作。你在每个循环迭代中重复该操作两次！您应该在循环开始之前调用split(";")一次，并将返回的数组保存在一个变量中。 （JVM 可能能够在运行时进行这种优化，但不能保证。）
• 就此而言，您根本不需要split；您可以将所有 SVG 命令放入一个数组中，这样还有一个好处是更易于阅读。
• 中断不是偶然发生的。如果您的线程被中断，则意味着有人明确要求您停止正在做的事情并优雅地退出。忽略中断意味着您的线程是无法停止的流氓线程。在大多数情况下，最好的做法是将整个方法体放在 try/catch 中，这样如果被中断，它会自动退出。

因此，考虑到以上所有因素，您想要这样的东西：

public void renderObject(GraphicsContext playGraphics, Canvas toUpdate)
{       
    if (!Platform.isFxApplicationThread())
    {
        throw new IllegalStateException(
            "Must be called in JavaFX application thread");
    }

    String[] toAppend = {
        "M 215 256", "L 215 256", "L 215 256", "L 215 256",
        "L 225 241", "L 234 231", "L 246 223", "L 266 214",
        "L 284 208", "L 309 204", "L 340 200", "L 378 199",
        "L 416 199", "L 444 199", "L 473 203", "L 485 206",
        "L 496 211", "L 506 218", "L 510 224", "L 513 233",
        "L 515 243", "L 516 257", "L 512 270", "L 502 285",
        "L 493 298", "L 483 308", "L 476 315", "L 472 318",
        "L 469 320", "L 468 320", "L 468 320", "L 468 320",
        "L 468 317", "L 472 309", "L 480 300", "L 492 293",
        "L 510 287", "L 535 283", "L 557 282", "L 580 283",
        "L 593 287", "L 607 295", "L 623 311", "L 634 333",
        "L 640 355", "L 642 396", "L 639 430", "L 624 467",
        "L 602 508", "L 582 536", "L 557 563", "L 524 585",
        "L 490 602", "L 464 611", "L 432 619", "L 420 621",
        "L 404 622", "L 393 622", "L 383 621", "L 376 620",
        "L 372 618", "L 365 610", "L 360 598", "L 358 578",
        "L 357 554", "L 361 514", "L 371 493", "L 386 463",
        "L 412 422", "L 432 395", "L 456 362", "L 480 329",
        "L 506 299", "L 533 271", "L 560 247", "L 600 213",
        "L 620 194", "L 626 189", "L 629 184", "L 630 182",
        "L 632 178"
    };

    // If the SVG string is not hard-coded, create the array here:
    // String[] toAppend = svgString.split(";");

    Runnable pathBuilder = () -> {
        try
        {
            StringBuilder path = new StringBuilder();

            for (String segment : toAppend)
            {
                Thread.sleep(100);

                path.append(" ").append(segment);
                String pathToDraw = path.toString();

                Platform.runLater(() -> {
                    playGraphics.beginPath();
                    playGraphics.appendSVGPath(pathToDraw);
                    playGraphics.stroke();
                });
            }
        }
        catch (InterruptedException e)
        {
            // Someone wants us to exit, so fall through and return.
            e.printStackTrace();
        }
    };

    Thread pathBuildingThread = new Thread(pathBuilder);
    pathBuildingThread.setDaemon(true);
    pathBuildingThread.start();
}