uupaa-excanvas.js に shadow を(なんちゃって)実装してみた

JavaScript spinoff Silverlight canvas

uupaa-excanvas.js に shadow 周りの実装が可能かテストしています。

作業開始から10分程ですが、とりあえず Silverlight + TextAPI に実装してみました。

できることなら、WebKit の実装に近づけるつもりです。

ゴリゴリとエミュレーションするコードも書いたことがあるのですが、速度的にはまぁなんとか大丈夫みたいだったので、Canvas API(fillとかfillTextとか) レベル + uuCanvas.Draw レベルの両方で実装してみようかと。



…っと、
fillText + shadowBlur だと、テキストの周辺に影がぼやーって広がるんですね。
ってことは上の実装は間違いか?

CSS3 の text-shadow のレンダリングとの関係も調査が必要ですね。
# http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20379563,00.htm

追記

Text Shadow って、文字列に対して影をつけるのではなく、文字をバラバラにして、各文字の中心から影を描画する必要があるのか…

文字と文字の間隔はどうやって取得すればいいんだろう?

fillText("こんにちは、こんにちは")
  • 左から順番に一文字ずつ裏でレンダリングして、各文字が描画される座標を把握するのか?
    • "こ" を描画 ⇒ 幅が40pxなら、"こ" の中心は 40 / 2 = 20px
    • "ん" を描画 ⇒ 幅が40pxなら、"ん" の中心は 40 / 2 = 20px
    • "こん" を描画 ⇒ 幅が90pxなら、"こ" と "ん" の間隔 は 10px だから、"こ" の影は20pxから描画を開始して、"ん" の影は 40px("こ"の幅) + 10px(すきま) + 20px("ん"の中心) から描画を開始する。と。


このロジックで組むと、結構な計算量になる気がする。

文字列の中心から文字列全体に影つけるやりかたなら、それっぽい表示にはなるんだよね。

追記の追記

なんちゃってだけど、とりあえずそれっぽいレンダリングを行うようにはなりました。


上がSilverlightで、下がVMLでレンダリングしています。赤が fillText(), 青が strokeText() の結果です。
# Silverlight の strokeText は未実装なので fillTextと同じ結果にしてます。

blur を表現するため、テキストを拡大してレンダリングする方法を思いつく限り(5通りほど)試してみたんですが、

どうにも使えない品質だったので、拡大表示を(今日は)あきらめ、透明度を設定した要素をz-indexで背後に 2px づつずらして設置しているだけの実装になっています。


仕様の再現性にかなり問題があるのは承知しているので、ナイスアイデアが湧いたら後でリテイクします。

パターン以外のshadowはなんとか形になった。


細かいところは後でやるとして、今日はここまで。

作業時間は約5時間。