canvas 层的控制

最新推荐文章于 2024-02-28 21:15:00 发布
老玉米绝壁凶残
最新推荐文章于 2024-02-28 21:15:00 发布
阅读量1k
点赞数
本文链接：https://blog.csdn.net/ymkangg/article/details/40660291
版权
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  <title>Document</title>
 </head>
 <body>
  <canvas  id ="myCanvas" width="800" height="800"></canvas>
  <span></span>
<script>
canvasFn = {};
canvasFn.isEmpty = function($var) {
	if (typeof $var == 'undefined' || $var == 0 || $var == '' || $var == null || $var == false) {
		return true;
	}
	return false;
}
canvasFn.element = null;
canvasFn.width = 800;
canvasFn.height = 800;
canvasFn.target = null;
canvasFn.setCanVas = function($name, $width, $height ){
	canvasFn.element = $($name);
	canvasFn.element.width = $width;
	canvasFn.element.height = $height;
	canvasFn.target = $(canvasFn.element)[0].getContext("2d"); 
	canvasFn.frame();
	canvasFn.fpsFn();
	canvasFn.action.init();

}
/*-----------filter-----------*/
canvasFn.filter = {};
canvasFn.filter.core= {};
canvasFn.filter.core.alpha = function( $data,picLength,$alphaNum ) {
	for (var i = 0; i < picLength * 4; i += 4) {

	  // First bytes are red bytes.        
	  // Second bytes are green bytes.
	  // Third bytes are blue bytes.
	  // Fourth bytes are alpha bytes
	  // Test of alpha channel at 50%.
	  $data[i + 3] = $alphaNum;
	}
	return $data;
}
canvasFn.filter.alpha = function($x,$y,$width,$height,$alphaNum){
	var $data = canvasFn.target.getImageData($x,$y,$width,$height);
	var picLength = $width*$height;
	$data = canvasFn.filter.core.alpha($data,picLength,$alphaNum);
	canvasFn.target.putImageData($data, $x, $y);
}
canvasFn.layers = [];
canvasFn.getlayer = function($arguments) {
	var $layer = {};
	$layer.name = canvasFn.isEmpty($arguments['name']) ?  'layer' : $arguments['name'];
	$layer.x = canvasFn.isEmpty($arguments['x']) ? 0 : $arguments['x'];
	$layer.y = canvasFn.isEmpty($arguments['y']) ? 0 : $arguments['y'];
	$layer.width = canvasFn.isEmpty($arguments['width']) ? 100 : $arguments['width'];
	$layer.height = canvasFn.isEmpty($arguments['height']) ? 100 : $arguments['height'];
	$layer.z = canvasFn.isEmpty($arguments['z']) ? 0 : $arguments['z'];
	$layer.color = canvasFn.isEmpty($arguments['color']) ? '#2e2e2e' : $arguments['color'];
	$layer.img = canvasFn.isEmpty($arguments['img']) ? null : $arguments['img'];
	$layer.alpha = canvasFn.isEmpty($arguments['alpha']) ? 255 : $arguments['alpha'];
	if (!canvasFn.isEmpty($layer.img)) {
		$layer.width == 100 ? $layer.width = $layer.img.width : $layer.width = $layer.width;
		$layer.height == 100 ? $layer.height = $layer.img.height : $layer.height = $layer.height;
	}
	$layer.x1 = $layer.x + $layer.width;
	$layer.y1 = $layer.y + $layer.height;
	$layer.fn = { 'mouseup':[],'mousedown':[],'drag':[], 'leftclick':[], 'rightclick':[], 'mousemove':[] };
	$layer.mouseup = function( $fn ){
		$layer.fn['mouseup'].push( $fn );
	}
	$layer.mousedown = function( $fn ){
		$layer.fn['mousedown'].push( $fn );
	}
	$layer.leftclick = function( $fn ){
		$layer.fn['leftclick'].push( $fn );
	}
	$layer.rightclick = function( $fn ){
		$layer.fn['rightclick'].push( $fn );
	}
	$layer.mousemove = function( $fn ){
		$layer.fn['mousemove'].push( $fn );
	}
	$layer.drag = function( $fn ){
		$layer.fn['drag'].push( $fn );
	}
	return $layer;
}
canvasFn.selectLayer = function( $name ){
	for(var $i in canvasFn.layers ){
		if(canvasFn.layers[$i].name == $name){
			return canvasFn.layers[$i];
		}
	}
}
canvasFn.addLayer = function($layer) {
	canvasFn.layers.push($layer);
	if (canvasFn.layers.length > 1) {
		canvasFn.layers.sort(function(a, b) {
			return a['z'] - b['z'];
		})
	}

}
canvasFn.createLayerAndIn = function($arguments) {
	var $layer = canvasFn.getlayer($arguments);
	canvasFn.addLayer($layer);
	//canvasFn.init();
}
canvasFn.addImg = function($url) {
	var img = new Image()
	img.src = $url;
	img.onload = function() {
		$layer = canvasFn.getlayer({
			'img': img
		});
		canvasFn.addLayer($layer);
		//canvasFn.init();
	}
}
canvasFn.frameTime = 0;
canvasFn.init = function() {
	canvasFn.target.clearRect(0,0,canvasFn.width,canvasFn.height);
	for (var $i in canvasFn.layers) {
		var $layer = canvasFn.layers[$i];
		//canvasFn.target.clearRect($layer.x, $layer.y, $layer.width, $layer.height);
		if (!canvasFn.isEmpty($layer.img)) {
			canvasFn.target.drawImage($layer.img, $layer.x, $layer.y, $layer.width, $layer.height);
		} else {
			canvasFn.target.fillStyle = $layer.color;
			canvasFn.target.fillRect($layer.x, $layer.y, $layer.width, $layer.height);
			canvasFn.target.stroke();
		}
	}
	canvasFn.frameTime++;
	if (canvasFn.frameTime > 1000000) {
		canvasFn.frameTime = 0;
	}
}
canvasFn.frame = function() {
	setTimeout(function() {
		canvasFn.init();
		canvasFn.frame()
	}, 5);
}
canvasFn.fps = 0;
canvasFn.fpsFn = function() {
	canvasFn.fpsFn.prev = canvasFn.frameTime;
	setInterval(

	function() {
		canvasFn.fpsFn.now = canvasFn.frameTime;
		canvasFn.fps = (canvasFn.fpsFn.now - canvasFn.fpsFn.prev) / 0.1
		canvasFn.fpsFn.prev = canvasFn.fpsFn.now;
		$("span").text(canvasFn.fps);
	}, 100);
}









