easelJS入门、事件、spritesheet

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EaselJS: API Test 2</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/index026_4.js"></script>
<script type="text/javascript">
console.log('a');
</script>
<style type="text/css" >
#demo1{
border:1px solid red;
}
</style>
</head>
<body>
<img id='img01' src='./assets/img.png' />
<canvas id="demo1" width="960" height="400"></canvas>
</body>
</html>
//var img = new Image();
//img.src = './assets/daisy.png';
//img.onload = funLineTo;
//乌夜啼 五代 南唐 李煜
//昨夜风兼雨,帘帏飒飒秋声。 //帏-音围,
//烛残漏断频欹枕,起坐不能平。 //欹-音期
//世事漫随流水,算来一梦浮生。
//醉乡路稳宜频到,此外不堪行。
//帏-音围,欹-音期 $(function() {
funLineTo();
});
function funLineTo(e) {
var stage = new createjs.Stage('demo1');
// var shape = new createjs.Shape(new createjs.Graphics().beginStroke(STROKE_COLOR).moveTo(5, 35).lineTo(110, 75).endStroke());
var shape = new createjs.Shape();
shape.graphics.beginStroke('blue').moveTo(5, 35).lineTo(110, 75);
shape.graphics.beginStroke('red').moveTo(5, 40).lineTo(110, 80);
shape.graphics.beginStroke('blue').moveTo(50, 20).arcTo(150, 20, 150, 70, 50);
shape.graphics.beginStroke('red').moveTo(50,20).lineTo(100,20).moveTo(150,70).lineTo(150,20);
// 不用连缀写法会使代码长一些
// shape.graphics.beginStroke('red');
// shape.graphics.moveTo(5,45);
// shape.graphics.lineTo(110,85);
// shape.graphics.endStroke();
// 可以不停的连缀写
// shape.graphics.beginStroke('red').moveTo(5, 50).lineTo(110, 90).lineTo(5,55).lineTo(110,95);
// 必须添加到stage上面
var g = shape.graphics;
// g.beginStroke('red').moveTo(0,100).quadraticCurveTo(50,150,100,100).quadraticCurveTo(150,50,200,100);
// g.beginStroke('blue').moveTo(0,100).lineTo(200,100);
// g.setStrokeStyle(3).beginStroke('green').moveTo(0,100).bezierCurveTo(50,150,150,50,200,100); // 可以使用这样的方式统一进行颜色的配置
// 颜色数组,比例数组;(0,0)->(100,0)和(0,0)->(100,100)两种情况
var g1 = g.beginLinearGradientStroke(['#000','#fff','#000'],[0,0.5,1],0,0,100,0);
g1.moveTo(0,100).lineTo(100,100);
g1.drawRect(20,20,100,100);
g.beginStroke('rgba(0,0,0,1)').moveTo(0,110).lineTo(100,110).endStroke(); // 先endStroke()竟然可以把之前的设置清除;
// g.endStroke().beginFill('#ff0').rect(5,5,100,100);
// g.beginStroke('red').rect(10,10,100,100);
// g.beginFill('#f00').drawRoundRect(5,5,100,100,5);
// g.beginFill('#ff0').drawCircle(50,50,20);
// g.beginRadialGradientFill(['#f00','#0f0','#00f'],[0,0.5,1],50,50,0,50,50,30).drawCircle(50,50,30);
// g.beginFill('#ff0').drawEllipse(50,50,20,30); // g.beginFill('#ff0').drawPolyStar(50,50,30,5,0.5,90).endFill();
// g.beginFill('#ff0').drawPolyStar(50,50,30,5,0.5,0).endFill();
// g.beginStroke('#f00').drawCircle(50,50,30).drawCircle(50,50,15); //或者使用img.onload=fun方式加载
// g.setStrokeStyle(25).beginBitmapStroke($('#img01').get(0)).rect(5,5,100,100); // 左右右左x上下
// g.beginStroke('#f00').drawRoundRectComplex(5,5,70,70,5,10,15,20); // 注意bitmapFill是从什么地方开始重复的;
// g.beginBitmapFill($('#img01').get(0),'repeat-x').rect(5,0,30,30);
// 这样还能够看见
// g.beginBitmapFill($('#img01').get(0),'no-repeat').rect(0,0,30,30);
// 这样就看不见了
// g.beginBitmapFill($('#img01').get(0),'no-repeat').rect(10,10,30,30); // var g2 = g.beginLinearGradientFill(['#000','#fff'],[1,0],0,100,100,100);
// g2.drawRect(0,0,200,200); // 可以清空之前的绘制;
g.clear(); // 文字是单独的对象
var txt = new createjs.Text('hello','arial 14pt','#f00');
txt.y = 45;
txt.x = 45;
txt.textAlign = 'left';//'right';//'start';//'center';//'left';//default is left
txt.textBaseline = 'middle';
stage.addChild(txt);
g.beginStroke('#0f0').moveTo(45,45).lineTo(65,45).moveTo(45,45).lineTo(45,65); stage.addChild(shape);
// 必须进行update才可以显示
stage.update();
} //var name = "The Window";
//var object = {
// name : "My Object",
// getNameFunc : function() {
// console.log("1:"+this);
// return function() {
// console.log("2:"+this);
// return this.name;
// };
// }
//};
//alert(object.getNameFunc()());
//console.log(object.getNameFunc());
//console.log(object.getNameFunc()());
$(function() {
init();
});
function init(e) {
var stage = new createjs.Stage('demo1');
// 增加一个set可以使圆形整个进行偏移;
var shape = new createjs.Shape();//.set({x:100,y:100,alpha:0.5});
// arc(x,y,radius,angleStart,angleEnd,clockwise)
shape.graphics.beginStroke('red').arc(50,50,20,0,Math.PI*0.5,true);
shape.graphics.beginStroke('red').arc(60,60,20,0,Math.PI*0.5,false);
// 使用set导致了偏移,这个进行定位;不仅仅是偏移,还有其他的属性;
var shape2 = new createjs.Shape();
shape2.graphics.beginStroke('blue').moveTo(100,100).lineTo(150,100);
shape2.graphics.beginStroke('blue').moveTo(150,150).lineTo(200,150);
// shape2.clear()导致都不显示了;
// shape2.clear();
stage.addChild(shape2); // 先绘制个圆,进行BlurFilter的研究
shape.graphics.beginFill('red').drawCircle(200,50,30);
var blurFilter = new createjs.BlurFilter(5,5,1);
shape.filters = [blurFilter];
var bounds = blurFilter.getBounds();
console.log('x:'+bounds.x+',y:'+bounds.y+',w:'+bounds.width+',h:'+bounds.height);
// API:cache(x,y,width,height),
// shape.cache(170+bounds.x,20+bounds.y,60+bounds.width,60+bounds.height);
//所以可以随便写一下;
shape.cache(0,0,500,500);
// updateCache()就没有东西了;
// shape.updateCache(); // cache之后如果需要更新,必须调用updateCache();cache可以加速渲染,不需要为每一个tick事件响应;
shape.graphics.beginStroke('green').moveTo(0,0).lineTo(100,100);
// shape.updateCache();
// 或者重新cache()一次,w,h如果小了就会删除圆了;
// shape.cache(0,0,100,100); // stage.addChild(shape); // 先绘制一个圆,进行colorFilter的研究
var shape3 = new createjs.Shape();
shape3.graphics.beginFill('red').drawCircle(50,50,30);
// ColorFilter API( [redMultiplier=1] [greenMultiplier=1] [blueMultiplier=1] [alphaMultiplier=1] [redOffset=0] [greenOffset=0] [blueOffset=0] [alphaOffset=0])
var colorFilter = new createjs.ColorFilter(0.5,1,1,1);
// var colorFilter = new createjs.ColorFilter(0.5,1,1,1,125,0,0,0,0);
shape3.filters=[colorFilter];
// shape.filters是一个数组,可以增加多个filter;
shape3.filters=[colorFilter,blurFilter];
shape3.cache(0,0,500,500); // ColorMatrixFilter的研究
// 首先研究ColorMatrix
var colorMatrix = new createjs.ColorMatrix();
console.log(colorMatrix);
// Hue 色调;adjustBrightness亮度、adjustColor颜色、adjustContrast对比度
var cMatrix2 = colorMatrix.adjustHue(100);
console.log(cMatrix2);
console.log(cMatrix2.toArray());
// ColorMatrixFilter使用ColorMatrix作为参数
var colorMatrixFilter = new createjs.ColorMatrixFilter(cMatrix2);
shape3.filters = [colorMatrixFilter];
shape3.updateCache(); // stage.addChild(shape3); // mask 的研究
var shape4 = new createjs.Shape();
shape4.graphics.beginStroke('red').drawCircle(50,50,30);
var shape5 = new createjs.Shape();
shape5.graphics.beginStroke('blue').moveTo(50,0).lineTo(50,100);
// stage.addChild(shape4);
// 这样就按照shape4的尺寸进行了截取;
shape5.mask = shape4;
stage.addChild(shape5); stage.update();
}
$(function() {
init();
});
function init(e) {
var stage = new createjs.Stage('demo1');
var shape = new createjs.Shape();
// 事件api在DisplayObject对象中
// click事件处理
shape.graphics.beginFill('red').drawCircle(50,50,20);
var s = shape.addEventListener('click',shapeEvent);
console.log(s);// 不能连缀写事件; //dblclick,mousedown,mouseover,mouseout
// stage.enableMouseOver(); // 必须打开这个事件,才能处理mouseover,mouseout,rollover,rollout事件;
// shape.addEventListener('dblclick',shapeEvent);
// shape.addEventListener('mouseover',shapeEvent);
// shape.addEventListener('mouseout',shapeEvent);
// shape.addEventListener('mousedown',shapeEvent);
// shape.addEventListener('pressup',shapeEvent);
// shape.addEventListener('rollover',shapeEvent); // 不会冒泡
// shape.addEventListener('rollout',shapeEvent); // 不会冒泡 //pressmove事件,event.currentTarget.x-的基准是要进行偏移
// console.log(shape.x);// 直接打印出来就会发现这个x是0;shape的x与绘制出来的circle的x不是一个概念!
// shape.addEventListener('pressmove',function(event){
// console.log(event);// 可以打印出来查看x,y信息
// console.log(event.currentTarget);// 可以打印出来查看x,y信息
// event.currentTarget.x = event.stageX - 50; // 减去50进行修正;shape对象的x需要基于开始位置定义;
// event.currentTarget.y = event.stageY - 50;
// stage.update();
// }); // pressmove事件,使用一个container
// var circle = new createjs.Shape();
// circle.graphics.beginFill('blue').drawCircle(0,0,30);
// var container = new createjs.Container();
// container.x = container.y = 100;
// container.addChild(circle);
// stage.addChild(container);
// console.log(container.x);// 这个x就已经是定位了;
// container.addEventListener('pressmove',function(event){
// console.log(event);// 可以打印出来查看x,y信息
// console.log(event.currentTarget);// 可以打印出来查看x,y信息
// console.log(event.currentTarget.x+';'+event.stageX);
// event.currentTarget.x = event.stageX;
// event.currentTarget.y = event.stageY;
// stage.update();
// }); // stage mouse event
// stage.addEventListener('stagemousedown', stageMouseEvent);
// stage.addEventListener('stagemouseup', stageMouseEvent);
// stage.addEventListener('stagemousemove', stageMouseEvent);
// 事件冒泡机制
// stage.addEventListener('click',shapeEvent); // stage不是display object,在第一阶段不能触发; // shape 对象 tick事件, stage update的时候执行
// shape.addEventListener('tick',shapeEvent);
// stage 对象tick事件, stage update的时候执行
// stage.addEventListener('tick',shapeEvent); // Ticker注册的tick事件
// on方法传参 on(type,listener,[scope],[once=false],[data],[useCaptuer=false])
// on off 方法是简写,on方法会有不同
// createjs.Ticker.on('tick',shapeTick,null,false,{count:3});
createjs.Ticker.on('tick',shapeTick2,null,false,{shapeObj:shape,stageObj:stage}); stage.addChild(shape);
stage.update(); }
// 参数传递,hitTest事件响应;比较占用CPU资源;
function shapeTick2(e,data) {
var shape = data.shapeObj;
var stage = data.stageObj;
shape.alpha = 1;
if(shape.hitTest(stage.mouseX,stage.mouseY)){
shape.alpha= 0.1;
}
stage.update();
}
// 输出tick事件调用,移除tick事件,不移除事件会很占CPU资源的;
function shapeTick(e,data) {
console.log(e);
console.log(data);
console.log(data.count);
// 移除tick事件
e.remove();
}
function shapeEvent(e) {
// 事件冒泡机制;
// console.log(e.eventPhase);
console.log(e.type);
}
function stageMouseEvent(e) {
console.log(e.type);
}
$(function() {
init();
});
var stage;
function init(e) {
stage = new createjs.Stage('demo1'); var ss = new createjs.SpriteSheet({
'animations' : {
'a' : [ 0, 2,'b' ],// 连续帧情况,四个参数: start,end,[next],[speed].
'b' : [ 3, 8 ,'a']
},
'images' : [ 'assets/sp.png' ],
'frames' : {
'regX' : 0,
'regY' : 0,
'height' : 38,
'width' : 38,
'count' : 8
}
});
ss.getAnimation('a').speed = 1;
// ss.getAnimation('a').next = 'b';
// ss.getAnimation('b').next = 'a'; var ss2 = new createjs.SpriteSheet({
images : [ 'assets/sp.png', 'assets/sp2.jpg' ],
frames : {
'height' : 38,
'width' : 38
},
animations : {
'a' : { // 非连续帧情况
frames : [ 0,2,4,6,8 ],
next : 'b',
speed: 0.5 // 帧的播放速度,如果是2就会跳帧播放;
},
'b' : [ 9, 17, 'a' ]// 连续帧情况,四个参数: start,end,[next],[speed].
}
});
// var sprite = new createjs.Sprite(ss,'a');
var sprite = new createjs.Sprite(ss2,'a');
sprite.scaleY = sprite.scaleX = 1;
createjs.Ticker.setFPS(1);
// createjs.Ticker.addEventListener('tick',funTick);
createjs.Ticker.addEventListener('tick',stage);
stage.addChild(sprite);
}
function funTick(e) {
stage.update();
}

