code up

スポンサーサイト

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

[excanvas] position: absolute;なcanvasを正しく印刷する

excanvas (ExplorerCanvas)でposition: absolute;なcanvasを印刷しようとするとposition(top, left)が効かずに全部左上に表示されてしまう問題への対応。

  • IE7(IE10のドキュメントモード: IE7)でのみ確認
  • 案2の場合、top, leftを指定した位置指定なのでbottom, rightな場合は少し改造が必要かも(未確認)

IE7(IE8は未確認)においてexcanvas利用時、canvas要素の絶対位置指定(position: absolute;とleft:, right:を使った位置指定)が印刷時に効かないようだ。

見つかった解決策はふたつ。

案1: html5shiv/html5shimにあるhtml5shiv-printshiv.jsをインポート

変えても大丈夫そうだけど、呼び出し順としては以下のように。

<!--[if lt IE 9]>
<script type="text/javascript" src="../js/excanvas.js"></script>
<script type="text/javascript" src="../js/html5shiv-printshiv.js"></script>
<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>

これだけで印刷時に位置が変わってしまう問題が解決した。

案2: canvasをdivで囲んでdivの位置を絶対位置指定する

基本は参考記事の通りだけどいくつか手を加えている。

ひとつは前回の記事で触れた通り、cloneを使って図をコピーしているので、繰り返し呼ばれたとき用の対策を加えている。

また、canvasの位置を変えた時にそれが反映されないケースにも対応。

$.fn.extend({
	canvasWrap: function(){
		return this.each(function(){
			if (typeof G_vmlCanvasManager !== 'undefined') {
				if($(this).css('position') === 'absolute'){
					if($(this).parent().hasClass('canvas-wrapper')){
						// canvasの位置を変更した時用
						$(this).parent().css({
							top: $(this).css('top'),
							left: $(this).css('left')
						});

						$(this).css({
							top: 0,
							left: 0
						});
					}else{
						// 初期化
						$(this).wrap(function(idx){
							var div = $('<div />').css({
								position: 'absolute',
								top: $(this).css('top'),
								left: $(this).css('left')
							}).addClass('canvas-wrapper');
							
							$(this).css({
								top: 0,
								left: 0
							});
							
							return div;
						});
					}
				}
			}
		});
	}
});

canvasの描画が終わった後に次のように呼び出す。

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