mobileoa-common-modules/app/scripts/modules/gesturepassword/directives/gesturePasswordScreen.js

移动办公平台前端公共功能模块

'use strict';
var angular = require('angular');
require('../modules');
require('../services/GraphicsStateContext');
require('../services/GraphicsDrawContext');
require('ngIonic');

var module = angular.module('gesturepassword.directives.screen');
module.directive('gesturePasswordScreen', function(GraphicsStateContext, 
	GraphicsDrawContext, Timer, $parse, $rootScope, $window, $timeout) {

	function initCanvas(canvas, screenContext, ratio) {
		canvas.width = screenContext.contentWidth * ratio;
		canvas.height = screenContext.contentHeight * ratio;
		canvas.style.width = screenContext.contentWidth + 'px';
		canvas.style.height = screenContext.contentHeight + 'px';
		canvas.style.top = screenContext.layout.content.startY + 'px';
		canvas.style.left = screenContext.layout.content.startX + 'px';
	}

	var requestAnimationFrame = $window.requestAnimationFrame ||
			$window.webkitRequestAnimationFrame;

	var rafSupported = !!requestAnimationFrame;
	var raf = rafSupported? requestAnimationFrame : function(fn) {
		$timeout(fn, 16.66, false); // 1000 / 60 = 16.666
	};

	return {
		restrict: 'E',
		replace: true,
		template: '<div class="gesturepasswordscreen">\
			<canvas class="gesturepasswordscreen-bg"></canvas>\
			<canvas class="gesturepasswordscreen-layer2"></canvas>\
			<canvas class="gesturepasswordscreen-layer3"></canvas>\
		</div>',
		link: function(scope, element, attrs) {
			var screenContext = $parse(attrs.screenContext)(scope),
				bgCanvas = element[0].firstElementChild,
				layer2Canvas = bgCanvas.nextElementSibling,
				layer3Canvas = layer2Canvas.nextElementSibling,
				bgCanvasContext = bgCanvas.getContext('2d'),
				layer2CanvasContext = layer2Canvas.getContext('2d'),
				layer3CanvasContext = layer3Canvas.getContext('2d'),
				ratio = window.devicePixelRatio;

			initCanvas(bgCanvas, screenContext, ratio);
			initCanvas(layer2Canvas, screenContext, ratio);
			initCanvas(layer3Canvas, screenContext, ratio);

			var drawContext = new GraphicsDrawContext(screenContext,
					bgCanvasContext, layer2CanvasContext, layer3CanvasContext);

			function draw() {
				drawContext.draw();
			}

			var destroyed = false;
			function beginAutoDraw() {
				if (!destroyed) {
					draw();
					requestAnimationFrame(function() {
						beginAutoDraw();
					});
				}
			}

			function endAutoDraw() {
				draw();
			}

			element[0].addEventListener('touchstart', function(e) {
				screenContext.startMove(e.touches[0].pageX, e.touches[0].pageY);
				$rootScope.$broadcast('gesture.touchstart');
				e.preventDefault();
				e.stopPropagation();
			}, false);

			element[0].addEventListener('touchmove', function(e) {
				screenContext.move(e.touches[0].pageX, e.touches[0].pageY);
				e.preventDefault();
				e.stopPropagation();
			}, false);

			element[0].addEventListener('touchend', function(e) {
				screenContext.endMove();
				$rootScope.$broadcast('gesture.touchend');
				e.preventDefault();
				e.stopPropagation();
			}, false);

			// 200ms以后开始渲染canvas 转场动画结束
			var delayTimerId = Timer.delay(function() {
				beginAutoDraw();
			}, 200);
			
			scope.$on('$destroy', function() {
				destroyed = true;
				endAutoDraw();
				delayTimerId = undefined;
				screenContext = undefined;
				ratio = undefined;
				element[0].remove();
			});
		}
	};
});