easelJS入门事件spritesheet

Posted stono

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easelJS入门事件spritesheet相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

EaselJS spritesheet 动画在画布上不可见,但没有错误

Spritesheet 动画 easeljs-0.7.1.min.js

easelJS - 使用 Javascript 调整图像大小,然后将其与 SpriteSheet 一起使用

在 EaselJS 中为 spritesheet 设置动画时遇到问题

来自 TexturePacker 的 EaselJS Spritesheets

EaselJS MultiRow Spritesheet