Jasper PottsStaff Engineer,
Sun Microsystems
Jigsaw Created With Boolean Shape operations
이 JavaFX 샘플은 여러분이 jigsaw 조각 같은 복잡한 모양들을 만들기 위해서 원이나 사각형 같은 간단한 모양들을 어떻게 추가하는지 보여줍니다.
코드이해하기
각 jigsaw 조각들은 정사각형에서 더해지거나 빼진 네개의 탭을 가진 정사각형으로부터 생성됩니다. 각 탭들은 정사각형의 가장자리 bulb end에 결합하기 위한 bulb end와 사각형을 목적으로 타원에서 부터 만들어 집니다. 두 원들은 사각형과 bulb 사이의 연결을 둥글게 하기 위해서 빼집니다.
Figure 1: Diagram은 Jigsaw 조각에 결합된 모양을 보여줍니다.
Figure 2는 jigsaw 조각을 위해서 single 탭을 어떻게 만드는지 코드를 보여줍니다.
ShapeSubtract {
a: [
Ellipse {
centerX: 139
centerY: 0
radiusX: 20
radiusY: 35
},
Rectangle {
x: 100
y: -25
width: 22
height: 50
}
]
b: [
Circle {
centerX: 112.5
centerY: -28
radius: 12.5
},
Circle {
centerX: 112.5
centerY: 28
radius: 12.5
}
]
}
Figure 2: Jigsaw Shape의 오른쪽 탭을 만들기 위한 코드
Figure 3에서 취하는 stage 추가 코드는 어떻게 jigsaw 조각 모양을 만드는지에 대한 완전한 코드 입니다.
ShapeSubtract {
a: [
// main rectangle
Rectangle {
x: -100
y: -100
width: 200
height: 200
}
// right tab
ShapeSubtract {
a: [
Ellipse {
centerX: 139
centerY: 0
radiusX: 20
radiusY: 35
},
Rectangle {
x: 100
y: -25
width: 22
height: 50
}
]
b: [
Circle {
centerX: 112.5
centerY: -28
radius: 12.5
},
Circle {
centerX: 112.5
centerY: 28
radius: 12.5
}
]
}
// bottom tab
ShapeSubtract {
a: [
Ellipse {
centerX: 0
centerY: 139
radiusX: 35
radiusY: 20
},
Rectangle {
x: -25
y: 100
width: 50
height: 22
}
]
b: [
Circle {
centerX: -28
centerY: 112.5
radius: 12.5
},
Circle {
centerX: 28
centerY: 112.5
radius: 12.5
}
]
}
]
b: [
// left tab
ShapeSubtract {
a: [
Ellipse {
centerX: -62
centerY: 0
radiusX: 20
radiusY: 35
},
Rectangle {
x: -100
y: -25
width: 22
height: 50
}
]
b: [
Circle {
centerX: -87.5
centerY: -28
radius: 12.5
},
Circle {
centerX: -87.5
centerY: 28
radius: 12.5
}
]
}
// top tab
ShapeSubtract {
a: [
Ellipse {
centerX: 0
centerY: -62
radiusX: 35
radiusY: 20
},
Rectangle {
x: -25
y: -100
width: 50
height: 25
}
]
b: [
Circle {
centerX: -28
centerY: -87.5
radius: 12.5
},
Circle {
centerX: 28
centerY: -87.5
radius: 12.5
}
]
}
]
}
Figure 3: Code for Creating Jigsaw Shape
여러분이 생성된 jigsaw 모양을 얻은뒤 그곳에서 모양을 취하고 이미지의 클립으로 그것을 사용하는 것은 매우 쉽습니다. 그 시점에서 여러분은 dragging을 하고 간단한 jigsqw 게임을 즐겨야 합니다. 이 간단한 시작에서 부터 여러분은 많은 유사한 조각들과 더 많은 그것들을 가지거나 사용자에게 jigsaw로 변할 어떤 이미지를 선택하게 함으로써 좀더 복잡해진 jigsaw를 만들기 위해 쉽게 코드를 확장할수 있을 것입니다.