HTML5で画像を回転させて表示させると、斜めになった画像の縁の部分がギザギザになってしまいます。このジャギを回避する方法はないでしょうか?
-
どのように画像を回転させているのかを詳しく教えていただければありがたいです。お願いします– Sm YamashitaCommented 2014年12月2日 15:04
-
回転はCSS3のtransform: rotate();プロパティでしょうか?– mutukiCommented 2014年12月2日 16:12
-
CSS3のtransform: rotate();プロパティや、JavaScriptのCanvas 2D Context の rotate() を使って、画像を微妙に(例えば5度程度)回転した際にジャギが目立ちました。– hideyaCommented 2014年12月2日 20:25
-
@SotaYamashita jqueryっぽく回転する実装[ja.stackoverflow.com/questions/290/…– Taizan YonetujiCommented 2014年12月3日 2:49
-
具体的にどのように画像を回転させているか明示した方が良いと思います。また、どのようにギザギザになっているか、可能であれば画像をアップした方が回答者の助けになると思います。– tomuteCommented 2014年12月4日 14:11
|
さらに 1 件のコメントを表示
3 件の回答
imgへのtransform: rotate();
の適用でもcanvasでもそうなのですが、どちらもベクターではなくピクセル操作になるので、計算上端数が出るとジャギが見えると思いますし、ディスプレイのppiでも影響するので完全なコントロールは難しいかもしれませんね。
前述の制約があるとして、その中で工夫するのであれば
- borderを使ってnピクセルぶんの縁を作ってベクターラインで囲む
box-shadow
を使ってドロップシャドウを生成してジャギが目立つ部分側に適用する- 表示するサイズの2倍のイメージを用意して、サイズ指定で50%表示で使うことでサンプリング数をあげる
あたりを組み合わせて試してみると良いと思います。
ジャギの出るのはどのブラウザでもでしょうか?
Firefoxであれば下記が参考になるかと思います。
https://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-firefox
body {
-moz-perspective: 800px;
}
div {
-moz-transform: rotateX(45deg);
border: 1px solid white;
}
<div style="display:inline-block; width:10em; height:10em; background:hotpink;margin-left:8em;"></div>