JavaFX Example Code | PhotoEffects

Using the ColorAdjust Effect

By Josh Marinacci, October 15, 2008

JavaFX는 ColorAdjust 효과로 여러분이 사진의 밝기(brightness), 명암(contrast), 그리고 채도(saturation)을 매우 쉽게 수정할수 있도록 해줍니다.

코드 이해하기

이 예제의 핵심은 ColorAdjust 클래스 입니다. 이것은 여러분이 놓은 노드가 무엇이든 그것의 밝기, 명암, 그리고 채도를 수정하는 효과 입니다. 여러분은 어떠한 종류의 노드에라도 그것을 덧붙일수 있습니다만 ColorAdjust는 ImageView들과 함께 덧붙일때 가장 유용합니다. ColorAdjust는 여러분이 바라는 것을 정확하게 하고 효과를 적용할 이미지의 feature들을 제어하는 brightness, contrast, 그리고 saturation라고 불리는 공용 변수를 가지고 있습니다.

이 예를 들어 세개의 모델 변수들은 brightness, contrast, 그리고 saturation라고 불리는 것들에 의해서 생성되었습니다.(Figure 1).

Source Code

var brightness = 0.0;
var contrast = 1.0;
var saturation = 0.0;

Figure 1: Model Variables

각 제어를 위한 슬라이더들은 Figure 2의 with inverse 키워드들을 사용하는 세개의 모델 변수들에 결정됩니다.

Source Code

        Group {
            content:[
                ImageView { x: gap y: 50 image: Image { url:"{__DIR__}images/headerM.png" } }
                ImageView { x: gap+226-1 y: 50 image: Image { url:"{__DIR__}images/headerM.png" } }
                ImageView { x: gap+226+48 y: 50 image: Image { url:"{__DIR__}images/headerM.png" } }

                CustomSlider {translateX: 30  translateY: 90
                    value: bind brightness with inverse
                    minValue: -1.0
                    maxValue: 1.0
                    minButtonImage: Image { url: "{__DIR__}images/bl.png" }
                    maxButtonImage: Image { url: "{__DIR__}images/bh.png" }
                },
                Text { translateX: 60  translateY: 120 content: "Brightness" fill: TEXT_COLOR },
                CustomSlider {translateX: 190 translateY: 90 
                    value: bind contrast with inverse
                    minValue: 0.25
                    maxValue: 4
                    minButtonImage: Image { url: "{__DIR__}images/cl.png" }
                    maxButtonImage: Image { url: "{__DIR__}images/ch.png" }
                },
                Text { translateX: 220 translateY: 120 content: "Contrast" fill: TEXT_COLOR },
                CustomSlider {translateX: 350 translateY: 90
                    value: bind saturation with inverse
                    minValue: -1.0
                    maxValue:  1.0
                    minButtonImage: Image { url: "{__DIR__}images/sl.png" }
                    maxButtonImage: Image { url: "{__DIR__}images/sh.png" }
                },
                Text { translateX: 380 translateY: 120 content: "Saturation" fill: TEXT_COLOR },
            ]
        },

Figure 2: Model에 슬라이더 바인드하기

마지막으로 ColorAdjust 객체는 earth의 ImageView위에 효과로서 배치됩니다. ColorAdjust의 brightness, contrast, 그리고 saturation 는 모델 변수들을 결정 합니다(Figure 3). 이 방법으로 사용자에 의해서 슬라이더들을 움직일때 ColorAdjust의 값을 변경하는 모델 변수들이 변경됩니다. 단순한 바인딩으로 여러분은 완벽한 사용자 인터페이스를 만들수 있습니다.

Source Code

        ImageView {
            translateX: gap
            translateY: 180
            image: Image { url: "{__DIR__}giraffe.jpg" }
            effect: ColorAdjust {
                brightness: bind brightness
                contrast: bind contrast
                saturation: bind saturation
            }
        },

Figure 3: Binding the ColorAdjust

FX

Profile

Using the ColorAdjust Effect

코드 이해하기