canvasFn.actionPoint = {
	'x': 0,
	'y': 0,
	'time': 0
};

canvasFn.action = {};
canvasFn.action.points = {'mouseup':[],'mousedown':[],'drag':[], 'leftclick':[], 'rightclick':[], 'mousemove':[]};
canvasFn.action.mousedown = function( $e ){//添加点
	if( canvasFn.action.points['mousedown'].length > 20 ){
		canvasFn.action.points['mousedown'].shift();
	}
	canvasFn.action.points['mousedown'].push($e);
}
canvasFn.action.mousemove = function( $e ){
	if( canvasFn.action.points['mousemove'].length > 20 ){
		canvasFn.action.points['mousemove'].shift();
	}
	canvasFn.action.points['mousemove'].push($e);
}
canvasFn.action.drag = function( $e ){
	if( canvasFn.action.points['drag'].length > 20 ){
		canvasFn.action.points['drag'].shift();
	}
	canvasFn.action.points['drag'].push($e);
}
canvasFn.action.mouseup = function( $e ){	
	if( canvasFn.action.points['mouseup'].length > 20 ){
		canvasFn.action.points['mouseup'].shift();
	}
	canvasFn.action.points['mouseup'].push($e);
}

canvasFn.action.targets = { 'mouseup':[],'mousedown':[],'drag':[], 'leftclick':[], 'rightclick':[], 'mousemove':[] };


