Swing/MouseDrivenImageRotation のバックアップの現在との差分(No.4)
- バックアップ一覧
- 差分 を表示
- 現在との差分 - Visual を表示
- ソース を表示
- バックアップ を表示
- Swing/MouseDrivenImageRotation へ行く。
- 1 (2009-05-25 (月) 13:21:41)
- 2 (2009-10-27 (火) 14:59:12)
- 3 (2011-05-13 (金) 23:03:28)
- 4 (2012-03-28 (水) 18:42:44)
- 5 (2013-01-09 (水) 20:57:15)
- 6 (2014-11-22 (土) 03:59:58)
- 7 (2014-12-13 (土) 18:21:12)
- 8 (2016-03-15 (火) 16:46:24)
- 9 (2016-05-11 (水) 20:30:57)
- 10 (2016-05-13 (金) 15:10:18)
- 11 (2017-08-04 (金) 15:45:14)
- 12 (2017-08-04 (金) 17:30:55)
- 13 (2017-08-22 (火) 15:19:44)
- 14 (2018-09-06 (木) 11:02:11)
- 15 (2020-08-27 (木) 18:28:29)
- 16 (2022-02-16 (水) 16:20:52)
- 17 (2023-05-23 (火) 15:19:52)
- 追加された行はこの色です。
- 削除された行はこの色です。
TITLE:Mouseで画像を移動、回転 #navi(../) RIGHT:Posted by &author(aterai); at 2008-10-13 *Mouseで画像を移動、回転 [#d4ffaeaa] 画像をマウスのドラッグで任意の位置に移動、回転します。[http://satoshi.blogs.com/life/2007/05/uiflash_1.html Life is beautiful: 習作UI:初めてのFlash その2]、[http://satoshi.blogs.com/life/2007/05/uiflash_2.html その3]からの移植になります。 --- category: swing folder: MouseDrivenImageRotation title: Mouseで画像を移動、回転 tags: [ImageIcon, MouseListener, MouseMotionListener, AffineTransform, Area] author: aterai pubdate: 2009-05-25T13:21:41+09:00 description: 画像をマウスのドラッグで任意の位置に移動、回転します。 image: https://lh4.googleusercontent.com/_9Z4BYR88imo/TQTQAQVe8YI/AAAAAAAAAe4/y6GTZLKjqx0/s800/MouseDrivenImageRotation.png --- * 概要 [#summary] 画像をマウスのドラッグで任意の位置に移動、回転します。 -&jnlp; -&jar; -&zip; #download(https://lh4.googleusercontent.com/_9Z4BYR88imo/TQTQAQVe8YI/AAAAAAAAAe4/y6GTZLKjqx0/s800/MouseDrivenImageRotation.png) //#screenshot #ref(http://lh4.ggpht.com/_9Z4BYR88imo/TQTQAQVe8YI/AAAAAAAAAe4/y6GTZLKjqx0/s800/MouseDrivenImageRotation.png) * サンプルコード [#sourcecode] #code(link){{ class DraggableImageMouseListener extends MouseAdapter { private static final BasicStroke BORDER_STROKE = new BasicStroke(4f); private static final Color BORDER_COLOR = Color.WHITE; private static final Color HOVER_COLOR = new Color(100, 255, 200, 100); private static final int IR = 40; private static final int OR = IR * 3; private final Shape border; private final Shape polaroid; private final RectangularShape inner = new Ellipse2D.Double(0, 0, IR, IR); private final RectangularShape outer = new Ellipse2D.Double(0, 0, OR, OR); private final Point2D startPt = new Point2D.Double(); private final Point2D centerPt = new Point2D.Double(100d, 100d); private final Dimension imageSz; private final Image image; private double radian = Math.toRadians(45d); // 45d / 180d * Math.PI; private double startRadian; // drag start radian private boolean moverHover; private boolean rotatorHover; **サンプルコード [#h5489e69] #code{{ class DraggableImageMouseListener extends MouseAdapter{ private static final Color color = new Color(100,255,200,100); private static final int ir = 40, or = ir*3; public final Ellipse2D.Double inner = new Ellipse2D.Double(0,0,ir,ir); public final Ellipse2D.Double outer = new Ellipse2D.Double(0,0,or,or); public final Image image; public final int width; public final int height; public final double centerX, centerY; public double x = 10.0, y = 50.0, rotate = 45.0; public double startX, startY, startA; private boolean moverHover, rotatorHover; protected DraggableImageMouseListener(ImageIcon ii) { super(); image = ii.getImage(); int width = ii.getIconWidth(); int height = ii.getIconHeight(); imageSz = new Dimension(width, height); border = new RoundRectangle2D.Double(0, 0, width, height, 10, 10); polaroid = new Rectangle2D.Double(-2, -2, width + 4, height + 20); setCirclesLocation(centerPt); } public DraggableImageMouseListener(ImageIcon ii) { image = ii.getImage(); width = ii.getIconWidth(); height = ii.getIconHeight(); centerX = width/2.0; centerY = height/2.0; inner.x = (x+centerX-ir/2); inner.y = (y+centerY-ir/2); outer.x = (x+centerX-or/2); outer.y = (y+centerY-or/2); private void setCirclesLocation(Point2D center) { double cx = center.getX(); double cy = center.getY(); inner.setFrameFromCenter(cx, cy, cx + IR / 2d, cy - IR / 2d); outer.setFrameFromCenter(cx, cy, cx + OR / 2d, cy - OR / 2d); } public void paint(Graphics g, ImageObserver ior) { Graphics2D g2d = (Graphics2D)g; AffineTransform at = AffineTransform.getTranslateInstance(x, y); at.rotate(rotate, centerX, centerY); g2d.drawImage(image, at, ior); g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); if(rotatorHover) { public void paint(Graphics g, ImageObserver observer) { Graphics2D g2 = (Graphics2D) g.create(); g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); double w2 = imageSz.width / 2d; double h2 = imageSz.height / 2d; AffineTransform at = AffineTransform.getTranslateInstance( centerPt.getX() - w2, centerPt.getY() - h2); at.rotate(radian, w2, h2); g2.setPaint(BORDER_COLOR); g2.setStroke(BORDER_STROKE); Shape s = at.createTransformedShape(polaroid); g2.fill(s); g2.draw(s); g2.drawImage(image, at, observer); if (rotatorHover) { Area donut = new Area(outer); donut.subtract(new Area(inner)); g2d.setPaint(color); g2d.fill(donut); }else if(moverHover) { g2d.setPaint(color); g2d.fill(inner); g2.setPaint(HOVER_COLOR); g2.fill(donut); } else if (moverHover) { g2.setPaint(HOVER_COLOR); g2.fill(inner); } g2.setPaint(BORDER_COLOR); g2.setStroke(BORDER_STROKE); g2.draw(at.createTransformedShape(border)); g2.dispose(); } @Override public void mouseMoved(MouseEvent e) { if(outer.contains(e.getX(), e.getY()) && !inner.contains(e.getX(), e.getY())) { moverHover = false; rotatorHover = true; }else if(inner.contains(e.getX(), e.getY())) { moverHover = true; rotatorHover = false; }else{ moverHover = rotatorHover =false; if (outer.contains(e.getX(), e.getY()) && !inner.contains(e.getX(), e.getY())) { moverHover = false; rotatorHover = true; } else if (inner.contains(e.getX(), e.getY())) { moverHover = true; rotatorHover = false; } else { moverHover = false; rotatorHover = false; } ((JComponent)e.getSource()).repaint(); e.getComponent().repaint(); } @Override public void mouseReleased(MouseEvent e) { rotatorHover = moverHover = false; ((JComponent)e.getSource()).repaint(); rotatorHover = false; moverHover = false; e.getComponent().repaint(); } @Override public void mousePressed(MouseEvent e) { if(outer.contains(e.getX(), e.getY()) && !inner.contains(e.getX(), e.getY())) { if (outer.contains(e.getX(), e.getY()) && !inner.contains(e.getX(), e.getY())) { rotatorHover = true; startA = rotate - Math.atan2(e.getY()-y-centerY, e.getX()-x-centerX); ((JComponent)e.getSource()).repaint(); }else if(inner.contains(e.getX(), e.getY())) { startRadian = radian - Math.atan2( e.getY() - centerPt.getY(), e.getX() - centerPt.getX()); e.getComponent().repaint(); } else if (inner.contains(e.getX(), e.getY())) { moverHover = true; startX = e.getX(); startY = e.getY(); ((JComponent)e.getSource()).repaint(); startPt.setLocation(e.getPoint()); e.getComponent().repaint(); } } @Override public void mouseDragged(MouseEvent e) { if(rotatorHover) { rotate = startA + Math.atan2(e.getY()-y-centerY, e.getX()-x-centerX); ((JComponent)e.getSource()).repaint(); }else if(moverHover) { x += e.getX() - startX; y += e.getY() - startY; inner.x = (x+centerX-ir/2); inner.y = (y+centerY-ir/2); outer.x = (x+centerX-or/2); outer.y = (y+centerY-or/2); startX = e.getX(); startY = e.getY(); ((JComponent)e.getSource()).repaint(); if (rotatorHover) { radian = startRadian + Math.atan2( e.getY() - centerPt.getY(), e.getX() - centerPt.getX()); e.getComponent().repaint(); } else if (moverHover) { centerPt.setLocation( centerPt.getX() + e.getX() - startPt.getX(), centerPt.getY() + e.getY() - startPt.getY()); setCirclesLocation(centerPt); startPt.setLocation(e.getPoint()); e.getComponent().repaint(); } } } }} **解説 [#c10308ac] 画像の中心をドラッグすると移動、すこし外側をドラッグすると画像を回転することができます。 * 解説 [#explanation] - 画像の移動: 画像の中心にマウスが近づくと表示される円図形をドラッグ - 画像の回転: 上記の円図形の外側に表示されるドーナツ型図形をドラッグ -- ドーナツ型図形は`Area#subtract(Area)`メソッドを使用して作成可能 ---- 回転のためのドーナツ状の図形は、Area#subtractメソッドを使用して作成しています。 * 参考リンク [#reference] - [http://satoshi.blogs.com/life/2007/05/uiflash_2.html Life is beautiful: 習作UI:初めてのFlash その3] -- `Flash`の`UI`を参考 - [https://docs.oracle.com/javase/jp/8/docs/api/java/awt/geom/Area.html#subtract-java.awt.geom.Area- Area#subtract(Area) (Java Platform SE 8)] **参考リンク [#ad7709ab] -[http://satoshi.blogs.com/life/2007/05/uiflash_1.html Life is beautiful: 習作UI:初めてのFlash その2] -[http://satoshi.blogs.com/life/2007/05/uiflash_2.html Life is beautiful: 習作UI:初めてのFlash その3] -[http://d.hatena.ne.jp/aterai/20081209/1228801099 JavaFXで画像の移動、回転 (Image Mover Rotator)] **コメント [#bbf128d8] * コメント [#comment] #comment #comment