The Green Shoes Manual 1.1.357

Art for Slots

多くの一般的な形状はovalとrectメソッドで描かれます。 まず、絵筆の色を準備する必要があります。

strokeコマンドは線の色を設定します。 fillコマンドは線の内部を塗りつぶすために利用する色を設定します。　

 Shoes.app do
   stroke red
   fill blue
   oval top: 10, left: 10, radius: 100
 end

このコードはまわりに赤い線のある青いパイを与えます。 100ピクセルの幅で、ウィンドウの左上から南東に少しのピクセルを配置します。

上記のblueとredメソッドはRGB配列です。 どうやって色を混ぜるかはColorsセクションを見てください。

Processing と NodeBox からのインスピレーション

この技巧的なメソッドの大抵は文字通りPythonのドローイングキットのNodeBoxから来ています。 次に、NodeBoxは多くのアイデアを、グラフィックとアニメーションのためのJavaのような言語である Processingから得ています。私はそれらのすばらしいプログラムの作者から大きな恩を受けています。

Green ShoesはNodeBoxとProcessingから少しの点が違います。 例えば、Green Shoesはそれ自身のRGB配列を持っていることを含めて、異なるカラーメソッドを 持っていますが、それらはとてもProcessingのカラーメソッドに似ています。 そしてGreen Shoesは線を描くことや形状内を塗りつぶすために画像やグラデーションを 利用することも許しています。

ShoesはいくつかのアニメーションのアイデアをProcessingから取り入れており、 Processingのメソッドをしっかりと参考にしようとしながらそれを拡張しています。

弧の形状（楕円形の一部）を座標（left, top）に描きます。 このメソッドは:angle1と:angle2のスタイルを提供することにより ovalより 少し多くの制御をが行えます。（実際には、:angle1に0と:angle2に2*Math::PIを 設定することにより、ovalメソッドをまねることができます。）

 Shoes.app do
   fill yellow..green
   stroke red..blue
   strokewidth 10
   cap :curve
   a = animate 12 do |i|
     @e.remove if @e
     r = i * (Math::PI * 0.01)
     @e = arc 100, 50, 180, 360, 0, r
     a.stop if r >= 2*Math::PI
   end
 end

座標（left, top）にwidthピクセルの矢を描きます。

 Shoes.app do
   para 'An arrow shape:', left: 20, top: 10
   arrow 30, 40, 70
 end

描くすべての線の終点の形状である線の頂点を設定します。 :curveが設定されるなら、終点はまるくなります。 デフォルトは:rectで、線の終点は突然に平らになります。 :projectの頂点も平らですが、棒の外側は少し長くなります。

 Shoes.app do
   nofill
   strokewidth 20
   stroke green
   cap :curve
   line 100, 100, 300, 100
   line 100, 250, 300, 300
   cap :rect
   line 100, 150, 300, 150
   stroke blue
   cap :project
   line 100, 200, 300, 200
   line 200, 100, 200, 300
   strokewidth 1
   stroke red
   rect 100, 100, 200, 200
 end

塗りつぶすバケツの色の指定（またはパターン）を設定します。 パターンは色やグラデーションまたは画像が設定できます。 そして、一度塗りつぶすバケツが設定されたら、選択されたパターンで色づけられた形状を 描くことができます。

画像のパターンで星を描くためには：

 Shoes.app do
   fill File.join(DIR, "../static/gshoes-icon.png")
   star 200, 200, 5, 100, 50
 end

塗りつぶすバケツをクリアするにはnofillを使ってください。 そしてstrokeメソッドを利用して線（星の枠線）の色を設定してください。

塗りつぶす色を削除するため、形状は塗りつぶされずに描かれます。 その代わりに、形状は線だけを持ち、中央を透明のままにします。

線の色を空にします。形状は外側の線が描かれなくなります。 nofillも設定された場合は、形状は表示されずに描かれます。

現在の線の色（別名"stroke"）を使って座標（left, top）から（x2, y2）まで線を描きます。

座標（left, top）ピクセルにradiusピクセルの幅と高さの円を描きます。 線の色や塗りつぶす色が形状を描くために利用されます。 デフォルトでは、座標は楕円形の最も左上の角ですが、これはtransformメソッドを 呼ぶことや、次のメソッドの下の:centerスタイルを使用することによって変更することができます。

 Shoes.app do
   stroke blue
   strokewidth 4
   fill black
   oval 10, 10, 50
 end

様々な比率の楕円形を描くためには、oval(left, top, width, height)のシンタックスを 利用してもいいです。

