Glisp Help: スタイルの応用 (メモ)
このページは個人的なメモ書きです。何かあればご連絡ください。
Glisp Help： はじめてのスケッチでも解説したとおり、エレメントはスタイルを適用することに初めて描画されます。スタイルは色や線幅など様々なプロパティからなりますが、それらはあるルールに基づいて継承、描画され、また参照することができます。
プロパティの参照
style関数の内側では、適用されているスタイルのプロパティにアクセスすることができます。
(style (fill "pink")
(text *fill-color* [50 50] :size 24))
ここでは、外側の fill関数で設定された "pink"を、シンボル *fill-color* によって参照しています。（*で挟まれた変数名は、グローバル変数のようなシンボルを表しています）同様に*stroke-color*や、 *stroke-width*、*stroke-cap* で線のプロパティにアクセスすることもできます。これはフローチャートなど、縁取りと同じ色でテキストを塗るときにも便利です。
(style (stroke "royalblue" 2)
(ngon [50 50] 40 4)
(style [(no-stroke) (fill *stroke-color*)]
(text "Hello" [50 50])))
ここで no-stroke 関数が登場していますが、これによって、それ以前に適用された塗りを無効にすることができます。以下のようなイメージです。
(stroke "royalblue" 2) -> (no-stroke) -> (fill *stroke-color*)
;^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^
;no-stroke によって打ち消される 打ち消されてもなお *stroke-color* は "royalblue" に設定されている
こうすることで、Hello というテキストに線が適用され、太くなってしまうのを防ぎます。これは矢印を描くときにも使えます。
スタイルの実体
fill や strokeは、 CSS のようなプロパティ名をキーに持つ連想配列を返すただの関数です。
(fill "pink") -> {:fill true :fill-color "pink"}
(stroke "skyblue" 10) -> {:stroke true :stroke-color "skyblue" :stroke-width 10}
CSS と違うのは、「スタイルを有効にするかどうか」と、そのスタイルへの色指定とが別のプロパティになっている点です。CSSにおけるfill: "pink"; という指定は、塗りを有効にすると同時に塗りの色も設定しています。しかしGlispでは、塗りを有功にするには {:fill true}、塗りの色の指定には {:fill-color: "color-name"}のように、プロパティとして独立しています。この仕組みによって、style関数の内側のパス全てを塗ることなく、塗り色のデフォルトを設定することが可能です。
(style {:stroke-dash [15 4]}
(style (stroke "crimson" 2)
(circle [50 50] 40))
(style (stroke "plum" 2 :dash [4 4])
(ngon [50 50] 40 5)))
CSSのようにスタイルは内側のエレメントへと継承されていきます。同じプロパティが設定された場合は、子要素に近い箇所で設定されたスタイルが優先されます。
(style {:stroke-dash [15 4]}
(style (stroke "crimson" 2)
(circle [50 50] 40))
(style (stroke "plum" 2 :dash [4 4])
(ngon [50 50] 40 5)))
スタイルのプリセット化
スタイルは単なる値なので、変数として定義することでプリセットのように随所で使い回すことができます。もちろん、他のスタイルと組み合わせて適用することも可能です。
(def fill-skyblue (fill "skyblue"))
(style fill-skyblue
(rect [10 10 40 40]))
(style [fill-skyblue (stroke "crimson" 5)]
(circle [70 70] 20))
