按照老师的思路，按照自己的方式实现了一遍，目前遇到的问题就是如何设置截取范围的最大值与最小值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{background-color: #333; }
#cut_img{
position: absolute;
left:200px ;
top: 100px;
width: 450px;
height: 270px;
}
img{width: 100%;}
#img1{opacity: .7;position: absolute;top: 0;left: 0; }
#img2{
position: absolute;
top: 0;
left: 0;
clip:rect(0px,200px,200px,0px);
}
#cut_box{
position: absolute;
left: 100px;top: 50px;
width: 200px;
height: 200px;
border: 1px solid white;
}
#cut_box div{
position: absolute;
width: 10px;
height: 10px;
background-color: white;
margin-left: -5px;margin-top: -5px;
}
#cut_box_nw{left: 0; top: 0;cursor: nw-resize}
#cut_box_n{left: 50%; top: 0;cursor: n-resize}
#cut_box_ne{left: 100%; top: 0;cursor: ne-resize}
#cut_box_w{left: 0; top: 50%;cursor: w-resize}
#cut_box_e{left: 100%; top: 50%;cursor: e-resize}
#cut_box_sw{left: 0; top: 100%;cursor: sw-resize}
#cut_box_s{left: 50%; top: 100%;cursor: s-resize}
#cut_box_se{left: 100%; top: 100%;cursor: se-resize}
</style>
</head>
<body>
<div id="cut_img">
<img src="抽奖系统/me.jpg" id="img1">
<img src="抽奖系统/me.jpg" id="img2">
<div id="cut_box">
<div id="cut_box_nw"></div>
<div id="cut_box_n"></div>
<div id="cut_box_ne"></div>
<div id="cut_box_w"></div>
<div id="cut_box_e"></div>
<div id="cut_box_sw"></div>
<div id="cut_box_s"></div>
<div id="cut_box_se"></div>
</div>
</div>
</body>
<script type="text/javascript">
document.onselectstart = new Function("event.returnValue=false");
// 获取元素性对于屏幕的左边的距离
let cut_img = document.getElementById("cut_img");
let img2 = document.getElementById("img2");
let cut_box = document.getElementById("cut_box");//剪切主盒子
let cur_box = "";//判断点击的是哪个盒子
setClip(img2);
// 事件委托
cut_box.onmousedown = function(e){
e.stopPropagation();//阻止冒泡
cur_box = e.target.getAttribute("id");//获取id名
window.onmousemove = function(e){
switch (cur_box) {
case "cut_box_e" : right(e); break;
case "cut_box_s" : down(e);break;
case "cut_box_w" : left(e); break;
case "cut_box_n" : up(e); break;
case "cut_box_ne": right(e);up(e);break;
case "cut_box_se": right(e);down(e); break;
case "cut_box_sw": left(e);down(e); break;
case "cut_box_nw": left(e);up(e); break;
default:break;
}
setClip(img2);
}
}
window.onmouseup = function(e){//鼠标松开
window.onmousemove = null ;
}
function right(e){
let cut_box_w = cut_box.offsetWidth - 2 ;//获取父盒子的宽度
let cut_box_pl = getPosition(cut_box).left;//选区框left
let cursor_x = e.clientX;//获取鼠标的x坐标
let addWidth = cursor_x - cut_box_w - cut_box_pl ;//鼠标移动距离
cut_box.style.width = cut_box_w + addWidth +'px';
}
function down(e){
let cut_box_h = cut_box.offsetHeight - 2 ;//获取父盒子的高度
let cut_box_pt = getPosition(cut_box).top;//选区框top
let cursor_y = e.clientY;//获取鼠标的y坐标
let addHeight = cursor_y - cut_box_h - cut_box_pt ;//鼠标移动距离
cut_box.style.height = cut_box_h + addHeight +'px';
}
function up(e){
let cut_box_h = cut_box.offsetHeight - 2 ;//获取父盒子的高度
let cut_box_pt = getPosition(cut_box).top;//选区框top
let cursor_y = e.clientY;//获取鼠标的y坐标
let addHeight = Math.min(cut_box_h - 5, cursor_y - cut_box_pt ) ;//鼠标移动距离
cut_box.style.height = Math.min(cut_img.offsetHeight, cut_box_h - addHeight) +'px';
cut_box.style.top = Math.max(0, cut_box.offsetTop + addHeight) + 'px';
}
function left(e){
let cut_box_w = cut_box.offsetWidth - 2 ;//获取父盒子的宽度
let cut_box_pl = getPosition(cut_box).left;//选区框left
let cursor_x = e.clientX;//获取鼠标的x坐标
let addWidth = Math.min(cut_box_w-5, cursor_x - cut_box_pl) ;//鼠标移动距离
cut_box.style.width = Math.min(cut_img.offsetWidth, cut_box_w - addWidth) +'px';
cut_box.style.left = Math.max(0, cut_box.offsetLeft + addWidth) + 'px';
}
function getPosition(node){
var left = node.offsetLeft;
var top = node.offsetTop;
var parent = node.offsetParent;
while (parent != null) {
// statement
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {left, top} ;
}
function setClip(node){
// top , right , bottom , left
let top = cut_box.offsetTop+"px";
let right = cut_box.offsetLeft+cut_box.offsetWidth-2 + "px";
let bottom= cut_box.offsetHeight+cut_box.offsetTop-2 + "px";
let left = cut_box.offsetLeft + "px";
node.style.clip = "rect("+top+","+right+","+bottom+","+left+")";
}
</script>>
</html>
