/** * @param：oPicture 图片dom对象 * @param：oTailor 裁剪区域dom对象 * @param：oShadow 阴影区域dom对象 */ function shadow(oPicture , oTailor , oShadow) { // 左侧阴影区 setAssign(oShadow[0] , 'width' , (parseInt(getCss(oTailor , 'left')) - parseInt(getCss(oPicture , 'left'))) + 'px'); setAssign(oShadow[0] , 'height' , parseInt(getCss(oPicture , 'height')) + 'px'); setAssign(oShadow[0] , 'left' , parseInt(getCss(oPicture , 'left')) + 'px') setAssign(oShadow[0] , 'top' , parseInt(getCss(oPicture , 'top')) + 'px') //右侧阴影区 setAssign(oShadow[2] , 'width' , (parseInt(getCss(oPicture , 'width')) - parseInt(getCss(oTailor ,'width')) - parseInt(getCss(oShadow[0] , 'width'))) + 'px'); setAssign(oShadow[2] , 'height' , parseInt(getCss(oPicture , 'height')) + 'px'); setAssign(oShadow[2] , 'left' , (parseInt(getCss(oTailor , 'left')) + parseInt(getCss(oTailor , 'width'))) + 'px'); setAssign(oShadow[2] , 'top' , parseInt(getCss(oPicture , 'top')) + 'px'); // 上侧阴影区 setAssign(oShadow[1] , 'width' , parseInt(getCss(oTailor , 'width')) + 'px'); setAssign(oShadow[1] , 'height' , (parseInt(getCss(oTailor , 'top')) - parseInt(getCss(oPicture , 'top'))) + 'px'); setAssign(oShadow[1] , 'left' , (parseInt(getCss(oPicture , 'left')) + parseInt(getCss(oShadow[0] , 'width'))) + 'px'); setAssign(oShadow[1] , 'top' , parseInt(getCss(oPicture , 'top')) + 'px'); // 下侧阴影区 setAssign(oShadow[3] , 'width' , parseInt(getCss(oTailor , 'width')) + 'px'); setAssign(oShadow[3] , 'height' , (parseInt(getCss(oPicture , 'height')) - parseInt(getCss(oTailor , 'height')) - parseInt(getCss(oShadow[1] , 'height'))) + 'px'); setAssign(oShadow[3] , 'left' , (parseInt(getCss(oPicture , 'left' )) + parseInt(getCss(oShadow[0] , 'width'))) + 'px'); setAssign(oShadow[3] , 'top' , (parseInt(getCss(oTailor , 'top' )) + parseInt(getCss(oTailor , 'height'))) + 'px'); }
注意在网页实际运用中，如果布局中图片css中没有left或top属性，那么上面代码会产生错误。应该使用offsetLeft与offsetTop代替之。
添加裁剪边框
在放出的布局图中，可以看见裁剪的边沿，四角及四边各有一个小正方形的形状，添加不仅是为了区分裁剪区与非裁剪区，还为下一步添加拉伸裁剪区域提供方便。下面开始编写代码：
/** * 裁剪边框绘制 * @param : oDIv 所有边框对象 * @param : oHandle 点状边沿 * @param : oTailor 裁剪对象 */ function tailorBorder(oDiv , oHandle , oTailor) { // 对边框进行初始化 for (var i = 0; i < oDiv.length; i++) { setAssign(oDiv[i] , 'position' , 'absolute'); setAssign(oDiv[i] , 'top' , '0px'); setAssign(oDiv[i] , 'left' , '0px'); setAssign(oDiv[i] , 'width' , parseInt(getCss(oTailor , 'width')) + 'px'); setAssign(oDiv[i] , 'height' , parseInt(getCss(oTailor , 'height')) + 'px'); } /* 点状边沿绘制 */ // 四角点状边沿绘制 for (var i = 0; i < 4; i++) { // 点状绘制 setAssign(oHandle[i] , 'position' , 'absolute'); setAssign(oHandle[i] , 'width' , '5px'); setAssign(oHandle[i] , 'height' , '5px'); // 0 2 表示左侧点状 if(i % 2 == 0) { setAssign(oHandle[i] , 'left' , '0px'); setAssign(oHandle[i] , 'top' , (i == 0?'0px' : (parseInt(getCss(oTailor , 'height')) - 8) + 'px')); } else { // 右侧点状 setAssign(oHandle[i] , 'left' , ( parseInt(getCss(oTailor , 'width')) - 6 ) + 'px'); setAssign(oHandle[i] , 'top' , (i == 1?'0px' : parseInt(getCss(oTailor , 'height')) - 8 ) + 'px'); } } // 四边点状边框 for (var i = 4; i < oHandle.length; i++) { setAssign(oHandle[i] , 'position' , 'absolute'); setAssign(oHandle[i] , 'width' , '5px'); setAssign(oHandle[i] , 'height' , '5px'); // 4 6 表示上 下 点状边框 if(i % 2 == 0) { setAssign(oHandle[i] , 'left' , parseInt(getCss(oTailor , 'width')) / 2 + 'px'); setAssign(oHandle[i] , 'top' , (i == 4 ? '0px' : (parseInt(getCss(oTailor , 'height')) - 8) + 'px')); } else { // 左右点状 setAssign(oHandle[i] , 'top' , parseInt(getCss(oTailor , 'height')) / 2 + 'px'); setAssign(oHandle[i] , 'left' ,(i == 5 ? '0px' : parseInt(getCss(oTailor , 'width')) - 8 ) + 'px'); } } }
布局中，裁剪区域类名为box_handle的div前四个代表四角的点状，后四个表示边沿中间的点状，都按照顺时针分布。完成后效果如下：
监视阴影区域
裁剪区域与阴影区域绘制完成，现在添加一个小功能，当鼠标点击到非裁剪区时(即阴影区)，取消裁剪区域。