JavaFX 예제 코드 | 베이저

베이저 곡선 애니메이션

By Alexey Ushakov, 2008년 11월 14일

JavaFX는 단순하고 고풍적인 다양한 그래픽을 지원하는 기초적인 Java 2D API를 제공함으로써 포괄적인 렌더링 능력을 갖추고 있다. 예를 들어 3차, 2차 베이저 곡선은 어플리케이션 화면에 쉽게 적용될 수 있다. JavaFX has comprehensive rendering capabilities provided by the underlying Java 2D API, including support for a wide variety of graphics primitives. For example, cubic and quadratic bezier curves can be easily included in the application scene.

소스 코드 이해하기

2,3차 베이저 곡선은 JavaFX가 갖는 유연성과 JavaFX가 제공하는 부드러움 면에 있어서 다르다. 2차 곡선은 시각적으로 더 멋스러운 것에 비해 3차 곡선은 더 높은 성능을 제공한다. 곡선은 2개의 기준점과 1개의 기준점을 갖는다. 곡선은 그림 1에서 보는 것처럼 설정되어진다. Cubic and quadratic bezier curves differ by the smoothness they provide and the flexibility they have. The cubic curve is more visually appealing, whereas the quadratic curve provides better performance. The curves have two control points and one control point, respectively. The curves can be set up as shown in Figure 1.

Source Code

...
    SwingComboBoxItem {
        text: "CubicCurve"
        selected: true
        value: CubicCurve {
            startX : bind p[0] startY : bind p[1]
            controlX1 : bind p[2] controlY1 : bind p[3]
            controlX2 : bind p[4] controlY2 : bind p[5]
            endX : bind p[6] endY : bind p[7]
            stroke: bind strokeColor fill: bind fillColor
            strokeWidth: bind strokeWidth.value
            strokeDashArray: bind 
                strokeDashFld.selectedItem.value as Number []
            strokeLineCap: bind
                strokeLineCapFld.selectedItem.value as StrokeLineCap
        };
    }, 
    SwingComboBoxItem {
            text: "QuadCurve"
            value: QuadCurve {
                startX : bind p[0] startY : bind p[1]
                controlX : bind p[2] controlY : bind p[3]
                endX : bind p[4] endY : bind p[5]
                stroke: bind strokeColor fill: bind fillColor
                strokeWidth: bind strokeWidth.value
                strokeDashArray: bind 
                    strokeDashFld.selectedItem.value as Number []
                strokeLineCap: bind
                    strokeLineCapFld.selectedItem.value as StrokeLineCap
            };

    }, 
...

그림 1: 베이저 곡선 세팅하기

그림 1, 2에서 보여지는 것처럼 javafx.animation.Timeline를 사용하는 것과 컨트롤 포인트에 바인딩함으로써 기본적인 그래픽에 애니메이션을 쉽게 추가한다. It is easy to add animation to the graphics primitives by using javafx.animation.Timeline and binding it to the control points, as shown in Figure 1 and Figure 2.

Source Code


...
var clip = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: 
        KeyFrame {
            time: 40ms
            action: function () : Void {
                for (i in [0..7][n | indexof n < nCoords]) {
                    var np = p[i] + v[i];
                    if (((i mod 2) == 0 and (np > w-r or np < r)) or
                        ((i mod 2) == 1 and (np > h-r or np < r))) {
                        v[i] = -v[i]
                    }
                    p[i] += v[i];
                }
            }
        }
}
...

그림 2: 애니메이션 추가하기

FX

작성자 소개

베이저 곡선 애니메이션

소스 코드 이해하기