Chris CampbellStaff Engineer,
Sun Microsystems
Effects Playground: Graphics에 필터 효과 적용하기
JavaFX는 블러, 그림자, 색상 조정, 휨, 기타등등을 포함한 풍부한 필터 효과를 제공합니다. 이 샘플은 여러분의 scene 그래프 노드들에 이러한 효과들을 적용하고 그 세팅들을 다이나믹하게 조정하는 것이 얼마나 쉬운지 보여줍니다.
Run Example with Java Webstart
Understanding the Code
javafx.scene.effect 패키지는 모두 Effect 라고 불려지는 공동기반 클래스에서 파생된 GaussianBlur와 DropShadow 같이 일반적으로 사용되는 많은 수의 필터효과를 포함하고 있습니다. 어떤 그래픽적인 Node 라도 단순하게 Node.effect를 세팅함으로써 한가지 혹은 그 이상 Effect들을 적용시킬수 있습니다.
예를 들어 Figure 1에서 처럼 원형 노드에 drop shadow 효과를 주는 것은 매우 쉽습니다.
Circle {
centerX: 50
centerY: 50
radius: 25
effect: DropShadow { offsetX: 3 offsetY: 3 }
}
Figure 1: Node에 Effect 적용하기
이 예제 어플리케이션은 12가지 다른 Effect 설정들을 보여줍니다. 구현을 간단하게 하기 위해서는 EffectControl라고 불리는 클래스가 현재 이미지의 썸네일 뷰, Stage의 상단 부분의 표시되는 이미지의 좀더 큰 뷰, 그리고 이러한 뷰들에게 적용되는 Effect를 배치시키기 위해서 생성됩니다. Figure 2는 이러한 뷰들을 보여줍니다.
package class EffectControl {
public var previewNode:Preview;
public var controlsGroup:Node;
public var canvasEffect:Effect;
public var canvasImage:Node = ImageView {
effect: bind canvasEffect
image: bind Main.fgImage
};
public var thumbEffect:Effect;
public var thumbImage:Node = ImageView {
effect: bind thumbEffect
image: bind Main.fgThumb
}
}
Figure 2: Effect bind하기
게다가 각 하위 클래스들은 Effect의 다양한 속성들을 다루는 슬라이더와 놉(knob) 같은 제어 그룹들을 제공합니다. 예를 들어 Figure 3 에서 코드 조각들은 썸네일 뷰에 "정적인" MotionBlur 효과를 어떻게 적용하는지 또 어떻게 주요 캔버스 이미지에 적용된 좀더 "극적인" MotionBlur 효과를 제어해야 하는지 보여줍니다.
package class MotionBlurControl extends EffectControl {
var slider:LabeledSlider;
var knob:LabeledKnob;
override public var canvasEffect = MotionBlur {
radius: bind if (slider.value < 1) 1 else slider.value
angle: bind knob.value
};
override public var thumbEffect = MotionBlur { radius: 5 angle: 45 };
override public var controlsGroup = Group {
content: [
slider = LabeledSlider {
translateX: 15
translateY: 22
text: "Radius"
minimum: 1
maximum: 63
value: 10
padding: 90
},
knob = LabeledKnob {
translateX: 320
translateY: 20
text: "Angle"
minimum: -90.0
maximum: 90.0
value: 45.0
minAngle: -90.0
maxAngle: 90.0
}
]
};
}
Figure 3: Slider와 Knob 제어에 MotionBlur 변수 바인딩하기
제어가 제공하는 몇몇의 extra들이 "마법의" bind 키워드에 감사한다는걸 주목하세요. 언제라도 슬라이더 thumb이 이동됐거나 놉(knob) 제어가 설정되면 MotionBlur 인스턴스는 자동으로 변경되고 그리고 첨부되었던 ImageView 또한 자동으로 다시 채색됩니다.JavaFX 런타임 백-엔드 프로세스는 여러분을 위해서 수정된 어떤 노드라도 적당한 간격에 효과적으로 다시 채색하는것과 같이 지겹도록 세세한 부분까지 정성을 들이고 있습니다.
별도로 여러분은 effectsplayground.control 패키지에서 Slider, Knob, Label, 그리고 RadioButton와 같은 다수의 bare-bones 사용자 인터페이스를 이 에제가 포함하고 있다는 것에 주목해도 좋습니다. JavaFX 1.0 릴리즈는 "common" 프로파일(TextBox) 단지 하나의 제어만들 포함하고 있습니다만 다음 릴리즈에서 좀더 많은 것을 포함할 것입니다. 훗날 언젠가 이 에제는 여기에 포함된 손으로 만든 제어를 대신해 새로운 공통 제어를 사용하기 위해서 변경 될지도 모릅니다.