JavaFX剪辑产生"彩票刮刮乐票"效果

Question

我开始玩JavaFXGraphicsContext。特别是剪辑部分对我来说很有趣。

所以我试着创建一些图形，并为它创建一个剪切掩码(一个简单的矩形，可以四处移动)

但我注意到它有一些奇怪的行为(不确定这是一个错误还是由于错误的代码使用)

下面您可以找到一个示例应用程序来显示这个问题。

描述我对代码的期望：白色画布，带MAGENTA矩形，带文本，仅在品红色上方可见(尽管它是在上绘制的)

实际上，这正是您首先看到的！

移动"应用程序"窗口时，MAGENTA矩形会四处移动(如预期)！但是ANTIQUEWHITE填充变得可见(这是我从未预料到的)，任何曾经被MAGENTA覆盖的区域现在都可见(没有剪裁)

ANTIQUEWHITE和MAGENTA的东西，用来让事情变得更明显。由于整个画布在一开始就被清除了，并且只完成了一次剪裁，所以重新绘制(或在旧图纸上绘制)应该不会有问题

启动应用程序并移动它以查看"彩票刮刮票"效果

public class ClippingExampleApp extends Application {
private boolean clip = true;
private static Bounds clippingArea = new BoundingBox(100, 50, 300, 300);
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Clipping Test App");
primaryStage.setX(100);
primaryStage.setY(50);
Group root = new Group();
Canvas canvas = new Canvas(640, 480);
root.getChildren().add(canvas);
primaryStage.setScene(new Scene(root));
ChangeListener<Number> updateBounds = new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
clippingArea = new BoundingBox(primaryStage.getX(), primaryStage.getY(), 300, 300);
draw(canvas, clip);
}
};
primaryStage.yProperty().addListener(updateBounds);
primaryStage.xProperty().addListener(updateBounds);
primaryStage.widthProperty().addListener(updateBounds);
primaryStage.heightProperty().addListener(updateBounds);
primaryStage.show();
clippingArea = new BoundingBox(primaryStage.getX(), primaryStage.getY(), 300, 300);
draw(canvas, clip);
}
private static void draw(Canvas canvas, boolean clip) {
GraphicsContext gc = canvas.getGraphicsContext2D();
// CLEAR THE COMPLETE CANVAS
gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
gc.save();
if (clip) {
// clipping rect
gc.rect(clippingArea.getMinX(), clippingArea.getMinY(), clippingArea.getWidth(), clippingArea.getHeight());
gc.clip();
// fill the whole background (this should only affect the clipped
// area 
gc.setFill(Color.ANTIQUEWHITE);
gc.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
// this should overlap the Color.ANTIQUEWHITE - so no ANTIQUEWHITE is visible
gc.setFill(Color.MAGENTA);
gc.fillRect(clippingArea.getMinX(), clippingArea.getMinY(), clippingArea.getWidth(), clippingArea.getHeight());
// finally fill the text, which sould only be visible where the magenta rect is...
String text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.";
gc.setFill(Color.BLACK);
gc.fillText(text, 50, 100);
}
gc.restore();
}
}

Answer 1

来自restore():的文档

请注意，当前路径不会恢复。

因此，您进行的所有gc.rect()调用都会累积到用作剪辑的单个路径中。

如果添加

gc.beginPath();

为了清除if (clip)块开头的路径，您可以看到我认为您所期望的行为。