翻訳: イメージの奥行き

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.
------------
この例では、ボタンのイベントを使って、3つのイメージに「奥行き」を設定しています。


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


      3番目のイメージが上

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

投稿されたコメント:

depth は「深さ」よりも「奥行き」の方がいいのではないでしょうか。3D CG の世界でも depth は奥行きと訳す場合が多いような気がするので。

Posted by さくらば on 1月月 08日, 2009年 at 06:43 午前 JST #

コメントありがとうございます。その通りですね。訳しても、「しっくりこないなー」と思ってはいたのですが。さっそく、修正しておきます。ありがとうございました!

Posted by Kenji Tachibana on 1月月 09日, 2009年 at 05:53 午後 JST #

コメント
コメントは無効になっています。
About

kenji

Search

Archives
« 4月 2014
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
今日