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 ...

随机推荐

PAT (Advanced Level) 1044. Shopping in Mars (25)
双指针. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...
Qt5：Qt文件操作类 QFile
在QT中,操作文件一般不使用C++提供的文件操作类 , 因为操作文件的时候,要用到C++提供的 string 类,而在QT中使用的是Qt自己实现的一个string类 QString .在Qt中使用C+ ...
PAT1012
To evaluate the performance of our first year CS majored students, 为了计算第一年计算机科学学生的表现 we consider the ...
git 以及 github 使用系列
本人打算开始写一个有关git 使用,以及github 使用的系列文章了,一来可以自己总结,二来github用好了,可以存放自己的一些知识框架吧. 1.准备 : 有一个 github上的账号, wind ...
linux权限---【600，644，700，755，711，666，777】 - - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
NBUT 1457 Sona
莫队算法+离散化 1.map会TLE,必须离散化做 2.long long会WA,__int64定义 %I64d输出输出能AC 3.注意输入的序列会爆int #include<cstdio> ...
[python]小练习__创建你自己的命令行地址簿程序
创建你自己的命令行地址簿程序. 在这个程序中,你可以添加.修改.删除和搜索你的联系人(朋友.家人和同事等等)以及它们的信息(诸如电子邮件地址和/或电话号码). 这些详细信息应该被保存下来以便以后提 ...
POJ 3187 Backward Digit Sums
暴力DFS+验证. 验证如果是暴力检验可能复杂度会太高,事实上可以o(1)进行,这个可以o(n*n)dp预处理. #include<cstdio> #include<cstring& ...
HDU 4008 Parent and son
树形DP+LCA+思路.这题可真是有点难度......所以准备详细写一下题解. 题意:给一颗无根树,有Q次询问,每次询问指定一个根节点X,然后让你计算Y节点的儿子和子孙中,编号最小的节点是多少. 我们 ...
IOS开发中长按的手势事件编程
长按手势事件: 长按按钮1S后改变按钮颜色: // 长按事件 #import "ViewController.h" @interface ViewController (){ UI ...

easelJS入门、事件、spritesheet

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

随机推荐

热门专题