JavaFX Canvas : Draw a shape exclusively within another shape

Question

我目前正在用 Java 开发一款游戏，我一直在尝试弄清楚如何在 Canvas 上绘制一个形状(例如圆形)，在不同的形状(例如正方形)之上，但是只绘制与正方形相交的圆的部分，类似于 Photoshop 中图层之间的剪贴蒙版。

我试过使用 GraphicsContext.clearRect()清除底部形状不存在的区域，但会删除背景。

下面的代码产生了这样的结果:

然而，这是我想要的结果:

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

public class CircleWithinSquareTest extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        int width = 200;
        int height = 200;
        Canvas canvas = new Canvas(width, height);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        AnimationTimer timer = new AnimationTimer() {
            final int bgCellSize = 8;
            final int x = 100;
            final int y = 100;
            double angle = 0;

            @Override
            public void handle(long now) {
                /* Draw checkered background */
                gc.setFill(Color.WHITE);
                gc.fillRect(0, 0, width, height);
                gc.setFill(Color.LIGHTGRAY);
                boolean odd = false;
                for (int y = 0; y < height; y += bgCellSize) {
                    odd = !odd;
                    for (int x = odd ? 0 : bgCellSize; x < width; x += bgCellSize * 2) {
                        gc.fillRect(x, y, bgCellSize, bgCellSize);
                    }
                }
                /* Draw square */
                gc.setFill(Color.BLUE);
                gc.fillRect(x, y, 50, 50);
                /* Draw circle */
                gc.save();
                angle += 5;
                if (angle >= 360) {
                    angle = 0;
                }
                Rotate r = new Rotate(angle, x, y);
                gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
                gc.setFill(Color.RED);
                gc.fillOval(x, y, 30, 30);
                gc.restore();
            }
        };
        timer.start();

        Group root = new Group(canvas);
        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }
}

Answer 1

您可以使用 clipping , 在 setTransform 之前添加下一段代码:

gc.beginPath();
gc.rect(x, y, 50, 50);
gc.closePath();
gc.clip();