code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[excanvas] jQueryでcloneすると描画できなくなる

IE8以下用にExplorerCanvas (excanvas.js)を使用して開発中。

とあるグラフ(divの中にcanvasがいっぱいある)を書いており、それをコピーして別の要素に追加したいという状況。

尚、対象となるexcanvas.jsのバージョンは2013/02/05にtrunkから取得したコード。外側のAPIではなく、内部のコードに依存した方法なのでバージョンアップによってダメな方法になるかもしれません。

また、IE7, IE8でテスト。IE6は未確認。

通常のCanvas APIを使ったブラウザ(Firefox, Chrome, IE9, IE10)では、cloneした後の要素に対して描画できるが、IE7/IE8上にてexcanvasのオブジェクト達をcloneしてしまうとcloneの引数がtrueでもfalseでもcloneしたcanvasに対して描画できないという症状に遭遇した。

そこで、その対処法。

前提事項として、$.fn.extendを使ってAPIにexcanvasの初期化処理を追加している。

$.fn.extend({
	initCanvas: function(){
		return this.each(function(){
			if (typeof G_vmlCanvasManager !== 'undefined') {
				G_vmlCanvasManager.initElement(this);
			}
		});
	}
});

下記のような再初期化処理(removeAttrの箇所)を行うことで再び描画ができるようになった。empty()はなくても表面上動いていたけどDOM上にゴミが残るので含めている。

$('canvas').initCanvas();

var a = $('div#container').clone(false);

if (typeof G_vmlCanvasManager !== 'undefined') {
	$('canvas', a).empty().removeAttr('context_');
}

これでcanvas.getContext('2d')時にCanvasRenderingContext2D_というcanvasをエミュレートしたオブジェクトを再作成するようになるみたい。

関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。