标签: createjs

我一直在尝试使用easeljs库重用元素.我是否使用clone()方法,我只能得到一个实例,然后像onPress这样的事件将停止为新元素工作.

在多个容器上添加相同的对象将使对象在任何地方消失.我一直在寻找解决方法,弄乱我的代码并浪费资源.

在此先感谢任何帮助或提示.

这是我的代码:

var spriteSheet = new createjs.SpriteSheet({
    images: ["images/mario2.png"],
    frames: {width:24, height:33, regX: 0, regY: 0},
    animations: {
        walk_right:     [5, 9],
        walk_up:        [10, 14],
        walk_down:      [15, 19],
        walk_left:      [0, 4]
    }
});


Player = new createjs.BitmapAnimation(spriteSheet);
Player.name = "Mario";
Player.gotoAndStop("walk_right");
Player.speed = 6;
Player.x = 30;
Player.y = 330;
//Player object toevoegen aan de stage
stage.addChild(Player);

    var monsterspritesheet = new createjs.SpriteSheet({
        images: ["images/MonsterA.png"], //image to use
        frames: {width: 64, height: 54, regX: 0, regY: 0},
        animations: {
            walk: [0, 9, "walk", …

当我在画布上移动时，我试图隐藏我的鼠标，但我无法将其隐藏。我尝试了以下方法无济于事：

stage.enableMouseOver(50);
stage.cursor = 'none';  

光标隐藏似乎在 Firefox 中有效。所以这是一个 Chrome 的东西......

有没有人有想法/修复？

谢谢

我正在尝试在舞台上绘制一个动画位图,但我似乎无法让它工作.我可以验证动画是否已添加到控制台中的舞台但它没有显示.

HTML:

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript的:

var canvas = document.getElementById('canvas'),
    stage = new createjs.Stage(canvas),
    chopperImg = document.createElement('img'),
    spriteSheet,
    animation;

chopperImg.addEventListener('load', function ( e ) {

    spriteSheet = new createjs.SpriteSheet({
        images: [ chopperImg ],
        frames: { width: 64, height: 75, count: 10 },
        animations: {
            idle: [ 0, 9, 'idle', 4 ]
        }
    });

    animation = new createjs.BitmapAnimation(spriteSheet);
    animation.gotoAndPlay('idle');

    stage.addChild(animation);

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(stage);
});

chopperImg.src = 'http://dutchnoobz.nl/chopper.gif';

我在这里做了一个JSFiddle演示我的问题:http://jsfiddle.net/WWpVX/1/

除了标题不完全正确之外,我在使用createJs绘制正方形时遇到问题.我正在绘制具有相同大边的矩形,这通常会产生一个正方形,但不适合我,我得到这个:

我正在使用的代码如下(非常简化):

function getRandomNumber(max)
    {
        return Math.floor(Math.random() * max);
    }

var colors = ["Red", "Green", "Blue"];

function createTileArea()
    {
        var stage = new createjs.Stage("tileArea");
        stage.name = "stage";
        var size = 50;

        for (row = 0; row < 10; row++) {
            for (col = 0; col < 10; col++) {
                var id = row + "_" + col;
                var color = colors[getRandomNumber(3)];

                var tile = new createjs.Shape();
                tile.graphics.beginFill(color);
                tile.graphics.drawRect(0, 0, size, size);
                tile.graphics.endFill();
                tile.x = col * size;
                tile.y = row …

所以我有一个包含多个元素的画布.我想将图像蒙版应用于图像,因此它只显示该图像的一部分.我的问题是,我需要做的是相对于舞台定位蒙版,但只显示该蒙版后面的图像部分.我需要这样做的原因是我将操纵图像(旋转,缩放,倾斜等...).很难解释,如果您需要更多细节,请告诉我.我在下面给出了一些图片来帮助解释.

因此,从下面的图像可以看出,我需要将面具留在同一个地方,但只显示圆圈中的内容.因此,当我移动和操纵图像时,我需要将遮罩保持在相同的位置,但显示图像的后面部分.

我最近使用CreateJS Library for HTML Canvas在Flash CC中构建了一个项目.

在ActionScript 3中,您可以使用MovieClip(root)来调用函数,并从符号时间轴的实例中访问变量到主时间轴.有没有人知道是否有类似的方法使用CreateJS和Flash CC为画布这样做？

我是 EaselJS 的新手。我将文本的 maxWidth 属性设置为 200px，达到最大宽度后，文本开始压缩。如何确保文本达到最大宽度后换行？

var text = new createjs.Text();
text.set({
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum elit vitae nisl elementum, et aliquet quam malesuada. Pellentesque porta consequat pellentesque. Quisque vel molestie quam. Aliquam in vehicula magna. Integer ac congue sem, et tempor libero. Etiam pharetra, quam et posuere porta, lectus odio iaculis nibh, eget porttitor magna elit id felis. Mauris luctus lobortis tincidunt."
x: 0,
y: 0,
font: "16px Arial black",
maxWidth: 200 …

我已经安装了Symfony CMF,一切正常,但不像在cmf.liip.ch中在cmf.liip.ch中,当我尝试添加图像时,它可以上传,但在我的应用程序中,createjs不允许我使用此选项？因此,默认情况下,我的应用程序中的所有内容都仍然无效.任何人都可以给我一个答案,或者如果有人向我提供各种文件会更好吗？谢谢

我已经将.fla文件转换为.js文件,我在该文件中的多个元素上添加了几个侦听器.其中'click','mousedown'和'mouseover'工作正常,但'pressmove'和'pressup'事件没有响应,它们甚至没有产生任何错误.这是我的代码片段:

/****this snippet is from converted .js file *********/

(lib.knob_rot_but = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer 2
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#999999").ss(0.5,1,1).p("ABlhlQArArAAA6QAAA7grAqQgqArg7AAQg6AAgrgrQgqgqAAg7QAAg6AqgrQArgqA6AAQA7AAAqAqg");
    this.shape.setTransform(26.4,0);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.rf(["#FFFFFF","#CCCCCC","#999999","#666666"],[0.239,0.8,0.941,1],-0.2,0.2,0,-0.2,0.2,14.8).s().p("AhlBlQgqgqAAg7QAAg6AqgqQArgqA6gBQA7ABAqAqQAqAqAAA6QAAA7gqAqQgqAqg7AAQg6AAgrgqg");
    this.shape_1.setTransform(26.4,0);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(4));

}).prototype = p = new cjs.MovieClip();

/******* My Listeners ******/
var helpButtonDown = DeviceService.getHelpButtonDown();
helpButtonDown.addEventListener("click", function(){alert("helpButtonDown button clicked")});  //works fine

var powerButtonUp = DeviceService.getPowerButtonUp();
powerButtonUp.addEventListener("click", function(){alert("powerButtonUp clicked")});//works fine


/*** Knob Listener***/
var knob = DeviceService.getKnob();
knob.addEventListener("mousedown", function(){console.log("mousedown on knob")}); //woks fine
knob.addEventListener("pressmove", function(evt){console.log("proess move on knob evt :" + evt)}); …

我正在制作一个射击游戏，我需要通过将它们绑定到 'tick' 事件来更新子弹的状态，但是当调用 remove 方法将它们从 'tick' 事件中删除时，它不会删除它。创建一个新实例后，它会不断更新，而不是绑定的那个。

方法 'add'/'remove' 用于从 'tick' 事件绑定/解除绑定方法

class window.Stage

  stage = undefined
  counter = 0
  fps = 60

  add: (element) =>
    element.id = counter++
    stage.addChildAt(element.view, element.id)
    element.listener = createjs.Ticker.on("tick", element.update)

  remove: (element) =>
    createjs.Ticker.off("tick", element.listener) # Not removing!
    stage.removeChildAt(element.id)

  update: () =>
    stage.update()

这就是我在 Game 类中调用 remove 方法的方式

  run: () => 

    if @gun? && !@gun.alive
      @stage.remove(@gun)
      @gun = undefined

    if @player.shooting() && !@gun?     
      @gun = @player.shoot() # Ticker keeps updating new instance
      @stage.add(@gun)

    for bunker …

chrome版本从70升级到71后createjs文字位置发生变化，请指导。