// 原始宽高+((m-e)*-1),原始位置+(m-e)
targetDiv.css({
width: chaX + "px",
height: chaY + "px"
});
break;
case 5:
//如果移动距离接近宽度或高度,则不进行改变
if (chaY <= 10) {
return;
}
// 获得位置差(m-e),先设置宽度和高度,再设置位置
// 原始宽高+((m-e)*-1),原始位置+(m-e)
targetDiv.css({
height: chaY + "px"
});
break;
case 6:
//如果移动距离接近宽度或高度,则不进行改变
if (chaX >= eleSWidth - 10 || chaY <= 10) {
return;
}
// 获得位置差(m-e),先设置宽度和高度,再设置位置
// 原始宽高+((m-e)*-1),原始位置+(m-e)
targetDiv.css({
width: eleSWidth + chaX * -1 + "px",
height: chaY + "px",
left: ox + chaX + "px"
});
break;
case 7:
//如果移动距离接近宽度或高度,则不进行改变
if (chaX >= eleSWidth - 10) {
return;
}
// 获得位置差(m-e),先设置宽度和高度,再设置位置
// 原始宽高+((m-e)*-1),原始位置+(m-e)
targetDiv.css({
width: eleSWidth + chaX * -1 + "px",
left: ox + chaX + "px"
});
break;
default:
break;
}
},
// 裁剪
clipReady() {
this.btnIndex = 3;
this.isMa = false;
this.isDrop = true;
this.isMaClear = false;
},
// 马赛克
paintRectReady() {
this.btnIndex = 1;
this.isMa = true;
this.isDrop = false;
this.isMaClear = false;
},
// 橡皮擦
paintRectClearReady() {
this.btnIndex = 2;
this.isMa = false;
this.isDrop = false;
this.isMaClear = true;
},
// 绘制马赛克
paintRect(e) {
var offT = this.canvas.offsetTop, // 距离上边距离
offL = this.canvas.offsetLeft, // 距离左边距离
x = e.clientX,
y = e.clientY;
if(this.mouseX - x > this.maSize/2 || x - this.mouseX > this.maSize/2 || this.mouseY - y > this.maSize/2 || y - this.mouseY > this.maSize/2){
var oImg = this.ctx.getImageData(x - offL ,y - offT,this.maSize,this.maSize);
var w = oImg.width;
var h = oImg.height;
//马赛克的程度,数字越大越模糊
var num = 6;
//等分画布
var stepW = w/num;
var stepH = h/num;
//这里是循环画布的像素点
for(var i=0;i<stepH;i++){
for(var j=0;j<stepW;j++){
//获取一个小方格的随机颜色,这是小方格的随机位置获取的
var color = this.getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
//这里是循环小方格的像素点,
for(var k=0;k<num;k++){
for(var l=0;l<num;l++){
//设置小方格的颜色
this.setXY(oImg,j*num+l,i*num+k,color);
}
}
}
}
this.ctx.putImageData(oImg,x - offL ,y - offT);









