三角形のボタンを書く

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アトリビュートを使えば簡単に回転できるので指定しましょう。

*1:JavaFXでのリスト