スクロール ホイールを使用して画像をズームインおよびズームアウトする HTML5 < canvas > プロジェクトをプログラミングしています。Googleマップのようにカーソルに向かってズームしたいのですが、動きを計算する方法が完全にわかりません。
私が持っているもの: 画像 x と y (左上隅); 画像の幅と高さ; キャンバスの中心に対するカーソル x と y。
80675 次
5 に答える
256
要するに、translate()キャンバスのコンテキストをオフセットでscale()拡大または縮小してからtranslate()、マウスのオフセットの反対で元に戻す必要があります。カーソル位置を画面スペースから変換されたキャンバス コンテキストに変換する必要があることに注意してください。
ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);
デモ: http://phrogz.net/tmp/canvas_zoom_to_cursor.html
ドラッグ、クリックしてズームイン、Shift キーを押しながらクリックしてズームアウト、またはホイールを上下にスクロールして確認できるように、私の Web サイトに完全に機能する例を掲載しました。
唯一の (現在の) 問題は、Chrome や Firefox に比べてSafari のズームが速すぎることです。
于 2011-04-03T00:10:29.843 に答える
14
これらの JS ライブラリが役立つことを願っています: (HTML5, JS)
- ルーペ
http://www.netzgesta.de/loupe/
- キャンバスズーム
https://github.com/akademy/CanvasZoom
- スクローラー
https://github.com/zynga/scroller
私は、ルーペを使っています。それは素晴らしいです！あなたにとって最良のケースはスクローラーです。
于 2011-11-22T09:57:55.367 に答える
7
@Phrogz の回答をベースとして、キャンバスのドラッグ、ズーム、回転を可能にする小さなライブラリを作成しました。これが例です。
var canvas = document.getElementById('canvas')
//assuming that @param draw is a function where you do your main drawing.
var control = new CanvasManipulation(canvas, draw)
control.init()
control.layout()
//now you can drag, zoom and rotate in canvas
プロジェクトのページで、より詳細な例とドキュメントを見つけることができます
于 2013-06-19T07:22:35.597 に答える