Swing/ZoomingAndPanning のバックアップ差分(No.5)
- バックアップ一覧
- 現在との差分 を表示
- 現在との差分 - Visual を表示
- ソース を表示
- バックアップ を表示
- Swing/ZoomingAndPanning へ行く。
- 1 (2014-04-21 (月) 00:28:49)
- 2 (2014-04-21 (月) 14:42:00)
- 3 (2014-04-23 (水) 17:23:05)
- 4 (2014-08-29 (金) 00:30:12)
- 5 (2014-11-25 (火) 03:03:31)
- 6 (2015-11-25 (水) 21:21:19)
- 7 (2016-01-27 (水) 15:22:41)
- 8 (2017-06-27 (火) 13:56:33)
- 9 (2018-06-07 (木) 18:15:10)
- 10 (2020-06-02 (火) 19:04:26)
- 11 (2021-11-19 (金) 00:41:10)
- 12 (2022-08-05 (金) 16:00:52)
- 13 (2022-12-31 (土) 20:52:14)
- 追加された行はこの色です。
- 削除された行はこの色です。
TITLE:JPanelに表示した画像のズームとスクロール #navi(../) #tags(AffineTransform, Graphics, JPanel, MouseListener, MouseMotionListener, MouseWheelListener) RIGHT:Posted by &author(aterai); at 2014-04-21 * JPanelに表示した画像のズームとスクロール [#n09fa895] --- title: JPanelに表示した画像のズームとスクロール tags: [AffineTransform, Graphics, JPanel, MouseListener, MouseMotionListener, MouseWheelListener] author: aterai pubdate: 2014-04-21T00:28:49+09:00 description: JPanelに表示した画像にAffineTransformによる変換を適用して、マウスを使った拡大・縮小・移動を実行します。 --- * 概要 [#n09fa895] `JPanel`に表示した画像に`AffineTransform`による変換を適用して、マウスを使った拡大・縮小・移動を実行します。[https://forums.oracle.com/thread/1263955 How to implement Zoom & Pan in Java using Graphics2D]に投稿されているコードを参考・引用しています。 #download #ref(https://lh3.googleusercontent.com/-c5Y9hCoRQbU/U1PhhnitgFI/AAAAAAAACD0/ZXIcyPywcr0/s800/ZoomingAndPanning.png) #download(https://lh3.googleusercontent.com/-c5Y9hCoRQbU/U1PhhnitgFI/AAAAAAAACD0/ZXIcyPywcr0/s800/ZoomingAndPanning.png) ** サンプルコード [#t414a62d] * サンプルコード [#t414a62d] #code(link){{ class ZoomAndPanHandler extends MouseAdapter { private static final double ZOOM_MULTIPLICATION_FACTOR = 1.2; private static final int MIN_ZOOM = -10; private static final int MAX_ZOOM = 10; private static final int EXTENT = 1; private final BoundedRangeModel zoomRange = new DefaultBoundedRangeModel( 0, EXTENT, MIN_ZOOM, MAX_ZOOM + EXTENT); private final AffineTransform coordTransform = new AffineTransform(); private final Point dragStartPoint = new Point(); @Override public void mousePressed(MouseEvent e) { dragStartPoint.setLocation(e.getPoint()); } @Override public void mouseDragged(MouseEvent e) { Point dragEndPoint = e.getPoint(); Point dragStart = transformPoint(dragStartPoint); Point dragEnd = transformPoint(dragEndPoint); coordTransform.translate(dragEnd.x - dragStart.x, dragEnd.y - dragStart.y); dragStartPoint.setLocation(dragEndPoint); e.getComponent().repaint(); } @Override public void mouseWheelMoved(MouseWheelEvent e) { int dir = e.getWheelRotation(); int z = zoomRange.getValue(); zoomRange.setValue(z + EXTENT * (dir > 0 ? -1 : 1)); if (z == zoomRange.getValue()) { return; } Component c = e.getComponent(); Rectangle r = c.getBounds(); //Point p = e.getPoint(); Point p = new Point(r.x + r.width / 2, r.y + r.height / 2); Point p1 = transformPoint(p); double scale = dir > 0 ? 1 / ZOOM_MULTIPLICATION_FACTOR : ZOOM_MULTIPLICATION_FACTOR; double scale = dir > 0 ? 1 / ZOOM_MULTIPLICATION_FACTOR : ZOOM_MULTIPLICATION_FACTOR; coordTransform.scale(scale, scale); Point p2 = transformPoint(p); coordTransform.translate(p2.getX() - p1.getX(), p2.getY() - p1.getY()); c.repaint(); } //https://forums.oracle.com/thread/1263955 //How to implement Zoom & Pan in Java using Graphics2D private Point transformPoint(Point p1) { Point p2 = new Point(); try { AffineTransform inverse = coordTransform.createInverse(); inverse.transform(p1, p2); } catch (NoninvertibleTransformException ex) { ex.printStackTrace(); } return p2; } public AffineTransform getCoordTransform() { return coordTransform; } } }} ** 解説 [#v5dc7b5e] * 解説 [#v5dc7b5e] `AffineTransform#createInverse()`で取得した`AffineTransform`オブジェクトでマウス位置の逆変換を行い、現在表示されている倍率でのズームの中心や移動距離などを計算しています。 - ズーム -- ホイール上回転で%%マウスの位置を中心にして%%拡大 -- ホイール下回転で%%マウスの位置を中心にして%%縮小 - スクロール -- マウスドラッグで移動 ** 参考リンク [#x2408272] * 参考リンク [#x2408272] - [https://forums.oracle.com/thread/1263955 How to implement Zoom & Pan in Java using Graphics2D] - [http://codezine.jp/article/detail/174 ズームとパンの機能を備えたドローソフトを作成する:CodeZine] - [http://sozai-free.com/ 2000ピクセル以上のフリー写真素材集] - [http://tech.nitoyon.com/ja/blog/2013/12/13/touch-viewer/ タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利 - てっく煮ブログ] - [http://d.hatena.ne.jp/torutk/20140415/p1 CanvasでAffine変換で大いにはまる(数学的センスが足りなかった・・・) - torutkの日記] ** コメント [#y2de5eb2] - 表示画面の中心を 基準に拡大縮小するように変更。 -- [[aterai]] &new{2014-04-21 (月) 14:55:12}; * コメント [#y2de5eb2] #comment - 表示画面の中心を 基準に拡大縮小するように変更。 -- &user(aterai); &new{2014-04-21 (月) 14:55:12}; #comment