Kenji Tachibana's Weblog

翻訳: イメージの奥行き

Vaibhav's Blog Space より、イメージの z 座標 (奥行き) についての blog の翻訳です。

While writing some of the samples in which we have to play with images, we sometimes has to manage the depth of the images. Like for the Carousel example, every image has a depth. In that example, actually images are not overlapping with each other, so we never need to write the Z-Order concept. But if someone want to write a Carousel or some application in which Images are residing over other images, we need to set the Z-order of Images. Z-Order in literal term means depth-ness of images. JavaFX gracefully provide API's to set the Z-order of images. With a simple call, you can set the images toFront or toBack features.
----------------
イメージを使ったサンプルをいくつ書いていると、イメージの「奥行き」を考慮したくなるときがあります。たとえば、 回転木馬 のサンプルの場合、すべてのイメージは、「奥行き」を持っています。ただ、この例の場合は、イメージ同士が重なりあうことがないので、Z 軸に関してプログラムを書く必要がありませんでした。もし、この回転木馬の例で、または、ほかのアプリケーションで、イメージが重なりあうようなものを作りたい場合には、Z 軸の位置を指定する必要があります。toFront または toBack　関数を使うだけで、簡単に指定できます。

In this example, I have taken 3 images and try to set the depth-ness of images on the event of Buttons.
------------
この例では、ボタンのイベントを使って、３つのイメージに「奥行き」を設定しています。

                 最初のイメージが上                            ２番目のイメージが上

      ３番目のイメージが上

Here is the code to set the Z-Order :
---------------
以下がコードになります。

package zorder;

import javafx.scene.Group;

import javafx.scene.image.Image;

import javafx.scene.image.ImageView;

import javafx.scene.paint.Color;

import javafx.scene.Scene;

import javafx.stage.Stage;

import javafx.scene.shape.Rectangle;

import javafx.scene.input.MouseEvent;

import javafx.ext.swing.SwingButton;

var im1 = ImageView {

    x: 100

    y: 100

    image: Image {

        url: "{__DIR__}im1.PNG"

    }

    opacity: 0.8

        };

var im2 = ImageView {

    x: 130

    y: 130

    image: Image {

        url: "{__DIR__}im2.PNG"

    }

    opacity: 0.8

        };

var im3 = ImageView {

    x: 160

    y: 160

    image: Image {

        url: "{__DIR__}im3.PNG"

    }

    opacity: 0.8

        };

var gp = Group {

    content:[

        im1, im2,im3

    ]

}

Stage {

    title: "Application title"

    width: 400

    height: 400

    scene: Scene {

        fill: Color.BLACK

        content: [

            gp,

            SwingButton {

                translateX: 10

                translateY: 10

                text: "Image 1"

                action: function() {

                    im1.toFront();

                }

            }

            SwingButton {

                translateX: 90

                translateY: 10

                text: "Image 2"

                action: function() {

                    im2.toFront();

                }

            }

            SwingButton {

                translateX: 170

                translateY: 10

                text: "Image 3"

                action: function() {

                    im3.toFront();

                }

            }

        ]

    }

}

Posted at 10:53午後 1 07, 2009 by kenji in JavaFX の素人  |  投稿されたコメント[2]