基于Ext-core 好玩的图片部分自由放大工具

阅读更多

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code  

 

        

 

启发自 advanced DOM scripting ，觉得那个图片剪裁工具挺好玩的，但是它的代码我看不习惯，觉得面向对象不够彻底，然后我就有了一个更好玩的想法，就通宵把它的代码重构加强，并添加了一个图片部分自由放大的实现了，以往的图片部分放大，好像不能用户自己控制图片的放大程度，那个小框也不能改变大小。（参见京东商城，taobao） 。

 

先看效果图 (demo见附件)：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

javascript 使用方法：

 

var scaler_test_w=new Ext.ux.ImageScaler({
  	id:'scaler_test',
  	
  	//弹出图片是原大小的多少
  	scaler:0.3,
  	
  	//放大区域大小参考，根据和裁剪区域的比较倍数，等比例调整
   	scalerViewerWidth:600,
  	scalerViewerHeight:400
  });
  
  Ext.get('scaler_test_a').on('click',function(evt){
  	scaler_test_w.show();
  	evt.stopEvent();
  	
  });

 

只需要一个 img 标签

 

 

/*
	v1.5 稳定了，调整放大算法,剪裁区域和弹出窗口都是等比例拖放，
根据放大窗口和剪裁区域的大小比设制放大窗口内最终放大图片的大小
*/

 

 

 

• 
• 大小: 357.8 KB

• 
• 大小: 368.2 KB

• 
• 大小: 348 KB

• 
• 大小: 401.2 KB

• 
• 大小: 365.1 KB

• 
• 大小: 542.7 KB

• ImageScaler1.0.zip (357.6 KB)
• 下载次数: 300

• ImageScaler_1.5.zip (90.6 KB)
• 下载次数: 159

• 查看图片附件