使用流星與Adobe Flash CreateJS工具包

我想弄清楚如何使用內流星Adobe CreateJS toolkit javascript objects。使用流星與Adobe Flash CreateJS工具包

生成的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;

我安裝了此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 
    }); 
}

來源

2014-04-18 Bryan

注意，你不會得到任何的流星的漂亮的功能（反應模板等）canvas內通過CreateJS管理。這就是說，這樣做：

在你的項目中，創建子文件夾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(); 
});

季節的味道。

來源

2014-04-22 21:14:19

這不適合我。我有編譯錯誤。 – Bryan

如果您在意詳細說明，或許我們可以提供幫助。我有一個想法，並修改了步驟3和4，嘗試這種方式。 –

也嘗試刪除您通過隕石安裝的createjs軟件包，它可能有衝突。 –

使用流星與Adobe Flash CreateJS工具包

回答

相關問題