JavaFX Canvas：在另一个形状内专门绘制一个形状

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();

JavaFX Canvas：在另一个形状内专门绘制一个形状

JavaFX Canvas: Draw a shape exclusively within another shape

java

javafx

canvas

shapes

javafx-8