Sun Developer Network 공식 블로그

이 작은 프로그램을 사용하여 창에서 마우스로 그림을 그릴 수 있습니다. 모든 기능을 갖춘 편집기는 아니지만 놀랄 만큼 잘 짜여진 프로그램입니다. 그리기 기능을 제공하는 몇 줄의 코드를 살펴보겠습니다.

var path: Path;
onMousePressed: function(ev: MouseEvent) {
    path = Path {
        stroke: Color.BLUE
        strokeWidth: 2
        elements: MoveTo { x: ev.x, y: ev.y }
    };
    insert path into scene.content;
}
onMouseDragged: function(ev: MouseEvent) {
    insert LineTo { x: ev.x, y: ev.y } into path.elements;
}

마우스를 클릭하면 새 경로가 만들어져 장면에 추가됩니다. 이 경로는 하나의 MoveTo 요소로 구성되므로 아직까지 표시되지 않습니다. 마우스를 움직이면 새로운 선형 세그먼트가 경로에 추가되어 화면에 자동으로 나타나게 됩니다.

또 하나의 이벤트 핸들러가 추가됩니다. 영역에서 더블 클릭하면 그려진 모든 것이 지워집니다.

onMouseClicked: function(ev: MouseEvent) {
    if (ev.clickCount == 2) {
        scene.content = scene.content[0];
    } 
}

앞의 코드 예제에서 scene.content로부터 모든 요소(기본 요소인 캔버스 화면은 제외)가 제거되었습니다.

scene.content 개체는 시퀀스이므로 코드는 다음과 같이 작성되었어야 합니다.

scene.content = [ scene.content[0] ];

그러나 JavaFX 스크립트 언어에서 모든 개체는 이 단일 개체로 구성된 시퀀스와 동일하므로, 이 축약 표시가 가능합니다.

다음 영역에 그림을 그려 보십시오. 영역의 내용을 지우려면 내부를 더블 클릭합니다

.Draw.fx에서 전체 코드를 찾을 수 있습니다.