三角形のボタンを書く
JavaFXでは、矩形以外の多角形はすべてPolygonで描画します。
が、正方形・長方形と同様によく使う図形なので、毎回Polygonで頂点を指定するのも面倒です。
こんな感じの三角形のボタンは簡単にかけると便利でしょう。
例えば次のようになります。
Polygon { points: [0, 0, 10, 0, 5, 5] }
ちょっと使いにくいので、bindを使ってカスタムクラスを作成してみました。
class Triangle extends Polygon { public var x: Number; public var y: Number; public var width: Number; public var height: Number; override var points = bind [ x, y, x, y + height, x + width, y + height/2, ]; }
Polygonを継承したTriangleですが、追加のアトリビュートとして三角形の左上の座標(x,y)と幅、高さが加わっています。
また、Polygonのアトリビュートであるpointsをオーバーライドして、三角形の頂点を指定しています。
ポイントはbindでシーケンス*1を指定しており、x,yなどが変更された時に対応してpointが変わるところです。
実際に使う場合は色をfillで指定したりとPolygonの属性を使用します。
Stage { title: "Triangle Button" width: 250 height: 100 scene: Scene { content: [ Triangle { x: 20, y: 20 width: 10, height: 10 fill: Color.LIGHTGREEN stroke: Color.GREEN rotate: 180 }, Triangle { x: 100, y: 20 width: 10, height: 10 fill: Color.LIGHTGREEN stroke: Color.GREEN }, ] } }
向きは右向きで固定ですが、rotateアトリビュートを使えば簡単に回転できるので指定しましょう。