JavaFX Example Code | Carousel

간단한 이미지 회전목마

By Vaibhav Choudhary, October 22, 2008

JavaFX 기술은 당신의 간단한 그래픽 작업과 연동으로 커스터마이즈된 회전 목마를 쉽게 만들 수 있다(With the JavaFX technology it is easy to build your own customized carousel with a simple graphics operation and binding).

코드 이해

그림 1에서 보이는 코드는 회전 목마를 생성한다. 대부분이 그리기는 공통 속성들에 기반하고, 몇개의 설정들을 변경함으로 쉽게 커스터마이즈가 가능하게 한다.

소스 코드


package carousel;

import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import java.lang.Math;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.input.MouseEvent;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.effect.*;
import java.lang.System;

// these variable decide the position at the beginning
var y=0;
var speed=5;
var radius=100;
var xcenter=70;
var ycenter=50;
var zcenter=100;
var radius_y = 50;

var fl=100;      // used for scaling factor. Basically it will work like a camera at Z axis.
var shift = Math.PI/2;
var image_gap = Math.PI/3;  // placement of each image at PI/6 distance,because of 6 images.
var angle;
var angle_rad=angle*Math.PI/180;public class Carousel extends CustomNode {

    public var X: Number;
    public var Y: Number;
    public var Z: Number;
    public var image: Image;
    public var scale: Number;

    public override function create(): Node {
        System.out.println(image);
        return Group {
            content: [
                ImageView {
                x: bind X
                y: bind Y
                scaleX: bind scale
                scaleY: bind scale
                opacity: bind scale
                image: bind image
                }
            ]

        };
    }

    public function update(i:Number,angle: Number): Void {
        Z=Math.sin(angle + i*image_gap + shift) * radius + zcenter ;
        scale = fl / (fl + Z);
        X= Math.cos(angle + i*image_gap + shift) * radius + xcenter;
        Y= -Math.sin(angle + i*image_gap + shift) * radius_y + ycenter ;
     }
  }

그림 1: Carousel.fx Class

Main.fx의 dur 같은 데이터 요소를 변경함으로, 애니메이션을 더 느리게나 빠르게 할 수 있다.

소스 코드

var dur: Duration = 15ms;   // can control speed of rotation on by changing this variable.

그림 2: 애니메이션 변경

코드 커스터마이징

회전 목마를 더 커스터마이즈 하려면, 이미지 스트링 배열을 바꿈으로 100 X 100 픽셀의 가지고 있는 이미지를 사용 할 수 있다.

소스 코드

var im:String[] = ["{__DIR__}im1.PNG", "{__DIR__}im2.PNG","{__DIR__}im3.PNG",
    "{__DIR__}im4.PNG","{__DIR__}im5.PNG","{__DIR__}im6.PNG"];

그림 3은 회전 목마의 Main.fx 에서 속성이 바뀐 것을 보여준다

그림 3: 다른 이미지들을 사용한 회전 목마

FX

Profile

간단한 이미지 회전목마

코드 이해

코드 커스터마이징