canvasFn.action.init = function(){


	$(document).ready(function(){   
			   $(canvasFn.element).bind("contextmenu",function(e){   
				   return false;   
			   });   
	});

	canvasFn.action.callFn = function( $name ){
		for( var $i in canvasFn.action.targets[$name] ){
			var $target = canvasFn.action.targets[$name][$i];;
			if($target.fn[$name].length == 0 ){
				continue;
			}
			for( var $i in $target.fn[$name] ){
				var $fn = $target.fn[$name][$i];
				//if( typeof $fn == 'undefined'){
					$fn.call( $target,canvasFn.action.points[$name] );
				//}
			}
		}
	}
	canvasFn.action.addTarget = function( $name, e ){
		canvasFn.action.targets[$name] = [];
		$length = canvasFn.layers.length;
		for (var $i = $length - 1; $i > -1; $i--) {
			canvasFn.layers[$i].x1 = canvasFn.layers[$i].x + canvasFn.layers[$i].width;
			canvasFn.layers[$i].y1 = canvasFn.layers[$i].y + canvasFn.layers[$i].height;
			if (canvasFn.layers[$i].x < e.pageX && canvasFn.layers[$i].y < e.pageY && canvasFn.layers[$i].x1 > e.pageX && canvasFn.layers[$i].y1 > e.pageY) {
				canvasFn.action.targets[$name].push( canvasFn.layers[$i] );
			}
		}
	}

	$(canvasFn.element).mousedown(function(e) {
		canvasFn.action.mousedown(e);
		canvasFn.action.addTarget('mousedown',e);
		canvasFn.action.callFn('mousedown');
	});
    
	$(canvasFn.element).mousemove( function(e) {
		canvasFn.action.mousemove(e);
		canvasFn.action.addTarget('mousemove',e);
		canvasFn.action.callFn('mousemove');
		if(canvasFn.action.points['mousedown'].length>0 ){
			var $downe = canvasFn.action.points['mousedown'][canvasFn.action.points['mousedown'].length -1];
			if( canvasFn.action.points['mouseup'].length>0 ){
				if( canvasFn.action.points['mouseup'][canvasFn.action.points['mouseup'].length -1]['timeStamp'] > $downe.timeStamp){
					return ;
				}
			}
			if( $downe.button == 0 ){
				canvasFn.action.targets['drag'] = canvasFn.action.targets['mousedown'];
				canvasFn.action.drag(e);
				canvasFn.action.callFn('drag');
			}
		}
	} )
	
	$(canvasFn.element).mouseup(function(e) {
		canvasFn.action.mouseup(e);
		canvasFn.action.addTarget('mouseup',e);
		canvasFn.action.callFn('mouseup');
		if(canvasFn.action.points['mousedown'].length>0){
			var $downe = canvasFn.action.points['mousedown'][canvasFn.action.points['mousedown'].length -1];
			if(e.timeStamp - $downe.timeStamp < 100){
				if( e.button == 0 ){
					canvasFn.action.addTarget('leftclick',e);
					canvasFn.action.callFn('leftclick');
				}
				if( e.button == 2  ){
					canvasFn.action.addTarget('rightclick',e);
					canvasFn.action.callFn('rightclick');
				}
			}
		}
	});



}




$(function() {
	canvasFn.setCanVas( '#myCanvas', 800, 800 );
	canvasFn.addImg('1.jpg');
	canvasFn.createLayerAndIn({
		'name':'red',
		'x': 20,
		'y': 20,
		'width': 460,
		'height': 690,
		'z': 20,
		'color':'rgba(255,0,0,0.5)'
	})
	canvasFn.createLayerAndIn({
		'name':'green',
		'x': 20,
		'y': 20,
		'width': 460,
		'height': 690,
		'z': 20,
		'color':'rgba(0,255,0,0.5)'
	})
	canvasFn.selectLayer('red').drag( function( $points ){
		//console.log($points);
		 var $key = $points.length-1;
		 if($key>0){
			 var $weiyiX = $points[$key].pageX - $points[$key-1].pageX;
			 var $weiyiY = $points[$key].pageY - $points[$key-1].pageY;
			 this.x = this.x + $weiyiX;
			 this.y = this.y + $weiyiY;
		 }
	} )
})
</script>
 </body>
</html>
chrome下测试成功
老玉米绝壁凶残
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 层的控制

Document canvasFn = {};canvasFn.isEmpty = function($var){if( typeof $var == 'undefined'|| $var== 0 || $var == ''|| $var== null || $var == false){return true;}return false;
复制链接

扫一扫