0

Sencha Touch の Ext.Container 内に EaselJS (CreateJS) オブジェクトを表示できません (実行するには、EaselJS がキャンバス要素内にある必要があります)。

コンテナ内に要素を正常に作成しましたが、画面に表示されません。その後、window で obj ステージとリスナーを定義し、EaselJL オブジェクトに要素を追加しましたが、関数が定義されている Ext コンテナーでそれを表示する方法がわかりません。コンテナの add メソッドでステージ obj を挿入しようとすると、エラーがスローされます。

再開: Sencha Touch のコンテナ内に他のライブラリのコンポーネントを追加/表示する方法を知りたいです。

以下は、私がやろうとしているクラスのコードです:

Ext.define('oa.view.Atividade', {
   extend : 'Ext.Container',

   stage : null,

   initialize: function() {
      console.log("Teste initialize!");

      this.testEaselJSSenha();
   },

   testEaselJSSenha  : function()
   {
      var canvas = document.createElement("canvas");

      canvas.id = "canvasEasyJS";

      canvas.setAttribute('width',350);

      canvas.setAttribute('height',400);

      document.body.appendChild(canvas);

      this.stage = new createjs.Stage(canvas);

      console.log(atividade.stage);

      createjs.Ticker.setFPS(10);

      createjs.Ticker.addListener(window);

      var texto = new createjs.Text("All you need is love!", "10px arial", "#f00070");

      this.stage.addChild(texto);

      //Erro: Uncaught TypeError: Object 7 has no method 'match'
      this.add([this.stage]);
   },

    tick: function()
    {
       console.log("tick...!");
        this.stage.update();
    }
});
4

1 に答える 1

0

私は同じ課題を抱えていましたが、いくつかの試行錯誤の後、項目で次のコードを使用するとわかりました
: [....] コンテナーの構成。キャンバスへの参照を取得し、createJS を使用できます。

Ext.create('Ext.draw.engine.Canvas', {<br>
    id: 'playgroundId',<br>
    baseCls: 'playground', // To give it a background color.<br>
    layout: 'fit',<br>
    height: '100%', // You might have to set height and width as a numbers.<br>
    widht: '100%'<br>
})


キャンバスへの参照を取得するには、次を使用します。

var canvasId = this.getMain().down('#playgroundId').canvases[0].id;

( this.getMain() [コントローラーで定義された参照] の代わりに。 Ext.ComponentQuery.query('your container id')[0] を使用できます)。

//Create a stage by getting a reference to the canvas<br>
stage = new createjs.Stage(canvasId);

//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);

//Set position of Shape instance.
circle.x = circle.y = 50;

//Add Shape instance to stage display list.
stage.addChild(circle);

//Update stage will render next frame<br>
//stage.update();
于 2013-09-10T17:49:03.073 に答える