Question

我想弄清楚如何在流星内使用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
  });
}

Answer 1

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

在您的项目中，创建子文件夹client，lib，server和client/lib/createjs。
将create-demo.js移至client。
下载http://code.createjs.com/easeljs-0.7.0.min.js并将其保存在client/lib/createjs。

像这样创建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>

像这样创建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();
});

品尝季节。

将Meteor与Adobe Flash CreateJS Toolkit结合使用

1 个答案: