JavaFX 圆形镂空

Question

我正在开发一个 JavaFX 桌面应用程序，我想在另一个面板上覆盖一个圆形视口(viewport)。

这是一个非常简单的图像，描绘了我想要的东西，白色区域将是透明的并显示底层面板。黑色区域将是纯色并防止鼠标事件在底层面板上触发。

我研究过使用带有事件监听器的 Canvas 忽略圆圈半径内的所有事件，但我想知道是否有更有效/更简单的方法来做到这一点？

提前致谢。

Answer 1

在 clip property 上设置适当的 Shape前面的节点。

clip 属性中的 Javadoc:

Specifies a Node to use to define the the clipping shape for this Node. This clipping Node is not a child of this Node in the scene graph sense. Rather, it is used to define the clip for this Node.

For example, you can use an ImageView Node as a mask to represent the Clip. Or you could use one of the geometric shape Nodes such as Rectangle or Circle. Or you could use a Text node to represent the Clip.

See the class documentation for Node for scene graph structure restrictions on setting the clip. If these restrictions are violated by a change to the clip variable, the change is ignored and the previous value of the clip variable is restored.

Note that this is a conditional feature. See ConditionalFeature.SHAPE_CLIP for more information.

There is a known limitation of mixing Clip with a 3D Transform. Clipping is essentially a 2D image operation. The result of a Clip set on a Group node with 3D transformed children will cause its children to be rendered in order without Z-buffering applied between those children.

无论如何，您可以使用与节点 大小相同的Rectangle。然后，创建一个以 Rectangle 为中心并具有所需半径的 Circle。使用 Shape.subtract(rectangle, circle); 从这两个形状创建一个新形状。这将在 Rectangle 的中间创建一个“洞”，它将显示任何底层 Node。

代码示例:

private void setClipViewport(Region region) {
    int width = region.getWidth();
    int height = region.getHeight();

    Rectangle rect = new Rectangle(0, 0, width, height);
    Circle circ = new Circle(width / 2, height / 2, Math.min(width, height) / 2);

    Shape clip = Shape.subtract(rect, circ);

    region.setClip(clip);
}

但是，我的示例不会在必要时调整剪辑的大小。因此，如果您的 UI 可以调整大小，您将需要添加该行为。