CAKE.js 弄っていたらテキストが描画されないバグに遭遇した
(2012/9/27 追記あり)
Canvas 処理ライブラリの CAKE.js 使っていたら、Chrome でテキスト描画されないバグに遭遇したのでメモ。
結論:これのComment#4のパッチを当てて回避すべし。
- 2012/9/25 時点で trunk に置いてある cake.js (r76 by crgodsey on Jul 25, 2011)
- Chrome 21 (正確にはChromium派生のIron21)
コード自体は次の通り単純なもの。「foobar」と描画されるはずがされない。
var canvas = new Canvas(c); var t = new TextNode("foobar"); t.x = 200; t.y = 200; canvas.append(t);
Issue 48 - cakejs - TextNode does not render correctly in Chrome - CAKE - Canvas Animation Kit Experiment - Google Project Hostingによると、 TextNode の描画部(6171行目あたり)がバグってるから、ちょろっと直せばOK。とのこと。これで描画されました。
If you replace line 6171 ctx.fillText(this.text, this.cx, this.cy, this.maxWidth) with this: if(this.maxWidth) ctx.fillText(this.text, this.cx, this.cy, this.maxWidth) else ctx.fillText(this.text, this.cx, this.cy); it works again.
2012/9/27 追記 上のパッチだけだと TextNode.align と TextNode.baseline が反映されないので、以下のように。
Comment 5 by ishak.nu...@gmail.com, Apr 5, 2012 here is drawHTML5 function with support for baseline, align and stroke: drawHTML5 : function(ctx) { ctx.textBaseline = this.baseline ctx.textAlign = this.align if(this.maxWidth) { if(this.stroke && this.strokeMode == 'below') ctx.strokeText(this.text, this.cx, this.cy, this.maxWidth) ctx.fillText(this.text, this.cx, this.cy, this.maxWidth) if(this.stroke && this.strokeMode == 'above') ctx.strokeText(this.text, this.cx, this.cy, this.maxWidth) } else { if(this.stroke && this.strokeMode == 'below') ctx.strokeText(this.text, this.cx, this.cy) ctx.fillText(this.text, this.cx, this.cy); if(this.stroke && this.strokeMode == 'above') ctx.strokeText(this.text, this.cx, this.cy) } },