使用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 }); } 

       

网上收集的解决方案 "使用meteor与Adobe Flash CreateJS工具包"

请注意,您不会在CreateJSpipe理的canvas内获得任何Meteor的漂亮function(反应模板等)。 这就是说,这样做:

  1. 在你的项目中,创build子文件夹clientlibserverclient/lib/createjs
  2. create-demo.js移动到client
  3. 下载http://code.createjs.com/easeljs-0.7.0.min.js并将其保存&#x5728;client/lib/createjs
  4. 像这样创buildclient/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. 像这样创buildclient/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. 季节去品尝。