标签: easeljs

如何在EaselJS中查找DisplayObject的宽度和高度

var tf = new Text(letter, font, color);
var tfContainer = new Container();
tfContainer.addChild(tf);
Run Code Online (Sandbox Code Playgroud)

我怎样才能找出'tfContainer'的尺寸?

我知道我可以使用tf.getMeasuredWidth()和tf.getMeasuredLineHeight(),但我宁愿使用更通用的方法.此外,它不会返回准确的测量值.

javascript html5 canvas easeljs

5
推荐指数
1
解决办法
7534
查看次数

EaselJS中大量动画位图的速度

在使用EaselJS时,我似乎在使用大量动画位图(所有基于相同的spritesheet)时遇到了一些麻烦.当我在舞台上同时运行其中几个时,根本没有问题,但是当同时运行更多数量(从大约30到40开始)同时移动它们时我开始拥有它们"闪烁"相当多,即使是在10左右的fps.

我没有在这些线上使用任何阴影或其他任何东西.只需使用动画位图并移动它们.

有没有人有任何关于提高这种表现的好建议?

performance bitmap animated easeljs

5
推荐指数
2
解决办法
4191
查看次数

EaselJS:有人可以解释演示中使用的继承模式吗?

我正在使用EaselJS创建一个游戏,我想知道是否有人可以解释演示文件中使用的继承模式是如何工作的.具体来说,我正在查看以下文件:https://github.com/CreateJS/EaselJS/blob/master/examples/assets/Ship.js

在第7行,船的原型设定为的一个实例createjs.container()...

var p = Ship.prototype = new createjs.Container();
Run Code Online (Sandbox Code Playgroud)

然后在第28行,存储对原始构造函数的引用:

p.Container_initialize = p.initialize;  //unique to avoid overiding base class
Run Code Online (Sandbox Code Playgroud)

最后,Ship在第30行初始化对象

