实战学javascript——用js实现图片剪辑（上）

css

基本结构：主要通过三层叠加实现：最底层的固定不动的半透明图片；中间层的部分不透明的清晰图片；最上层的选取框。

css的clip属性：

img{

   clip:rect(0px,60px,200px,0px)  //剪辑图片的矩形区域，各点坐标作为参数(相对于整个图片的左上角为起始位置)

}

制作选取框的点(minDiv)：

.minDiv{

position:absolute;

width:8px;

height:8px;

background:#fff;

left:50%;  //距离左侧边框50%

margin-left:-4px;  //减去minDiv的一半宽度就可以处于正中间了

top:-4px;  //让它上下也居中

}

鼠标样式变化设定：

在每一个小点div内加上cursor属性

比如在左上角的点：cursor:nw-resize;  //nw头字母分别是north和western

 

js

clientX:获取鼠标的横坐标

clientWidth:可以获取元素的宽度

offsetLeft:元素相对于父元素左边界的距离

编写一个获取元素相对于屏幕最左侧的函数(利用offsetLeft一层一层获取)

function getPosition(node){

var left = node.offsetLeft;

var top = node.offsetTop;

var parent = node.offsetParent;

while(parent != null){

left += parent.offsetLeft;

top += parent.offsetTop

parent = parent.offsetParent;

}

return {“left”:left,”top”:top};

}

注意：offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的，并且是已经进行过css定位的容器元素。

获取鼠标位置：event.clientX;

 

 

 

js实现触点移动

var rightDiv = document.getElementId(“right”);

var mainDiv = document.getElementById(“main”)

var ifKeyDown = false;//鼠标默认为按下状态

rightDiv.onmousedown = function(){//这里要绑定在触点上

ifKeyDown = true;

}

window.onmouseup = function(){

ifKeyDown = false;

}

window.onmousemove = function(e){//鼠标移动事件

if(ifKeyDown == true){

//将下面部分的代码移到这里来，这样就可以鼠标按下时就开始执行了

}

var x = e.clientX;//鼠标x坐标

var addWidth = “”;//鼠标移动后增加的宽度

var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度（减去border的宽度）

addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后增加的宽度

mainDiv.style.width = addWidth + widthBefore + “px”;//选取框变化后的宽度

 

}

此外，我们要让系统知道我们拖动的哪个点，因此设定另一个参数

var contact = “”;//表示按下的触点

这样就可以对应绑定：

rightDiv.onmousedown = function(){

ifKeyDown = true;

contact = “right”;

}

然后在onmousemove的function中，添加对contact的判断

if(contact == “right”){  //这里放右触点触发的函数}