在 JavaFX 中，如何将画布上的多个对象渐变填充为一个对象？

Question

我正在尝试绘制三个单独的圆角矩形，然后用线性渐变填充所有三个，但让渐变遍历所有三个对象。我似乎找不到关于将对象绘制到画布上并将它们链接在一起的任何信息。

一般来说，我对使用画布很陌生。

这是我目前所拥有的：

driver.switchTo().activeElement();

这使图像看起来像这样

但是，我需要它看起来像这样：

有没有办法在 JavaFX 中使用画布来完成此操作？

谢谢，

迈克·西姆斯

Answer 1

是的。有几种方法可以做到这一点。您可以将所有三个圆角矩形渲染为单个路径（使用路径渲染而不是 fillRoundedRect，例如 moveTo、arcTo 等），或者您可以将渲染混合模式更改为 SRC_ATOP 并在所有三个圆角矩形上绘制一个矩形。这就是我在下面的代码中所做的：

    final Canvas          canvas  = new Canvas(CANVAS_WIDTH, CANVAS_HEIGHT);
    final GraphicsContext gc      = canvas.getGraphicsContext2D();
    double                offset1 = .5;
    double                offset2 = .9;
    Color                 color1  = Color.rgb(0,0,255);
    Color                 color2  = Color.rgb(0,200,255);
    Stop[]                stops1  = new Stop[] {new Stop(offset1, color1), new Stop(offset2, color2)};
    double third = CANVAS_HEIGHT / 3.0;
    double thirdM2 = third - 10;
    double h2 = CANVAS_HEIGHT - (2 * third);
    double h3 = CANVAS_HEIGHT - third;

    gc.fillRoundRect(0,0,CANVAS_WIDTH,thirdM2,thirdM2,thirdM2);
    gc.fillRoundRect(0,h2,CANVAS_WIDTH,thirdM2,thirdM2,thirdM2);
    gc.fillRoundRect(0,h3,CANVAS_WIDTH,thirdM2,thirdM2,thirdM2);

    gc.setGlobalBlendMode(BlendMode.SRC_ATOP); // preserves the alpha channel set above

    gc.setFill(new LinearGradient(0, 0, .6, .5, true, CycleMethod.NO_CYCLE, stops1));
    gc.fillRect(0, 0, CANVAS_WIDTH, h3+thirdM2);

如果您不想直接在画布上乱涂乱画（因为可能有其他元素妨碍了您的绘画），您可以对可写图像执行此技巧，然后将其标记到画布上。