下面说说各部分的作用：

• 容器：
  除了容器本身的作用，通过设置其背景色来设置透明的渐变色，由于图片本身没有背景色所以要通过容器来设置；
• 底图层：
  在容器最底部，作用是显示非选择区域的图片，透明效果就是在这层设置；
• 切割层：
  最关键的一个层，在底图层和控制层之间，在这个层通过clip设置其可视区域来实现切割图片的效果；
• 控制层：
  位于顶部，拖放(_drag)和缩放(_resize)效果就是在这个层实现，根据其拖放和缩放的结果控制切割层的切割效果。

这里要注意的是控制层的_drag拖放效果的Transparent要设为true（详细看拖放效果的透明背景bug部分）。
要使用缩放需要把Resize设为true，并设置各个拖拉对象，程序通过_resize设置缩放的比例和最少范围（详细看拖拉缩放效果）。

下面说说控制层如何控制切割效果：
控制层的拖放和缩放过程中加入了SetPos设置切割样式程序，在SetPos程序中根据控制层的样式设置切割层的可视区域范围：

var p = this.GetPos();
this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)";

其中GetPos程序，它可以把当前控制层的样式参数作为一个对象返回：

with(this._layHandle){
    return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }
}

如果理解了的话就会觉得其实原理挺简单的，不过要想出来还是要一定创意才行，为想出这个方法的人致敬！

切割预览

预览效果需要设置Preview属性为预览容器对象，程序会自动给容器插入一个预览对象（图片）。
预览效果效果的关键在于如何根据控制层的数据来给预览对象定位，这个主要在SetPreview预览效果程序中处理。
首先根据控制层的高宽比置预览对象显示的宽和高（不是图片本身的宽高哦），这里可以用GetSize程序获取：

var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height;

其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小：

var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight;
//按比例设置
if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; }
if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; }
//返回尺寸对象
return { Width: iWidth, Height: iHeight }

可以看出如果后两个参数（viewWidth和this.viewHeight）都不设置就会按原来大小显示了， 然后再按预览图跟控制层的比例设置预览图的样式参数：
var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = o.Top * scale, pLeft = o.Left * scale;

最后根据参数对预览对象进行样式设置和切割：

with(this._view.style){
    //设置样式
    width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px";
    //切割预览图
    clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)";
}

这里有点烦乱，但应该不难理解就不详细说明了。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript 图片切割效果 [1] 下一页 JavaScript 图片切割效果 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。