JavaFX - 绕特定 X 和 Y 轴旋转画布

Question

我正在尝试使用SVGPath在画布上绘制飞机，并根据位置和角度的输入移动它。我已经成功地绘制了飞机，并根据其位置在屏幕上正确地移动它，但是我无法弄清楚如何根据角度正确旋转飞机。

这是我的代码，请注意我用一个按钮测试了不同的角度，但飞机仍然保持不变：

public void redraw() {
    GraphicsContext gc = getGraphicsContext2D();
    String path = new String("M 323.193 226.645 c 39.244 24.41 75.644 47.053 115.706 71.978 c 7.687 -5.443 20.518 -14.485 33.308 -23.596 c 16.733 -11.923 36.27 -11.452 49.046 3.779 c 3.513 4.191 2.568 15.766 -0.705 21.426 c -23.705 40.994 -48.427 81.404 -73.095 121.833 c -4.729 7.745 -9.06 19.278 -21.177 13.509 c -12.203 -5.8 -28.746 -9.521 -27.842 -28.026 c 0.891 -18.185 3.495 -36.292 4.924 -50.249 c -40.704 -19.793 -79.74 -38.778 -119.825 -58.269 c -16.168 17.561 -22.275 40.532 -27.606 64.119 c -8.975 39.719 -18.474 79.324 -28.171 118.881 c -5.593 22.809 -12.452 26.109 -34.167 17.908 c -28.122 -10.606 -31.047 -14.689 -31.318 -45.384 c -0.605 -68.198 -1.514 -136.4 -1.325 -204.593 c 0.045 -15.865 -4.177 -25.531 -19.237 -32.95 c -30.238 -14.884 -60.119 -30.866 -88.548 -48.915 c -13.988 -8.884 -26.951 -21.77 -35.867 -35.727 C 3.526 110.834 15.381 90.43 40.637 91.746 c 17.786 0.931 36.644 4.67 52.618 12.229 c 32.58 15.413 63.735 33.905 95.022 51.921 c 8.735 5.028 15.083 4.992 23.944 0.068 c 64.671 -35.921 129.717 -71.172 194.611 -106.705 c 25.712 -14.075 46.608 -10.335 65.331 12.008 c 10.309 12.302 2.247 20.797 -6.506 28.579 c -35.89 31.91 -72.438 63.093 -107.682 95.687 C 344.877 197.641 334.677 212.878 323.193 226.645 Z");
    double wid = getWidth()/247;
    double hei = getHeight()/152;
    if(!isFirst) {
        gc.scale(50,50);
        gc.rotate(360-lastRotate);
        setTranslateX(-(lastX-48));
        setTranslateY(-(lastY-72));
        gc.setFill(Color.BLACK);
        gc.fill();
    }


    gc.clearRect(0, 0, getWidth(), getHeight());    
    if(!isFirst) {
        setTranslateX(x-48);
        setTranslateY(y-72);
    }
    gc.translate(wid*x, hei*y);
    gc.scale(0.02,0.02);    
    gc.rotate(rotate);
    gc.appendSVGPath(path);
    gc.setFill(Color.BLACK);
    gc.fill();

    gc.stroke();
    isFirst = false;
}

如果我将它改为这样，那么飞机会旋转，但也会移动（可能是因为旋转的中心），这是不希望发生的。任何帮助都将不胜感激：

            if(!isFirst) {
        gc.scale(50,50);
        //gc.rotate(360-lastRotate);
        setTranslateX(-(lastX-48));
        setTranslateY(-(lastY-72));
        gc.setFill(Color.BLACK);
        gc.fill();
    }


    gc.clearRect(0, 0, getWidth(), getHeight());    
    if(!isFirst) {
        setTranslateX(x-48);
        setTranslateY(y-72);
    }
    gc.translate(wid*x, hei*y);
    gc.scale(0.02,0.02);    
    if(isFirst)
        gc.rotate(rotate);
    else
        setRotate(rotate);
    gc.appendSVGPath(path);
    gc.setFill(Color.BLACK);
    gc.fill();

    gc.stroke();

- user11528353

Answer 1

我不建议手动应用逆变换来撤销转换。除了使代码难以阅读外，还可能存在舍入误差，这些误差会随着时间的推移而累积。相反，在绘制完成后，请使用save和restore来删除变换。

至于确定带有枢轴点的变换：我建议使用Rotate来实现此目的。

顺便说一下：除非您确定绝对必要，否则不要使用带有String参数的String构造函数。直接使用作为参数传递的表达式即可。

private double rotate;
private double x;
private double y;
private final Rotate rot = new Rotate(0, 50, 50); // modify the last 2 parameters to change the pivot point

public void redraw() {
    GraphicsContext gc = getGraphicsContext2D();
    String path = "M 323.193 226.645 c 39.244 24.41 75.644 47.053 115.706 71.978 c 7.687 -5.443 20.518 -14.485 33.308 -23.596 c 16.733 -11.923 36.27 -11.452 49.046 3.779 c 3.513 4.191 2.568 15.766 -0.705 21.426 c -23.705 40.994 -48.427 81.404 -73.095 121.833 c -4.729 7.745 -9.06 19.278 -21.177 13.509 c -12.203 -5.8 -28.746 -9.521 -27.842 -28.026 c 0.891 -18.185 3.495 -36.292 4.924 -50.249 c -40.704 -19.793 -79.74 -38.778 -119.825 -58.269 c -16.168 17.561 -22.275 40.532 -27.606 64.119 c -8.975 39.719 -18.474 79.324 -28.171 118.881 c -5.593 22.809 -12.452 26.109 -34.167 17.908 c -28.122 -10.606 -31.047 -14.689 -31.318 -45.384 c -0.605 -68.198 -1.514 -136.4 -1.325 -204.593 c 0.045 -15.865 -4.177 -25.531 -19.237 -32.95 c -30.238 -14.884 -60.119 -30.866 -88.548 -48.915 c -13.988 -8.884 -26.951 -21.77 -35.867 -35.727 C 3.526 110.834 15.381 90.43 40.637 91.746 c 17.786 0.931 36.644 4.67 52.618 12.229 c 32.58 15.413 63.735 33.905 95.022 51.921 c 8.735 5.028 15.083 4.992 23.944 0.068 c 64.671 -35.921 129.717 -71.172 194.611 -106.705 c 25.712 -14.075 46.608 -10.335 65.331 12.008 c 10.309 12.302 2.247 20.797 -6.506 28.579 c -35.89 31.91 -72.438 63.093 -107.682 95.687 C 344.877 197.641 334.677 212.878 323.193 226.645 Z";

    gc.clearRect(0, 0, getWidth(), getHeight());

    gc.save();

    gc.translate(x, y);
    gc.scale(0.02, 0.02);

    rot.setAngle(rotate);
    gc.transform(rot.getMxx(), rot.getMyx(), rot.getMxy(), rot.getMyy(), rot.getTx(), rot.getTy());

    gc.setFill(Color.BLACK);
    gc.beginPath();
    gc.appendSVGPath(path);
    gc.fill();
    gc.stroke();

    gc.restore(); // clear tranformation
}

- fabian