/**
|
* 手势锁屏插件
|
* varstion 1.0.5
|
* by Houfeng
|
* Houfeng@DCloud.io
|
*/
|
|
(function($, doc) {
|
|
var touchSupport = ('ontouchstart' in document);
|
var startEventName = touchSupport ? 'touchstart' : 'mousedown';
|
var moveEventName = touchSupport ? 'touchmove' : 'mousemove';
|
var endEventName = touchSupport ? 'touchend' : 'mouseup';
|
var lockerHolderClassName = $.className('locker-holder');
|
var lockerClassName = $.className('locker');
|
|
var styleHolder = doc.querySelector('head') || doc.querySelector('body');
|
styleHolder.innerHTML += "<style>.mui-locker-holder{overflow:hidden;position:relative;padding:0px;}.mui-locker-holder canvas{width:100%;height:100%;}</style>";
|
|
var times = 4;
|
|
function getElementLeft(element) {
|
var actualLeft = element.offsetLeft;
|
var current = element.offsetParent;
|
while (current !== null) {
|
actualLeft += current.offsetLeft;
|
current = current.offsetParent;
|
}
|
return actualLeft;
|
}
|
|
function getElementTop(element) {
|
var actualTop = element.offsetTop;
|
var current = element.offsetParent;
|
while (current !== null) {
|
actualTop += current.offsetTop;
|
current = current.offsetParent;
|
}
|
return actualTop;
|
}
|
|
//定义 Locker 类
|
var Locker = $.Locker = $.Class.extend({
|
R: 26,
|
CW: 400,
|
CH: 320,
|
OffsetX: 30,
|
OffsetY: 30,
|
|
/**
|
* 构造函数
|
* */
|
init: function(holder, options) {
|
var self = this;
|
if (!holder) {
|
throw "构造 Locker 时缺少容器元素";
|
}
|
self.holder = holder;
|
//避免重复初始化开始
|
if (self.holder.__locker_inited) return;
|
self.holder.__locker_inited = true;
|
//避免重复初始化结束
|
//
|
self.options = options || {};
|
self.options.callback = self.options.callback || self.options.done || $.noop;
|
self.holder.innerHTML = '<canvas></canvas>';
|
//
|
self.holder.classList.add(lockerHolderClassName);
|
//初始化
|
var canvas = self.canvas = $.qsa('canvas', self.holder)[0];
|
canvas.on = canvas.addEventListener || function(name, handler, capture) {
|
canvas.attachEvent('on' + name, handler, capture);
|
};
|
canvas.off = canvas.removeEventListener || function(name, handler, capture) {
|
canvas.detachEvent('on' + name, handler, capture);
|
};
|
//
|
if (self.options.width) self.holder.style.width = self.options.width + 'px';
|
if (self.options.height) self.holder.style.height = self.options.height + 'px';
|
self.CW = self.options.width || self.holder.offsetWidth || self.CW;
|
self.CH = self.options.height || self.holder.offsetHeight || self.CH;
|
//处理 “宽、高” 等数值, 全部扩大 times 倍
|
self.R *= times;
|
self.CW *= times;
|
self.CH *= times;
|
self.OffsetX *= times;
|
self.OffsetY *= times;
|
//
|
canvas.width = self.CW;
|
canvas.height = self.CH;
|
var cxt = self.cxt = canvas.getContext("2d");
|
//两个圆之间的外距离 就是说两个圆心的距离去除两个半径
|
var X = (self.CW - 2 * self.OffsetX - self.R * 2 * 3) / 2;
|
var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2;
|
self.pointLocationArr = self.caculateNinePointLotion(X, Y);
|
self.initEvent(canvas, cxt, self.holder);
|
//console.log(X);
|
self.draw(cxt, self.pointLocationArr, [], null);
|
setTimeout(function() {
|
self.draw(cxt, self.pointLocationArr, [], null);
|
}, 0);
|
},
|
|
/**
|
* 计算
|
*/
|
caculateNinePointLotion: function(diffX, diffY) {
|
var self = this;
|
var Re = [];
|
for (var row = 0; row < 3; row++) {
|
for (var col = 0; col < 3; col++) {
|
var Point = {
|
X: (self.OffsetX + col * diffX + (col * 2 + 1) * self.R),
|
Y: (self.OffsetY + row * diffY + (row * 2 + 1) * self.R)
|
};
|
Re.push(Point);
|
}
|
}
|
return Re;
|
},
|
|
/**
|
* 绘制
|
*/
|
draw: function(cxt, _PointLocationArr, _LinePointArr, touchPoint) {
|
var self = this;
|
var R = self.R;
|
if (_LinePointArr.length > 0) {
|
cxt.beginPath();
|
for (var i = 0; i < _LinePointArr.length; i++) {
|
var pointIndex = _LinePointArr[i];
|
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
|
}
|
cxt.lineWidth = 2 * times;
|
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
|
cxt.stroke();
|
cxt.closePath();
|
if (touchPoint != null) {
|
var lastPointIndex = _LinePointArr[_LinePointArr.length - 1];
|
var lastPoint = _PointLocationArr[lastPointIndex];
|
cxt.beginPath();
|
cxt.moveTo(lastPoint.X, lastPoint.Y);
|
cxt.lineTo(touchPoint.X, touchPoint.Y);
|
cxt.stroke();
|
cxt.closePath();
|
}
|
}
|
for (var i = 0; i < _PointLocationArr.length; i++) {
|
var Point = _PointLocationArr[i];
|
cxt.fillStyle = self.options.ringColor || "#888"; //圆圈边框颜色
|
cxt.beginPath();
|
cxt.arc(Point.X, Point.Y, R, 0, Math.PI * times, true);
|
cxt.closePath();
|
cxt.fill();
|
cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
|
cxt.beginPath();
|
cxt.arc(Point.X, Point.Y, R - (2 * times), 0, Math.PI * times, true);
|
cxt.closePath();
|
cxt.fill();
|
if (_LinePointArr.indexOf(i) >= 0) {
|
cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色
|
cxt.beginPath();
|
cxt.arc(Point.X, Point.Y, R - (16 * times), 0, Math.PI * times, true);
|
cxt.closePath();
|
cxt.fill();
|
}
|
}
|
},
|
|
isPointSelect: function(touches, linePoint) {
|
var self = this;
|
for (var i = 0; i < self.pointLocationArr.length; i++) {
|
var currentPoint = self.pointLocationArr[i];
|
var xdiff = Math.abs(currentPoint.X - touches.elementX);
|
var ydiff = Math.abs(currentPoint.Y - touches.elementY);
|
var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
|
if (dir < self.R) {
|
if (linePoint.indexOf(i) < 0) {
|
linePoint.push(i);
|
}
|
break;
|
}
|
}
|
},
|
|
initEvent: function(canvas, cxt, holder) {
|
var self = this;
|
var linePoint = [];
|
var isDown = false; //针对鼠标事件
|
//start
|
self._startHandler = function(e) {
|
e.point = event.changedTouches ? event.changedTouches[0] : event;
|
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
|
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
|
self.isPointSelect(e.point, linePoint);
|
isDown = true;
|
};
|
canvas.on(startEventName, self._startHandler, false);
|
//move
|
self._moveHanlder = function(e) {
|
if (!isDown) return;
|
e.preventDefault();
|
e.point = event.changedTouches ? event.changedTouches[0] : event;
|
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
|
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
|
var touches = e.point;
|
self.isPointSelect(touches, linePoint);
|
cxt.clearRect(0, 0, self.CW, self.CH);
|
self.draw(cxt, self.pointLocationArr, linePoint, {
|
X: touches.elementX,
|
Y: touches.elementY
|
});
|
};
|
canvas.on(moveEventName, self._moveHanlder, false);
|
//end
|
self._endHandler = function(e) {
|
e.point = event.changedTouches ? event.changedTouches[0] : event;
|
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
|
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
|
cxt.clearRect(0, 0, self.CW, self.CH);
|
self.draw(cxt, self.pointLocationArr, linePoint, null);
|
//事件数据
|
var eventData = {
|
sender: self,
|
points: linePoint
|
};
|
/*
|
* 回调完成事件
|
*
|
* 备注:
|
* 比较理想的做法是为 Locker 的实例启用事件机制，比如 locker.on('done',handler);
|
* 在 mui 没有完整的公共事件模块前，此版本中 locker 实例暂通过 options.callback 处理
|
*/
|
self.options.callback(eventData);
|
//触发声明的DOM的自定义事件(暂定 done 为事件名，可以考虑更有针对的事件名 )
|
$.trigger(self.holder, 'done', eventData);
|
//-
|
linePoint = [];
|
isDown = false;
|
};
|
canvas.on(endEventName, self._endHandler, false);
|
},
|
|
pointLocationArr: [],
|
|
/**
|
* 清除图形
|
* */
|
clear: function() {
|
var self = this;
|
//self.pointLocationArr = [];
|
if (self.cxt) {
|
self.cxt.clearRect(0, 0, self.CW, self.CH);
|
self.draw(self.cxt, self.pointLocationArr, [], {
|
X: 0,
|
Y: 0
|
});
|
}
|
},
|
|
/**
|
* 释放资源
|
* */
|
dispose: function() {
|
var self = this;
|
self.cxt = null;
|
self.canvas.off(startEventName, self._startHandler);
|
self.canvas.off(moveEventName, self._moveHandler);
|
self.canvas.off(endEventName, self._endHandler);
|
self.holder.innerHTML = '';
|
self.canvas = null;
|
}
|
});
|
|
//添加 locker 插件
|
$.fn.locker = function(options) {
|
//遍历选择的元素
|
this.each(function(i, element) {
|
if (options) {
|
new Locker(element, options);
|
} else {
|
var optionsText = element.getAttribute('data-locker-options');
|
var options = optionsText ? JSON.parse(optionsText) : {};
|
options.lineColor = element.getAttribute('data-locker-line-color') || options.lineColor;
|
options.ringColor = element.getAttribute('data-locker-ring-color') || options.ringColor;
|
options.fillColor = element.getAttribute('data-locker-fill-color') || options.fillColor;
|
options.pointColor = element.getAttribute('data-locker-point-color') || options.pointColor;
|
options.width = element.getAttribute('data-locker-width') || options.width;
|
options.height = element.getAttribute('data-locker-height') || options.height;
|
new Locker(element, options);
|
}
|
});
|
return this;
|
};
|
|
//自动处理 class='mui-locker' 的 dom
|
try {
|
$('.' + lockerClassName).locker();
|
} catch (ex) {}
|
$.ready(function() {
|
$('.' + lockerClassName).locker();
|
});
|
|
}(mui, document));
|
