自上一个版本的图片切割效果出来后,虽然也经常看到“框架开发这个如何如何容易”之类的评论,但也受到很多人的肯定,小弟在此感谢大家的支持。
上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。
近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。
要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。
层的拖放 和 层的缩放 我已经在其他两篇文章中有详细说明,这里就说说图片切割这部分吧。
图片切割
关于图片切割的设计,有三个方法:
这里介绍方法3的实现方法,这个方法是从当年“珍藏”的代码中看到的,先说说clip:
clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。”
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。
例如:
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的设置是必须的(详细看手册)。
下面说说具体实现原理:
首先需要一个容器(_Container),容器里面会插入三个层:
其中为了底图层和切割层是程序自动创建的图片,控制层是自己定义的层(程序中是一个div)。
底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角:
this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;
层叠顺序也要设置一下保证各层顺序。