easelJS入门、事件、spritesheet的更多相关文章

  1. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  2. JQuery快速入门-事件与效果

    一.事件 事件绑定的方法有两种: 绑定到元素 查找元素后绑定事件 方法1:绑定到元素 <body> <p onclick='func1()'>点击我</p> < ...

  3. Vue入门---事件与方法详解

    一. vue方法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. react入门----事件监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 4.pygame快速入门-事件监听

    事件event:游戏启动后,用户针对游戏的所有操作 监听:在游戏循环中,判断用户的具体操作 pygame中通过pygame.event.get()可以获得当前用户所做动作的事件列表   事件监听 wh ...

  6. SpringBoot事件监听机制及观察者模式/发布订阅模式

    目录 本篇要点 什么是观察者模式? 发布订阅模式是什么? Spring事件监听机制概述 SpringBoot事件监听 定义注册事件 注解方式 @EventListener定义监听器 实现Applica ...

  7. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  8. Prism5.0开发人员指南内容(纯汉语版)

    Prism指南包含以下内容: 下载并安装Prism Prism5.0新内容 介绍 初始化应用程序 组件间的依赖管理 模块化应用程序开发 实现MVVM模式 进击的MVVM 组合式用户界面 导航 松耦合组 ...

  9. 下载并安装Prism5.0库(纯汉语版)

    Prism5.0中包含了文档,WPF代码示例,程序集.本篇告诉你从哪里获取程序集和代码示例,还有NuGet包的内容. 对于新功能,资产,和API的更改信息,请看Prism5.0新内容. 文档 Pris ...

