JavaFX裁剪产生“彩票刮刮票”效果

我开始玩JavaFXGraphicsContext。特别是剪辑部分对我来说很有趣。JavaFX裁剪产生“彩票刮刮票”效果

所以我试图创建一些图形和为它创建剪贴蒙版（一个简单的矩形，其左右移动）

，但我注意到它的一些奇怪的行为（不知道这是一个错误，或由于不正确代码使用）

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

说明什么，我从我的代码预期：白色帆布与洋红色矩形文本，这是品红上述唯一可见的（虽然它横跨绘制）

其实这正是你所看到的第一！

当您移动应用程序窗口时，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(); 
    } 
}

来源

2017-10-20 lumo

你的问题是什么？ – Sedrick

显然这个问题是如何解决这个奇怪的行为，并得到该地区削减，这是谢谢你的MAGENTA – lumo

从documentation for restore()：

注意，电流通路不会恢复。

所以所有的gc.rect()调用你累积到一个单一的路径作为剪辑。

如果添加

gc.beginPath();

在if (clip)块的开始清路，你看到的行为，我认为你期待。

来源

2017-10-20 13:27:44

！实际上我认为在每次绘制之后路径都会被清除 - 并且不需要beginPath。 – lumo

JavaFX裁剪产生“彩票刮刮票”效果

回答

相关问题