p.initialize = function () {
    this.Container_initialize();
Run Code Online (Sandbox Code Playgroud)

我试图围绕这种模式,因为它不同于我过去遇到的任何事情.有人可以向我解释为什么你会想要使用类的实例作为新类的原型?也许只是指向一个链接,解释这种模式?非常感谢任何帮助...我意识到这个问题有点模糊.

javascript easeljs

5
推荐指数
1
解决办法
1682
查看次数

EaselJS - 围绕其中心旋转形状

我正在用EaselJS制作一个旋转的矩形,但它不像我想的那样工作.

我想,如果我想制作一个在x = 100,y = 100的位置绕其中心旋转的正方形(40x40),我需要将它的注册点设置为regX = 20,regY = 20.

//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRect(100, 100, 40, 40);
circle.regX = circle.regY = 20;
//Add Shape instance to stage display list.
stage.addChild(circle);

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", onTick);

function onTick() {
    circle.rotation++;
    stage.update();
}
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/ZbZjL/14/

rotation easeljs

5
推荐指数
1
解决办法
1万
查看次数

EaselJS框架中的文本

作为一个小问题,我得到了解决方案!但为什么会这样呢?

var label = new Text(text.toString(), "20px Arial", "orange");
label.textAlign = "center";
label.x = 708;
label.y = 435;
label.maxWidth=40;
stage.addChild(label);
Run Code Online (Sandbox Code Playgroud)

首先,我没有添加label.maxWidth = 40.还有一些令人惊叹的happing,它适用于Ubuntu上的firefox和chrome!然而,它在窗户上没有显示铬.

附上官方网站http://easeljs.com/docs/Text.html上的maxWidth声明

maxWidth - Number绘制文本的最大宽度.如果指定了maxWidth(非null),则会压缩或缩小文本以使其适合此宽度.

html5 easeljs

4
推荐指数
1
解决办法
4838
查看次数

EaselJS,Canvas,Bitmap图像质量低,注册点不起作用

我刚刚开始使用EaselJS进行我正在研究的项目,我对Bitmap类有点困惑.我所做的是在画布/舞台上添加一个3000 x 4000的图像,让用户缩放并旋转它.主要是我使用以下功能:

@width = 3000
@height = 4000
@scale = 0.2

@bitmap.setTransform( 0, 0, @scale, @scale, 200, 0, 0, @width*@scale/2, @height*@scale/2 )
Run Code Online (Sandbox Code Playgroud)

除注册点外,这一切都有效.给函数的数字是图像宽度/高度的一半,所以应该是好的.但旋转仍然不是来自中心..

此外,我正在寻找一种方法来提高这个位图或舞台的质量..当位图缩放到0.2时,图像根本不可见,只是一堆大块/像素..

希望有人能帮帮我,

提前致谢

javascript canvas bitmap coffeescript easeljs

4
推荐指数
1
解决办法
2456
查看次数

EaselJS无限帆布

有没有办法用EaselJS显示无限画布?我已经阅读了使用Javascript或JQuery来实现它的方法,但有没有办法用EaselJS来管理它?

谢谢!

canvas easeljs

4
推荐指数
1
解决办法
2967
查看次数

EaselJS - 检测碰撞的最佳方法

我正试图为我的easelJS小应用程序找到一个很好的碰撞检测方法.

我刚刚使用createjs.Shape创建了2个矩形

但是在创建一个矩形形状后,API不会让我知道矩形的宽度和高度(我不知道为什么).

EaselJS Shape有一个名为"hitTest"的方法,但它只能在你想测试形状和点的碰撞时使用.

//Here's the code http://jsfiddle.net/ZbZjL/16/.

//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
redRect = new createjs.Shape();
redRect.graphics.beginFill("red").drawRect(0, 0, 60, 40);
redRect.regX = 30;
redRect.regY = 20;
redRect.x = 200;
redRect.y = 100;

blueRect = new createjs.Shape();
blueRect.graphics.beginFill("blue").drawRect(0, 0, 60, 40);
blueRect.regX = 30;
blueRect.regY = 20;
blueRect.x = 0;
blueRect.y = 100;
//Add Shape instance to stage display list.
stage.addChild(redRect);
stage.addChild(blueRect);
//Update stage …
Run Code Online (Sandbox Code Playgroud)

collision-detection easeljs

4
推荐指数
1
解决办法
1万
查看次数

结合EaselJS和TweenJS逐渐淡出

我有一个只使用EaselJS加载和显示图像的工作动画.整个动画效果很好,但图像立即出现和消失.我希望它们随着时间的推移逐渐消失.这是一个可以更好地说明问题的小jsfiddle:http://jsfiddle.net/tNLyx/

var stage = new createjs.Stage("canvas");
var shape = new createjs.Shape(new createjs.Graphics().f("#f00").dc(0,0,100)).set({x:100,y:100});
stage.addChild(shape);
stage.update();

shape.addEventListener("click", function(){
     //Shape will now disappear quickly. I would like it to fade out, by tweening its alpha or opacity or something. Any help would be greatly appreciated!
     stage.removeChild(shape);
     stage.update();
});
Run Code Online (Sandbox Code Playgroud)

当您单击红色圆圈时,它会立即消失.我希望它能慢慢消失.我做了一些研究,但我找不到好的文档 - 看来我需要的是TweenJS"姐妹"库,至少有以下一些代码:

createjs.Ticker.setFPS(30); //Sets frames-per-second for TweenJS
createjs.Tween.get(shape).to({alpha: 0},1000);
Run Code Online (Sandbox Code Playgroud)

我相信最后一行应该是我之前制作的"形状"对象,然后设置一个动画来动画它的alpha属性(我假设在添加到舞台时默认为1,但我不确定) ,并在1000毫秒内将其减少到0.代码实际上没有做任何事情 - 任何帮助将不胜感激!

html javascript animation tween easeljs

4
推荐指数
1
解决办法
4071
查看次数

什么|| {}在javascript中意味着什么?

我正在使用Easel JS开展一个项目.打开了Easel文件,第一行代码让我困惑:

this.createjs = this.createjs||{};
Run Code Online (Sandbox Code Playgroud)

我知道在设置画布时调用createjs,或者创建一个位图来添加到画布.但我不明白这一行的语法 - 将this.createjs或(我猜的是)一个空白对象分配给this.createjs?

javascript easeljs createjs

4
推荐指数
1
解决办法
231
查看次数