使用meteor与Adobe Flash CreateJS工具包
我想弄清楚如何在meteor中使用Adobe CreateJS工具包中的javascript对象 。
生成的html和js看起来像这样一个简单的矩形和圆形：
创build-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> 创build-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 。
我的问题是将这个代码添加到我的meteor项目的最佳方式是什么？
基本的meteor项目看起来像这样。
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 }); }
请注意，您不会在CreateJSpipe理的canvas内获得任何Meteor的漂亮function（反应模板等）。 这就是说，这样做：
- 在你的项目中，创build子文件夹
client，lib，server和client/lib/createjs。 - 将
create-demo.js移动到client。 - 下载http://code.createjs.com/easeljs-0.7.0.min.js并将其保存在
client/lib/createjs。 -
像这样创build
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> -
像这样创build
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(); }); -
季节去品尝。