ドキュメント



JavaFX: 変換、アニメーションおよび視覚効果

2 変換のタイプと例

このドキュメントでは、特定の変換について説明し、コード例を示します。

平行移動

平行移動変換では、初期の位置に対して相対的な軸の1つに沿ってノードを1つの場所から別の場所に移動します。木琴のバーの初期の位置は、x、yおよびz座標によって定義されます。例2-1では、初期の位置はxStartyPosおよびzPos変数によって指定されています。他の変数は、様々な変換の適用時に計算を簡略化するために追加されています。木琴のそれぞれのバーは、基本バーの1つに基づいています。この例では、3つの軸に沿った各種シフトによって基本バーを平行移動し、これらを正しい位置に配置しています。

例2-1に、平行移動変換が適用されたサンプル・アプリケーションのコード・スニペットを示します。

例2-1 平行移動

Group rectangleGroup = new Group();
        rectangleGroup.setDepthTest(DepthTest.ENABLE);
 
        double xStart = 260.0;
        double xOffset = 30.0;
        double yPos = 300.0;
        double zPos = 0.0;
        double barWidth = 22.0;
        double barDepth = 7.0;
 
        // Base1
        Cube base1Cube = new Cube(1.0, new Color(0.2, 0.12, 0.1, 1.0), 1.0);
        base1Cube.setTranslateX(xStart + 135);
        base1Cube.setTranslateZ(yPos+20.0);
        base1Cube.setTranslateY(11.0);

回転

回転変換では、指定したシーンのピボット・ポイントの周りでノードを移動します。Transformクラスのrotateメソッドを使用して、回転を実行できます。

サンプル・アプリケーション内の木琴の周りでカメラを回転するには、回転変換を使用しますが、技術的には、マウスによってカメラを回転するときに移動するのは木琴自体です。

例2-2に、回転変換のソース・コードを示します。

例2-2 回転

class Cam extends Group {
        Translate t  = new Translate();
        Translate p  = new Translate();
        Translate ip = new Translate();
        Rotate rx = new Rotate();
        { rx.setAxis(Rotate.X_AXIS); }
        Rotate ry = new Rotate();
        { ry.setAxis(Rotate.Y_AXIS); }
        Rotate rz = new Rotate();
        { rz.setAxis(Rotate.Z_AXIS); }
        Scale s = new Scale();
        public Cam() { super(); getTransforms().addAll(t, p, rx, rz, ry, s, ip); }
    }
...
        scene.setOnMouseDragged(new EventHandler<MouseEvent>() {
            public void handle(MouseEvent me) {
                mouseOldX = mousePosX;
                mouseOldY = mousePosY;
                mousePosX = me.getX();
                mousePosY = me.getY();
                mouseDeltaX = mousePosX - mouseOldX;
                mouseDeltaY = mousePosY - mouseOldY;
                if (me.isAltDown() && me.isShiftDown() && me.isPrimaryButtonDown()) {
                    cam.rz.setAngle(cam.rz.getAngle() - mouseDeltaX);
                }
                else if (me.isAltDown() && me.isPrimaryButtonDown()) {
                    cam.ry.setAngle(cam.ry.getAngle() - mouseDeltaX);
                    cam.rx.setAngle(cam.rx.getAngle() + mouseDeltaY);
                }
                else if (me.isAltDown() && me.isSecondaryButtonDown()) {
                    double scale = cam.s.getX();
                    double newScale = scale + mouseDeltaX*0.01;
                    cam.s.setX(newScale); cam.s.setY(newScale); cam.s.setZ(newScale);
                }
                else if (me.isAltDown() && me.isMiddleButtonDown()) {
                    cam.t.setX(cam.t.getX() + mouseDeltaX);
                    cam.t.setY(cam.t.getY() + mouseDeltaY);
                }
            }
        });

ピボット・ポイントと角度によってイメージの移動先の宛先ポイントが定義されることに注意してください。ピボット・ポイントを指定する場合は値を慎重に計算してください。そうでない場合は、イメージが目的とは異なる場所に表示される可能性があります。詳細は、APIドキュメントを参照してください。

スケーリング

スケーリング変換では、スケーリング係数に応じてノードが大きくなったり小さくなります。スケーリングでは、軸に沿った次元にスケーリング係数を乗じてノードを変更します。回転変換の場合と同様、スケーリング変換はピボット・ポイントで適用されます。このピボット・ポイントが、スケーリングが行われるポイントとみなされます。

スケーリングを行うには、Scaleクラス、およびTransformクラスのscaleメソッドを使用します。

木琴アプリケーションでは、[Alt]キーと右マウス・ボタンを押しながらマウスを使用することにより、木琴をスケーリングできます。スケール変換を使用してスケーリングを確認します。

例2-3に、スケール変換のソース・コードを示します。

例2-3 スケーリング

else if (me.isAltDown() && me.isSecondaryButtonDown()) {
          double scale = cam.s.getX();
          double newScale = scale + mouseDeltaX*0.01;
          cam.s.setX(newScale); cam.s.setY(newScale); cam.s.setZ(newScale);
                }
...

変形

変形変換では、1つの軸を回転してx軸とy軸が垂直にならないようにします。ノードの座標は、指定した乗数によってシフトされます。

変形を行うには、Shearクラス、またはTransformクラスのshearメソッドを使用します。

木琴アプリケーションでは、[Shift]キーと左マウス・ボタンを長押ししながらマウスをドラッグすることにより、木琴を変形できます。

例2-4に、変形変換のコード・スニペットを示します。

例2-4 変形

else if (me.isShiftDown() && me.isPrimaryButtonDown()) {
    double yShear = shear.getY();
    shear.setY(yShear + mouseDeltaY/1000.0);
    double xShear = shear.getX();
    shear.setX(xShear + mouseDeltaX/1000.0);
}

複数の変換

順序付けられた変換の連鎖を指定することにより、複数の変換を作成できます。たとえば、オブジェクトをスケーリングしてから変形変換を適用したり、オブジェクトを平行移動してからスケーリングできます。

例2-5に、木琴バーを作成するためにオブジェクトに適用された複数の変換を示しています。

例2-5 複数の変換

Cube base1Cube = new Cube(1.0, new Color(0.2, 0.12, 0.1, 1.0), 1.0);
        base1Cube.setTranslateX(xStart + 135);
        base1Cube.setTranslateZ(yPos+20.0);
        base1Cube.setTranslateY(11.0);
        base1Cube.setScaleX(barWidth*11.5);
        base1Cube.setScaleZ(10.0);
        base1Cube.setScaleY(barDepth*2.0);

アプリケーション・ファイル

ソース・コード 

NetBeansプロジェクト

ウィンドウを閉じる

目次

JavaFX: 変換、アニメーションおよび視覚効果

展開 | 縮小