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的更多相关文章

React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
JQuery快速入门-事件与效果
一.事件事件绑定的方法有两种: 绑定到元素查找元素后绑定事件方法1:绑定到元素 <body> <p onclick='func1()'>点击我</p> < ...
Vue入门---事件与方法详解
一. vue方法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
react入门----事件监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
4.pygame快速入门-事件监听
事件event:游戏启动后,用户针对游戏的所有操作监听:在游戏循环中,判断用户的具体操作 pygame中通过pygame.event.get()可以获得当前用户所做动作的事件列表事件监听 wh ...
SpringBoot事件监听机制及观察者模式/发布订阅模式
目录本篇要点什么是观察者模式? 发布订阅模式是什么? Spring事件监听机制概述 SpringBoot事件监听定义注册事件注解方式 @EventListener定义监听器实现Applica ...
JNI详解---从不懂到理解
转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...
Prism5.0开发人员指南内容（纯汉语版）
Prism指南包含以下内容: 下载并安装Prism Prism5.0新内容介绍初始化应用程序组件间的依赖管理模块化应用程序开发实现MVVM模式进击的MVVM 组合式用户界面导航松耦合组 ...
下载并安装Prism5.0库（纯汉语版）
Prism5.0中包含了文档,WPF代码示例,程序集.本篇告诉你从哪里获取程序集和代码示例,还有NuGet包的内容. 对于新功能,资产,和API的更改信息,请看Prism5.0新内容. 文档 Pris ...

随机推荐

java中基本数据类型和C语言中基本数据类型转换
java中 1 short = 2 byte 1 char = 2 byte 1 int = 4 byte 1 long = 8 byte C语言中 typedef unsigned char ...
Contaminated Milk
Contaminated Milk 题目描述 Farmer John, known far and wide for the quality of the milk produced on his f ...
WEB网页输入框的默认键盘类型控制
参考资料 http://www.w3school.com.cn/html5/att_input_type.asp : 语法 <input type="value"> 属 ...
Hibernate---基础配置之日志信息slf 及搭建日志环境
slf日志接口, 实现有slf4j nodep, log4j hibernate里我们一般用 log4j,所以删除之前创建的hibernate 包里的 slf4j-nop包, 加入log4j-1.2. ...
Quick Cocos2dx 调试问题
最近由于忙了一段时间,忙完了之后又迷茫了这么久,然后终于开始继续Quick-x的学习之路了. 然后遇到了一个比较棘手的问题. 虽然照着官方mvc的例子敲代码,但是还是不停的报错,报错的问题下次集结成一 ...
Centos rsync文件同步配置
一.服务器端配置: # yum -y install xinetd CentOS默认已经安装了rsync 服务.. 输入 rsync 命令可查看是否安装. # vi /etc/xinetd.d ...
模块的_name_
模块的__name__每个模块都有一个名称,在模块中可以通过语句来找出模块的名称.这在一个场合特别有用——就如前面所提到的,当一个模块被第一次输入的时候,这个模块的主块将被运行.假如我们只想在程序本身 ...
关于Discuz与jQuery冲突问题的亲测解决方法
最近的一个项目整合dede和discuz程序,客户要求风格统一,所以有很多样式及特效都是要公用的.其中jQuery库定义的函数$()正好与discuz的comme.js中函数一样,这样就冲突了,导致d ...
FZU 1064 教授的测试
递归构造答案. 根据当前整颗树的编号,可以计算左右子树有几个节点以及编号.因此,不断dfs下去就可以了. #include<cstdio> #include<cstring> ...
ios数据存储——数据库：SQlite3以及第三方库FMDB
[reference]http://blog.csdn.net/mad1989/article/details/9322307 原生数据库:SQlite3 一.必备条件在ios项目中使用sqlite ...

easelJS入门、事件、spritesheet

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

随机推荐

热门专题