• jQuery图片上传裁剪插件imgAreaSelect(分析一) 放大缩小


    这个应用的关键:

     1.让左边选择区域和右边显示的图像信息保持一至。

     2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果。

       3.后台上传功能。

      那么这一次,只谈[放大]或[缩小]。[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中)。

    ["区域":是宽*高,也就是面积;]

    ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数]

     

    一、怎么能放大或者缩小图片的局部?

      局部放大:实质是将图片整个放大,即把图片的宽度和高度改变大,然后将放大后的图片,在一个固定大小(当然是比原图小的框)的框中,显示出来。

      局部放大:实质是将图片整个缩小,即把图片的宽度和高度改变小,然后将缩小后的图片,在一个固定大小(当然是比原图小的框)的框中,显示出来。

     

    二、左右布局:

      左右各有一张相同的图片,左边选中区域的改变,会让右边的图片,改变大小,根据第一点讲的,所以就有了局部放大缩小效果;

     

    三、放大缩小公式:

      左边是原图,右边是缩小或放大后的图。规律是左边的选中区域越大,那么右边也将缩小这个图,反之左边选中区域越小,那么右边的图就会放大.

      这个规律告诉我们,算法中应该有除法。因为除法中,分子不变,分母变大,那么结果越小,反之越大。所以除法中的在分子,不变的情况下,分母与结果正好是一对,反比关系,一个大,一个就小,反之,一个小,另一个就大。也正好和我们这个应用中的图片放大缩小,关系一至。

     

    四、目的

      1.我们要的结果,是右边的图片大小和显示位置(显示位置,下次再说,正在研究中);

     

    五、具体的算法:

      左图和右图宽:一样300PX;

      左图和右图高:一样300PX;

      左图显示区域:宽300PX,高300PX

      右图显示区域:宽100PX,高100PX

      选中区域的宽设为:selection.width(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

      选中区域的高设为:selection.Height(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

      宽的比例值设为:scaleX(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

      高的比例值设为:scaleX(具体怎么获得这个值,我也正在分析当中。先设为一个末知数)

     

      这里一共有四个东西要理清,才能确定下面的公式。

      a、 左图、右图的大小   (宽度都是相同)

      b、 左边显示区域宽高   (300PX*300PX)

      c.、右边显示区域宽高   (100px*100px)

      d.、选择区域的宽高值:  (这个是通过JQ获得selection.width,selection.Height)

     

     

      5.1获得比例值:

      分母:根据第三点,那么选中区域的宽:selection.width 和 选中区域的高:selection.Height肯定是分母了,因为根据实例分析,他俩的值越大,右边的图应该越小。

      分子:100px。也就是右边显示区域的宽度值。

          为什么是它的值?我们的目的是要改变右边图片的宽或高的值,为什么会与显示区域的宽度值相关联呢?

          这三者系一定要弄清。[“选择区域大小”、“右边显示区域大小”、“右边图片大小”];

          选择区域越大,超过了右边显示区域的大小,那么右边图片要想在这个区域中显示,只能缩小图片。

          (一个容器A只能装100*100的东西,现在你要放B200*200的东西,那么容器不变,只能把东西变小了)

          反之选择区域越小,小于右边显示区域的大小,那么右边图片要想在这个区域填满显示,只能大放图片。

          (一个容器A只能装100*100的东西,现在你要放B50*50的东西,那么容器不变,只能把东西变大了,才能填满整个容器)

          选择区域小大,等于右边显示区域大小,不用放大或缩小,刚刚好;

          (一个容器A只能装100*100的东西,现在你要放B100*100的东西,那么容器不变,东西也不变,刚好填满整个容器)

      得出:

      宽的比例值设为:scaleX = 100 / selection.width;

      高的比例值设为:scaleX = 100 / selection.height;

      

      5.2 计算右边图片的大小:

      用得到的这个比例值,去乘以右边图片的宽高,这里的300正是右边图片的宽和高,左边和右边是同一个图片。宽度是一样的。

      右边图片的 Math.round(scaleX * 300),

      右边图片的height: Math.round(scaleY * 300),

     

    六、问题:

      selection.width;

      selection.height

      这两个值如何获得?

      我是想先把宏观的大的东西弄清楚,以后再专门写几篇有关如何获得这个里面关键的值的分析。

      必竟这个插件很大,代码很多复杂,所以只能一步一步的深入了。

     

     

    这是插件网址:http://odyniec.net/projects/imgareaselect/

  • 相关阅读:
    LeeCode(两数相加)
    Linux vim中移动显示横线
    JAVA各版本的区别
    LNMP一键包安装完成后的目录结构
    tp6打开和关闭调试的方式
    windows安装Thinkphp6的过程
    Composer 的安装方法(一)
    解决:libsodium-1.0.17安装失败
    有些国内的安卓APP下载不了的解决办法
    Linux 安装时不能下载的问题处理办法
  • 原文地址:https://www.cnblogs.com/lufy/p/2517898.html
Copyright © 2020-2023  润新知