请教restPoint的问题
(function(){
//思路
/*实现画圆和划线：
1.添加事件touchstart，touchmove，touchend
2.touchstart判断点击的位置是否处于圆圈内 getPosition，处于圆圈内则初始化，没有就不做任何操作
lastpoint，restpoint
3.touchmove做的就是：画圆drawPoint 和划线 drawLine*/
/*实现自动画圆的效果
1.检测手势移动的位置是否处于圆内
2.圆内的画则需要画圆
3.但是需要检测不重复画圆*/
//给window定义一个全局变量，因为是全局变量，所以外面可以调用，就是给传入的对象定义宽和高
window.canvasLock = function(obj){
this.height = obj.height;
this.width = obj.width;
//指一行圆圈的个数，已经在调用这个函数的里面传入了chooseType的值，所以可以直接使用
this.chooseType = obj.chooseType;
};
//js方式动态生成dom
canvasLock.prototype.initDom = function(){
//document.createElement()是创建一个元素对象，这里是创建了一个div
var wrap = document.createElement("div");
//定义了一个h4标签，以及它的样式
var str = "<h4 id='title' class='title'>绘制解锁图案</h4>";
//为div设置样式属性
wrap.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");
//创建一个canvas
var canvas = document.createElement("canvas");
//为canvas设置id
canvas.setAttribute("id","canvas");
//为canvas添加样式
canvas.style.cssText = "background-color:#305066;diaplay:inline-block;margin-top:15px;";
//把h4标签放到了div中
wrap.innerHTML = str;
//将canvas生成到div中
wrap.appendChild(canvas);
var width = this.width || 300;
var height = this.height || 300;
//将div放在body中
document.body.appendChild(wrap);
canvas.style.width = width+"px";
canvas.style.height = height+"px";
//将canvas的宽和高都等于上面定义的宽和高
canvas.width = width;
canvas.height = height;
}
//画圆的函数
canvasLock.prototype.drawCle = function(x,y){
this.ctx.strokeStyle = "#CFE6FF";
this.ctx.lineWidth = 2;
this.ctx.beginPath();
//画出圆
this.ctx.arc(x,y,this.r,0,2*Math.PI*2,true);
this.ctx.closePath();
this.ctx.stroke();
}
//定义生成圆圈的函数
canvasLock.prototype.createCircle = function(){
//定义变量n为圆圈的个数
var n = this.chooseType;
var count = 0;
//定义圆的半径为r,根据圆的半径和canvas宽度的关系计算出这个公式
this.r = this.ctx.canvas.width/(2+4*n);
this.lastPoint = [];
//定义圆的中心点坐标为一个数组
this.arr = [];
this.restPoint = [];
var r = this.r;
for(var i=0;i<n;i++){
for(var j=0;j<n;j++){
count++;
var obj = {
x: j*4*r+3*r,
y: i*4*r+3*r,
index: count
};
//将obj的值存入arr中
this.arr.push(obj);
//将obj的值存入restPoint中
this.restPoint.push(obj);
}
}
//清除画布中的内容
this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
//循环每个arr值，将值传入画圆的函数中
for(var i=0;i<this.arr.length;i++){
this.drawCle(this.arr[i].x,this.arr[i].y);
}
}
//给canvasLock原型上定义一个init函数，就是调用initDom，程序初始化
canvasLock.prototype.init = function(){
this.initDom();
//获取canvas
this.canvas = document.getElementById("canvas");
this.ctx = this.canvas.getContext("2d");
//定义一个触摸标志，初始状态为false
this.touchFlag = false;
//调用生成圆圈的函数
this.createCircle();
this.bindEvent();
}
canvasLock.prototype.bindEvent = function(){
var self = this;
//点击时的事件
this.canvas.addEventListener("touchstart",function(e){
//2.touchstart判断点击的位置是否处于圆圈内 getPosition，处于圆圈内则初始化，没有就不做任何操作
//lastpoint，restpoint
//po有x和y，并且是相较于canvas的边距
var po = self.getPosition(e);
//判断是否在圆内的原理，多出来的这条x或者y < r，就是在圆内
for(var i=0;i<self.arr.length;i++){
//Math.abs(x),是取x的绝对值
//判断触点是否在圆内，如果触点到canvas边距的值减去圆中心点的坐标值小于圆的半径，则在圆内
if(Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y < self.r)){
//touchFlag 触觉标志
//当我们点击的是在圆圈以内，touchFlag就变为true
self.touchFlag = true;
//lastPoint存放的是选中的圆圈的X和Y轴坐标值
self.lastPoint.push(self.arr[i]);
self.restPoint.splice(i,1);
break;
}
}
},false);
//点击之后移动的事件
this.canvas.addEventListener("touchmove",function(e){
if(self.touchFlag){
self.update(self.getPosition(e));
}
},false);
this.canvas.addEventListener("touchend",function(e){
},false);
}
canvasLock.prototype.getPosition = function(e){
//currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
//getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
//所以这里rect获取的是这个事件元素相对浏览器视窗的位置
var rect = e.currentTarget.getBoundingClientRect();
var po = {
//e.touches应用于移动端触摸事件，这里touches表示只用一根手指触摸
//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
//所以这里就是触摸时的坐标减去元素的左边和上边的坐标，得到的是相较于canvas的坐标值
//devicePixelRatio它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素
x: (e.touches[0].clientX - rect.left),
y: (e.touches[0].clientY - rect.top)
};
return po;
}
canvasLock.prototype.update = function(po){
//核心变换方法在touchmove时候调用
//首先清除画布
this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
//再把九个圆重新画上去
for(var i=0;i<this.arr.length;i++){
this.drawCle(this.arr[i].x,this.arr[i].y);
}
//画圆
this.drawPoint();
//画线
this.drawLine(po);
/*1.检测手势移动的位置是否处于圆内
2.圆内的画则需要画圆
3.但是需要检测不重复画圆*/
for (var i = 0 ; i < this.restPoint.length ; i++) {
if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
//如果在圆内就画中间的圆
this.drawPoint();
this.lastPoint.push(this.restPoint[i]);
this.restPoint.splice(i, 1);
break;
}
}
}
// 画线
canvasLock.prototype.drawLine = function(po){
this.ctx.beginPath();
//线条宽度为3
this.ctx.lineWidth = 3;
//线的起点位置为第一个点的x和y坐标
this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);
for(var i=1;i<this.lastPoint.length;i++){
this.ctx.lineTo(this.lastPoint[i].x,this.lastPoint[i].y);
}
//终点为触点的坐标
this.ctx.lineTo(po.x,po.y);
this.ctx.stroke();
this.ctx.closePath();
}
//画圆
canvasLock.prototype.drawPoint = function(){
for(var i=0;i<this.lastPoint.length;i++){
this.ctx.fillStyle = "#cfe6ff";
this.ctx.beginPath();
this.ctx.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r/2,0,2*Math.PI,true);
this.ctx.closePath();
this.ctx.fill();
}
}
})()请问canvasLock.prototype.bindEvent 函数中的
self.restPoint.splice(i,1);
和下面的canvasLock.prototype.update 函数中的
this.lastPoint.push(this.restPoint[i]);
this.restPoint.splice(i, 1);
请问这两个分别是什么意思呢？不是很懂，麻烦解释下谢谢
11
收起
正在回答 回答被采纳积分+1
1回答
相似问题
关于restPoint
30
0
4
关于学习方法的问题请教老师
14
1
3
请求地址被转换而产生的无法写入cookie的问题
44
1
4
教学服务问题
11
0
3
老师请教一下问题
1
0
4
登录后可查看更多问答，登录/注册
HTML5&CSS3进阶与常用框架 2018
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础，热爱前端并希望在前端应用方面不断进步，那就来吧，本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等，助你进一步提升前端开发技能
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星