仿淘宝图片放大(java GUI实现)

原创 2012年03月27日 14:30:43

全图为原图的缩小

图片并非真的放大(图片真正意义上的放大会失真),而是截取原图的一部分显示

放大后的图片可拖动

 

package come.wang.picture1;

import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

import javax.swing.JFrame;

public class MagnifyPicture {

 /**
  * 方法的用途:仿淘宝图片放大
  *
  * @param args
  */
 private JFrame frame;
 private TuPian panel1;
 
 private TuPian2 panel2;
 private String imageAddrs = "images\\1.jpg";

 public MagnifyPicture() {
  super();
  frame = new JFrame("图片放大");
  frame.setBounds(300, 200, 900, 600);
  frame.setVisible(true);
  int panel1Width = 300;
  // imageAddrs 图片路径、600,宽、400,高、panel1Width小图宽,小图高是根据原图计算出来的。
  panel2 = new TuPian2(400, 300);
  panel1 = new TuPian(imageAddrs, panel1Width, panel2);
  panel1.setLocation(20, 20);
  panel2.setLocation(320, 20);
  frame.setLayout(null);
  frame.add(panel1);
  frame.add(panel2);
  frame.validate();
  frame.repaint();
  frame.addWindowListener(new WindowAdapter() {
   public void windowClosing(WindowEvent arg0) {
    System.exit(0);
   }
  });
 }

 public static void main(String[] args) {
  new MagnifyPicture();
 }

}

 

package come.wang.picture1;

import java.awt.Cursor;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Point;
import java.awt.Toolkit;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;

import javax.swing.BorderFactory;
import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class TuPian extends JPanel implements MouseMotionListener {
 private static final long serialVersionUID = 1L;
 protected ImageIcon icon;
 private int size1 = 300;
 private TuPian2 panel2 ;
 private JPanel filedPanel ;
 private Image image ;
 //构造函数的参数:str 图片的路径,size1 面板的宽,高根据图片比例计算得来
 // panel2 显示放大图片面板
 public TuPian(final String str,final int size1,final TuPian2 panel2) {
  super();
  icon = new ImageIcon(str);
  image = icon.getImage();
  panel2.createImage(str);
  panel2.setSourceSize(size1);
  
  this.size1 = size1;
  this.setSize(size1, size1 * image.getHeight(null) / image.getWidth(null));
  
  this.panel2 = panel2;
  filedPanel = new JPanel();
  int fpw = this.getWidth()*panel2.getWidth()/image.getWidth(null);
  int fph = this.getHeight()*panel2.getHeight()/image.getHeight(null);
  filedPanel.setSize(fpw,fph);
  filedPanel.setOpaque(false);
  filedPanel.setBorder(BorderFactory.createEtchedBorder());
  filedPanel.setVisible(false);
  this.setLayout(null);
  this.add(filedPanel);
  //自定义鼠标样式
  Toolkit kit = Toolkit.getDefaultToolkit();   
  Image img = kit.getImage("images\\1.png");
  Cursor dynamiteCuror = kit.createCustomCursor(img, new Point(10,10),"dynamite stick") ;     
  setCursor(dynamiteCuror);
  //自定义鼠标样式
  
  this.addMouseMotionListener(this);
  this.addMouseListener(new MouseAdapter(){
   public void mouseEntered(MouseEvent e) {
    panel2.setVisible(true);
    panel2.createImage(str);
    panel2.setSourceSize(size1);
    
   }
   public void mouseExited(MouseEvent e) {
    filedPanel.setVisible(false);
   
   }
  });
  setOpaque(false);//设置panel为透明的。显示图片是不闪动
 }
 
 protected void paintComponent(Graphics g) {
  super.paintComponent(g);
  // 图片缩放到panel大小
  g.drawImage(image, 0, 0, size1, size1* image.getHeight(null)
    / image.getWidth(null), null);
  this.repaint();

 }

 public void mouseDragged(MouseEvent e) {
 }
 public void mouseMoved(MouseEvent e) {
  Point point = this.getMousePosition();
 // System.out.println("X:"+point.getX()+"Y:"+point.getY());
  int xx = (int)point.getX();
  int yy = (int)point.getY();
  int xxx = xx-filedPanel.getWidth()/2;
  int yyy = yy-filedPanel.getHeight()/2;
  //处理边界
  xxx = xxx<=0?0:xxx;
  yyy = yyy<=0?0:yyy;
  xxx = xxx>=this.getWidth()-filedPanel.getWidth()?this.getWidth()-filedPanel.getWidth():xxx;
  yyy = yyy>=this.getHeight()-filedPanel.getHeight()?this.getHeight()-filedPanel.getHeight():yyy;
  filedPanel.setVisible(true);
  filedPanel.setLocation(xxx,yyy );
  
  panel2.changeImage(xx,yy);
 }
 
 

}

 

package come.wang.picture1;

import java.awt.Graphics;
import java.awt.Image;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;