随机推荐

  1. java中基本数据类型和C语言中基本数据类型转换

    java中 1 short = 2 byte 1 char  = 2 byte 1 int    = 4 byte 1 long = 8 byte C语言中 typedef unsigned char ...

  2. Contaminated Milk

    Contaminated Milk 题目描述 Farmer John, known far and wide for the quality of the milk produced on his f ...

  3. WEB网页输入框的默认键盘类型控制

    参考资料 http://www.w3school.com.cn/html5/att_input_type.asp : 语法 <input type="value"> 属 ...

  4. Hibernate---基础配置之日志信息slf 及搭建日志环境

    slf日志接口, 实现有slf4j nodep, log4j hibernate里我们一般用 log4j,所以删除之前创建的hibernate 包里的 slf4j-nop包, 加入log4j-1.2. ...

  5. Quick Cocos2dx 调试问题

    最近由于忙了一段时间,忙完了之后又迷茫了这么久,然后终于开始继续Quick-x的学习之路了. 然后遇到了一个比较棘手的问题. 虽然照着官方mvc的例子敲代码,但是还是不停的报错,报错的问题下次集结成一 ...

  6. Centos rsync文件同步配置

    一.服务器端配置: # yum -y install xinetd   CentOS默认已经安装了rsync 服务.. 输入 rsync 命令可查看是否安装.   # vi /etc/xinetd.d ...

  7. 模块的_name_

    模块的__name__每个模块都有一个名称,在模块中可以通过语句来找出模块的名称.这在一个场合特别有用——就如前面所提到的,当一个模块被第一次输入的时候,这个模块的主块将被运行.假如我们只想在程序本身 ...

  8. 关于Discuz与jQuery冲突问题的亲测解决方法

    最近的一个项目整合dede和discuz程序,客户要求风格统一,所以有很多样式及特效都是要公用的.其中jQuery库定义的函数$()正好与discuz的comme.js中函数一样,这样就冲突了,导致d ...

  9. FZU 1064 教授的测试

    递归构造答案. 根据当前整颗树的编号,可以计算左右子树有几个节点以及编号.因此,不断dfs下去就可以了. #include<cstdio> #include<cstring> ...

  10. ios数据存储——数据库:SQlite3以及第三方库FMDB

    [reference]http://blog.csdn.net/mad1989/article/details/9322307 原生数据库:SQlite3 一.必备条件 在ios项目中使用sqlite ...