スタイルのハッシュを利用して円を描きます。次のスタイルがサポートされています：

• top: 楕円形の囲いのy座標。
• left: 楕円形の囲いのx座標。
• radius: 円の幅と高さ。
• width: 楕円形の幅のピクセルでの指定。
• height: 楕円形の高さのピクセルでの指定。
• center: 座標を楕円形の中央に指定しますか？（trueまたはfalse）

これらのスタイルは形状オブジェクトのstyleメソッドを利用して変更されます。

注意: Green Shoesは:centerスタイルをサポートしていません。

座標（left, top）からwidth x heightの寸法の長方形を描きます。 オプションとして、5番目の引数（ピクセルでの角の半径）により長方形の角を丸くすることもできます。 他の形状と同様に、長方形は描く線の色や塗りつぶす色を利用して描かれます。

 Shoes.app do
   stroke rgb(0.5, 0.5, 0.7)
   fill rgb(1.0, 1.0, 0.9)
   rect 10, 10, self.width - 20, self.height - 20
 end

上記のサンプルは角の周囲に10ピクセルのマージンを残して、その親の箱の範囲を塗りつぶす 長方形を描きます。デフォルトで親の箱を塗りつぶした長方形のためにはbackgroundも 見てください。

スタイルのハッシュを利用して長方形を描きます。次のスタイルがサポートされています：

• top: 長方形のy座標。
• left: 長方形のx座標。
• curve: 長方形の角の半径のピクセル。
• width: 長方形のピクセルによる幅。
• height:長方形のピクセルによる高さ。
• center: 座標を長方形の中央に指定しますか？（trueまたはfalse）

これらのスタイルは形状オブジェクトのstyleメソッドを利用して変更されます。

注意: Green Shoesは:centerスタイルをサポートしていません。

形状をその角度で描画するために、度（degrees）数により描画のために利用される 範囲を回転させます。

下の例では、長方形は(30, 30)に45度回転されて描かれます。

 Shoes.app do
   fill "#333"
   rotate 45
   rect 30, 30, 40, 40
 end

(left, top)から開始して、続いてブロックの内部でline_to、move_to、curve_to そしてarc_toを呼ぶことにより、任意の形状を表現（記述）します。 曲がったり弧を描いたりする長い線の形状をスケッチして見ることができます。

 Shoes.app do
   fill yellow
   shape do
     move_to 50, 30
     curve_to 100, 100, 10, 20, 100, 50
     line_to 20, 100
     line_to 30, 30
   end
 end

形状は他の形状を含むこともできます。 そして、形状の内部にoval、rect、line、starまたは arrow（さらに、Artセクションの他のメソッドすべて）を配置することができますが、 それらは線の一部ではないでしょう。形状のグループのようなそれらは、すべて1つとして描かれます。

注意: Green Shoesでは、上記のline_to、move_to、curve_toは Cairo::Contextのメソッドです。ブロックの中で直接それらを呼び出しています。 そのため、Green Shoesではarc_toはサポートしていません。また他の形状もShapeブロック 内に含めることができません。

描く線の色や塗りつぶす色を利用して星を描きます。 星は(left, top)の座標を中心点として頂点（points）の数とともに配置されます。 outerの幅は星の全半径をを定義します；innerの幅は頂点の始まる星の中央の半径を 指定します。

スロットのアクティブな線の色を設定します。patternは色、グラデーションまたは画像で、 それらはすべて"patterns"に分類されます。その線の色はそれに続く形状すべての枠線を 描くときに利用されます。

つまり、まわりに赤い線を持つ矢印を描くには：

 Shoes.app do
   stroke red
   nofill
   star 100, 100
 end

線の色をクリアするには、nostrokeメソッドを利用します。

スロットの内部で描かれるすべての線のサイズを設定します。 strokeメソッドが線の色を変更する一方、strokewidthメソッドは線のサイズを ピクセルで変更します。strokewidth(4)を呼ぶことにより4ピクセルの太さで線を描きます。

（skewやrotateのような）変化は形状の中心あたりで実行されるべきですか？ またはその形状の角ですか？Shoesの初期値は:cornerです。

注意: Green Shoesは:transformメソッドをサポートしていません。

スロットの描画の範囲を開始する位置を移動します。 通常は、すべての形状がこの位置から描くことができるように、その範囲は左上の角の (0, 0)から開始します。translateにより開始位置が(10, 20)に移動されて、 (50, 60)に形状が描かれるなら、その形状は実際にはスロットの(60, 80)に描かれます。

注意: Green Shoesは:translateメソッドをサポートしていません。

Next: Element Creation