import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class TuPian2 extends JPanel {
 private static final long serialVersionUID = 1L;

 protected ImageIcon icon;
 private int w = 200;// 放大面板的宽
 private int h = 200;// 放大面板的高
 private int sourceSize = 300;// 小图面板的宽
 private int XX;// 截图起始点x
 private int YY;// 截图起始点y
 private Image image;
 private int[] begin;//拖动图片起始点
 private int[] end;//拖动图片终点

 public void createImage(String str) {
  icon = new ImageIcon(str);
  image = icon.getImage();
 }

 public void setSourceSize(int sourceSize) {
  this.sourceSize = sourceSize;
 }

 public TuPian2(int w, int h) {// 初始化时候后需要两个参数:宽和高
  super();
  this.w = w;
  this.h = h;
  begin = new int[2];
  end = new int[2];

  // 根据图片的比例设置面板大小
  // h = (w* image.getHeight(null))/ image.getWidth(null);
  this.setSize(w, h);
  setOpaque(false);//设置panel透明
  setVisible(false);
  addMouseMotionListener(new MouseMotionAdapter() {
   public void mouseDragged(MouseEvent arg0) {
    Point  movePoint = getMousePosition();
    if(movePoint!=null){
     end[0] = (int) movePoint.getX();
     end[1] = (int) movePoint.getY();
     int changeX = end[0] - begin[0];
     int changeY = end[1] - begin[1];
     //此函数每调用一次,此次鼠标的结束位置,作为下一次鼠标的开始位置
     begin[0]=end[0];
     begin[1]=end[1];
     
     // 计算移动方向
     XX = changeX < 0 ? XX - changeX : changeX > 0 ? XX = XX
       - changeX : XX;
     YY = changeY < 0 ? YY - changeY : changeY > 0 ? YY = YY
       - changeY : YY;
     drawImage();
    }
   }

  });
  addMouseListener(new MouseAdapter() {
   public void mousePressed(MouseEvent arg0) {
    Point point = getMousePosition();
    begin[0] = (int) point.getX();
    begin[1] = (int) point.getY();
   }
   
  });

 }

 protected void paintComponent(Graphics g) {
  super.paintComponent(g);
  g.drawImage(image, 0, 0, w, h, this.XX, this.YY, this.XX + w, this.YY
    + h, null);
 }

 public void changeImage(int XX, int YY) {

  // 按比例计算出鼠标“在”实际图像上的位置
  int xx2 = (XX * image.getWidth(null)) / sourceSize;
  int yy2 = (YY * image.getWidth(null)) / sourceSize;
  // 计算截图起始角,使得放大的图片以鼠标为中心
  this.XX = xx2 - w / 2;
  this.YY = yy2 - h / 2;
  drawImage();
 }

 public void drawImage() {
  // 处理边界
  this.YY = this.YY < 0 ? 0 : this.YY;
  this.XX = this.XX < 0 ? 0 : this.XX;
  this.XX = this.XX > image.getWidth(null) - w ? image.getWidth(null) - w
    : this.XX;
  this.YY = this.YY > image.getHeight(null) - h ? image.getHeight(null)
    - h : this.YY;
  // 根据计算参数,绘制放大后的图片(实际是取得图片的部分显示,不是真的放大,小面板上的图片是原图片的缩小)
  this.paintComponent(super.getGraphics());
 }

}

运行效果:

jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果

jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果 源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm...
  • springmvc_freemarker
  • springmvc_freemarker
  • 2016年02月02日 09:23
  • 839

WPF和Winform中picturebox图片局部放大

WPF和Winform中picturebox图片局部放大
  • yangyisen0713
  • yangyisen0713
  • 2014年02月13日 10:13
  • 2992

实现局部放大图片功能

代码实现如下: 放大镜 * { margin: 0; padding: 0; } ...
  • github_37412255
  • github_37412255
  • 2017年07月27日 20:19
  • 312

我的第一个有点意思的IOS工程 - 图片局部放大

是一个sva工程,现在可以把图片局部放大4倍,后期有时间了加上新的控制和设置部分 // //  ViewController.h //  sva_10_7_1 // //  Create...
  • hemeinvyiqiluoben
  • hemeinvyiqiluoben
  • 2015年09月05日 14:23
  • 1088

js图片局部放大镜效果

在购物网站的展示页面中常常能看到跟随鼠标移动而移动焦点的放大镜效果,实现这种效果的方法很多,这里给出一种。 你需要一张大图和一张缩小尺寸的小图,小图在界面中显示,大图用来构造放大效果。 ...
  • huntererer
  • huntererer
  • 2015年12月10日 01:14
  • 1687

js 实现 图片的局部放大效果

很多的网上商城都有鼠标在图片上移动时能将局部图放大的JS效果,今天自己也做了个,   实现该效果的原理是:在图片原有的宽高大小基础上再重新定义一个放大了X倍的图片,然后通过对大图位置偏移的设置来起到放...
  • kai161
  • kai161
  • 2013年07月19日 17:59
  • 6479

matlab画一个局部放大的图中图

第一种:magnify是个动态放大镜,固化后可以用tools>edit plot移动小图,能选取多个局部图,这个方法不错 用法:打开figure图,输入magnify,左键动态选取查看,ctrl+左...
  • wangh0802
  • wangh0802
  • 2017年04月19日 10:10
  • 5038

鼠标移动到图片上右边显示放大镜效果。

Magnifier #magnifier{  width:342px;  height:420px;  position:absolute;  top:100px;  left:250...
  • xianyao_shi
  • xianyao_shi
  • 2013年01月05日 15:25
  • 3518

网页中商品图片的局部放大效果

需求背景:购物网站中的商品局部放大: 代码: html:                                                       ...
  • ligaogang
  • ligaogang
  • 2015年05月20日 11:33
  • 1407

OpenCV图像处理->鼠标移动区域放大

首先 cvSetMouseCallback( "img", on_mouse, 0 );
  • sunboyiris
  • sunboyiris
  • 2014年04月05日 09:55
  • 1457
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿淘宝图片放大(java GUI实现)
举报原因:
原因补充:

(最多只允许输入30个字)