将Meteor与Adobe Flash CreateJS Toolkit结合使用

时间:2014-04-18 21:27:04

标签: javascript node.js flash meteor createjs

我想弄清楚如何在流星内使用Adobe CreateJS toolkit javascript objects

生成的html和js对于一个简单的矩形和圆形看起来像这样:

创建-demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>create-demo</title>

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="create-demo.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.createdemo();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    //createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>

创建-demo.js

(function (lib, img, cjs) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
    width: 550,
    height: 400,
    fps: 24,
    color: "#FFFFFF",
    manifest: []
};

// stage content:
(lib.createdemo = function() {
    this.initialize();

    // Layer 1
    this.blueCircle = new lib.circle();
    this.blueCircle.setTransform(118,288,1,1,0,0,0,65,65);

    this.purpleSquare = new lib.rectangle();
    this.purpleSquare.setTransform(346,149.5,1,1,0,0,0,116,86.5);

    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#FFFFFF").ss(1,1,1).p("AkS2pMAkOAAAIAAbBMgkOAAAgArnMgQAAEMi/C/Qi+C/kNAAQkNAAi/i/Qi+i/AAkMQAAkNC+i/QC/i+ENAAQENAAC+C+QC/C/AAENg");
    this.shape.setTransform(257.5,208);

    this.addChild(this.shape,this.purpleSquare,this.blueCircle);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(327,262,411,292);


// symbols:
(lib.rectangle = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("rgba(240,240,252,0.996)").s().p("AyHNgIAA7AMAkPAAAIAAbAg");
    this.shape.setTransform(116,86.5);

    this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,232,173);


(lib.circle = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("rgba(0,153,204,0.996)").s().p("AnKHLQi+i+gBkNQABkMC+i+QC+i+EMgBQENABC+C+QC+C+AAEMQAAENi+C+Qi+C+kNAAQkMAAi+i+g");
    this.shape.setTransform(65,65);

    this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,130,130);

})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;

我为meteor安装了这个https://atmospherejs.com/package/createjs createjs包,这意味着我可能不需要导入https://atmospherejs.com/package/createjs

我的问题是将此代码添加到我的流星项目的最佳方法是什么?

基本的流星项目看起来像这样。

testapp.html

<head>
  <title>testapp</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
</template>

testapp.js

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "Welcome to testapp.";
  };

  Template.hello.events({
    'click input': function () {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

1 个答案:

答案 0 :(得分:1)

请注意,您在CreateJS管理的canvas内无法获得任何Meteor的漂亮功能(反应模板等)。那说,做到这一点:

  1. 在您的项目中,创建子文件夹clientlibserverclient/lib/createjs
  2. create-demo.js移至client
  3. 下载http://code.createjs.com/easeljs-0.7.0.min.js并将其保存在client/lib/createjs
  4. 像这样创建client/index.html(注意没有script元素):

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>create-demo</title>
    </head>
    <body style="background-color:#D4D4D4">
      <canvas id="canvas" width="550" height="400" 
      style="background-color:#FFFFFF"></canvas>
    </body>
    </html>
    
  5. 像这样创建client/main.js

    var canvas, stage, exportRoot;
    
    function init() {
      canvas = document.getElementById("canvas");
      exportRoot = new lib.createdemo();
    
      stage = new createjs.Stage(canvas);
      stage.addChild(exportRoot);
      stage.update();
    
      createjs.Ticker.setFPS(lib.properties.fps);
      //createjs.Ticker.addEventListener("tick", stage);
    }
    
    Meteor.startup(function () {
      init();
    });
    
  6. 品尝季节。