我想弄清楚如何在流星内使用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
});
}
答案 0 :(得分:1)
请注意,您在CreateJS管理的canvas
内无法获得任何Meteor的漂亮功能(反应模板等)。那说,做到这一点:
client
,lib
,server
和client/lib/createjs
。create-demo.js
移至client
。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();
});
品尝季节。