以下、横方向、斜め方向のグラデーションです。縦方向との違いは線形方向の指定部分のみです。
Curl実装
（Sample¥002.dcurl）
（Sample¥003.dcurl）
Canvas実装
（Sample¥002.html）
（Sample¥003.html）
イメージのクリッピング
次にイメージのクリッピングについても簡単に解説します。どちらも以下のような三角形のクリッピングが可能です。Curlとcanvas両者でアプローチは異なっており、Curlでは、Renderer2d.render-triangleメソッドで三角形を描画する際に、塗りつぶしパターンとしてグラデーションを指定しているのに対し、canvasでは三角形のクリッピング領域を設定して、矩形のグラデーションを描画しています。
また、CurlではFrameなどの描画オブジェクトのdrawメソッドをオーバーライドし、引数で渡されるRenderer2dを用いて描画を行います。
Curl実装
（Sample¥004.dcurl）
Canvas実装
（Sample¥004.html）
Curlでの2次元描画処理
{define-proc {tri-proc ren:Renderer2d}:void
let fp:FillPattern = {LinearGradientFillPattern
{Fraction2d 0, 0},
{Fraction2d 1, 0},
{Spectrum.from-envelope
"#C05050", 0.0,
"#C0C050", 0.5,
"#5050C0", 1.0
}
}
{ren.render-triangle
{Distance2d 1cm, 4cm},
{Distance2d 4cm, 1cm},
{Distance2d 0cm, 0cm},
fill-pattern = fp
}
}
{define-class RepaintFrame {inherits Frame}
{constructor {default ...}
{construct-super ...}
}
{method public {draw ren:Renderer2d}:void
{tri-proc ren}
}
}
グラデーションパターンの部分的な使用
次は、イメージのグラデーションパターンの部分的な使用についてです。この例では、Renderer2d.render-rectangleメソッドのテクスチャ座標パラメータを指定し、元のグラデーションパターン全体を1と考えた時の0.3～0.7の領域を切り出したグラデーションを用いて描画しています。
（Sample¥005.dcurl）
{ren.render-rectangle
0.5cm, 0.5cm, 2.0cm, 2.0cm,
fill-pattern = fp,
uv1 = {Fraction2d .3, .3},
uv2 = {Fraction2d .7, .7}
}
以上、グラデーションおよび2次元描画について、駆け足ではありましたが紹介しました。ここで紹介はできませんでしたが、Renderer2dにはさまざまな描画メソッドが提供されています。
閉じた図形の描画メソッド
- Renderer2d.render-ellipse
- Renderer2d.render-polygon
- Renderer2d.render-polygon-from-array
- Renderer2d.render-rectangle
- Renderer2d.render-rounded-rectangle
- Renderer2d.render-stippled-rectangle
- Renderer2d.render-region
- Renderer2d.render-triangle
線図形の描画メソッド
- Renderer2d.render-elliptic-path
- Renderer2d.render-path
- Renderer2d.render-rectangular-path
- Renderer2d.render-rounded-rectangular-path
- Renderer2d.render-line
その他の図形の描画メソッド
- Renderer2d.render-drawable…指定されたDrawableのすべてまたは一部をレンダリングします。
- Renderer2d.render-pixmap…指定されたPixmapのすべてまたは一部をレンダリングします。
- Renderer2d.render-string…指定されたStringのすべてまたは一部をレンダリングします。
