<!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下测试成功