JavaFX Example Code | Draw

간단한 Drawing Application

By Sergey Malenkov, November 5, 2008

이 예제는 사용자가 마우스로 그림을 그릴수 있는 작성하기 쉬운 어플리케이션 입니다. 펜의 색상과 두께는 물론 수정될수 있습니다.

Understanding the Code

코드 이해하기

Draw 클래스는 사용자가 마우스로 그릴수 있는 캔버스를 생성합니다.

이 그림 코드는 Figure 1에서 보여지는 것처럼 매우 간결합니다. canvas 변수는 비어있는 Group 객체 입니다. 매번 마우스가 눌려질때마다 Path가 생성되고 canvas에 추가되게 됩니다. 경로는 마우스가 눌려진 위치에서 시작됩니다. 마우스가 시작점을 지나서 drag되었을때 새로운 구획들이 생성되고 경로에 추가됩니다. 이러한 구획들은 Scene에 경로가 추가되었기 때문에 즉각적으로 화면에서 볼수 있습니다.

Source Code

      Rectangle {
        fill: BG
        stroke: FG
        width: bind canvas.scene.width - 1
        height: bind canvas.scene.height - 1
        var path: Path;
        onMousePressed: function(mouse) {
          path = Path {
            stroke: COLOR
            strokeWidth: SIZE
            strokeLineCap: StrokeLineCap.ROUND
            strokeLineJoin: StrokeLineJoin.ROUND
            elements: MoveTo { x: mouse.x   y: mouse.y }
          }
          insert path into canvas.content
        }
        onMouseDragged: function(mouse) {
          insert LineTo { x: mouse.x   y: mouse.y } into path.elements
        }
        onKeyPressed: function(key) {
          if (key.controlDown and key.code == KeyCode.VK_Z) {
            undo()
          }
        }
      }

Figure 1: Drawing Code

어플리케이션의 나머지 부분은 색상과 선의 너비를 제공하는 부분을 제어합니다.

색상 선택자는 Figure 2에서 보여지는 것처럼 COLORS 변수로 부터 색상을 표시하는 Rectangle 객체의 간단한 집함입니다. 선택된 색상은 사각형의 획으로 표시됩니다. 선택된 색상은 마우스가 눌러졌을때 현재 색상과 교체됩니다.

Source Code

      for (color in COLORS) Rectangle {
        translateX: 4 + (2 + D) * indexof color
        translateY: 4
        strokeWidth: 2
        stroke: bind if (COLOR == color)  then FG  else null
        fill: color
        width: D
        height: D
        blocksMouse: true
        cursor: Cursor.HAND
        onMousePressed: function(mouse) {
          COLOR = color
        }
      }

Figure 2: Color Chooser 생성하기

in Figure 3에서 보여지는 것 처럼 선의 너비 선택자는 좀더 복잡합니다. Line 객체는 선택된 색상과 선의 너비를 표시합니다. Circle 객체는 모든 기능(성)을 제공합니다. 선택된 선의 너비는 원형의 획으로 표시됩니다. 선택된 선의 너비는 마우스가 눌러졌을때 현재 선의 너비와 교체됩니다.

Source Code

      for (size in [1..5]) Group {
        translateX: 0.5 * D + 4 + (2 + D) * indexof size
        translateY: 1.5 * D + 8
        content: [
          Circle {
            strokeWidth: 2
            stroke: bind if (SIZE == size)  then FG  else null
            fill: BG
            radius: D / 2
            blocksMouse: true
            cursor: Cursor.HAND
            onMousePressed: function(mouse) {
              SIZE = size
            }
          }
          Line {
            def o = (D - size) / 2 - 2;
            strokeWidth: size
            stroke: bind COLOR
            strokeLineCap: StrokeLineCap.ROUND
            startX: -o
            endX:    o
          }
        ]
      }

Figure 3: 선의 너비 Selector 생성하기

코드 수정하기

그 이상 수정하려면 아래 변수들을 변경하세요.

D: 색상 선택자와 선 너비 선택자의 버튼들의 너비와 높이
BG: 캔버스의 배경색
FG: 선택된 색상과 선의 너비를 표시하는데 사용되는 획의 색상

Source Code

def D = 22;
def BG = Color.WHITE;
def FG = Color.BLACK;
def COLORS = [
  Color.RED,
  Color.ORANGE,
  Color.YELLOW,
  Color.GREEN,
  Color.LIGHTBLUE,
  Color.BLUE,
  Color.MAGENTA,
  Color.BLACK
];

Figure 4: 변수들 변경하기

FX

Profile

간단한 Drawing Application

Understanding the Code

코드 이해하기

코드 수정하기