嘗試在Ember Starfield組件中使用HTML5和Javascript
[英]Trying to use HTML5 and Javascript within Ember, Starfield component
問題描述
我制作了一個基本的starfield程序，該程序使用javascript加載到畫布中。
我一直在嘗試通過將畫布放在頁面上來將其合並到ember站點中，但是我不確定如何加載程序。我嘗試將代碼包含到頁面的路由器，控制器中，並從中加載一個單獨的文件等。不太確定從何處去。 有指針嗎？
我想我可以用...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/app.js"></script>
</script>
</head>
<body>
...
<script type="text/x-handlebars" id="starfield">
<canvas id='c'></canvas>
</script>
</body>
</html>
對於HTML。
接着...
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.route('starfield');
});
用於應用程序文件。 但是，我應該將星空代碼放在哪里？
1 個解決方案
解決方案1
1 已采納 2014-06-20 15:36:42
更新
現在，我了解了您的工作意圖，然后將其完全組件化
App.StarFieldComponent = Em.Component.extend({
tagName:'canvas',
width: 400,
height: 300,
starCount:100,
refresh:30,
attributeBindings:['width', 'height'],
stars:null,
on:false,
build: function(){
var canvas = this.$()[0],
ctx = canvas.getContext('2d'),
stars = [],
height = this.get('height'),
width = this.get('width');
for (var i = 0, len = this.get('starCount'); i < len; i++){
stars.push([Math.random() * width, Math.random() * height, Math.random() * 2, 0.5 + Math.random() / 2]);
}
this.set('stars', stars);
this.set('ctx', ctx);
this.set('on', true);
}.on('didInsertElement').observes('starCount', 'width', 'height'),
kill: function(){
this.set('on', false);
}.on('willDestroyElement'),
clear: function () {
var ctx = this.get('ctx'),
height = this.get('height'),
width = this.get('width');
ctx.fillStyle = 'black';
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
},
drawStars: function () {
var stars = this.get('stars'),
starCount = stars.length,
ctx = this.get('ctx');
for (var i = 0; i < starCount; i++) {
ctx.fillStyle = 'rgba(255, 255, 0, ' + stars[i][3] + ')';
ctx.beginPath();
ctx.arc(stars[i][0], stars[i][1], stars[i][2], 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
},
moveStars :function (e) {
var stars = this.get('stars'),
starCount = stars.length,
height = this.get('height'),
width = this.get('width');;
for (var i = 0; i < starCount; i++) {
if (stars[i][1] - stars[i][2] > height) {
stars[i][0] = Math.random() * width;
stars[i][2] = Math.random() * 2;
stars[i][1] = 0 - stars[i][2];
stars[i][3] = 0 + Math.random() / 2;
} else {
stars[i][1] += e;
}
}
},
gaze: function(){
if(this.get('on')){
this.loop();
}
}.observes('on'),
loop: function () {
if(!this.get('on')){
return;
}
var refreshRate = this.get('refresh');
this.clear();
this.moveStars(3);
this.drawStars();
Em.run.later(this, this.loop, refreshRate);
}
});
然后可以在模板中輕松插入remove
{{star-field width=300 height=200 starCount=20}}
{{star-field width=400 height=200 starCount=500 refresh=10}}
{{star-field width=100 height=100}}
{{star-field}}
靜態變量： http : //emberjs.jsbin.com/yaxoweya/8/edit
綁定變量： http : //emberjs.jsbin.com/yaxoweya/9/edit
原始答案（不是真的適用，但是信息不錯）
對於模型，您將設置與路由器名稱匹配的路由。 如果您的路線是一個名詞，通常使用this.resource ，如果它是verb ，則使用this.route
App = Ember.Application.create();
App.Router.map(function() {
this.resource('starfield')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
應用中特定路線的路線
App.StarfieldRoute = Em.Route.extend({
model:function(){
return {apple:'cow'};
}
});
用於包裝模型以及與視圖/模板進行交互的控制器
App.StarfieldController = Em.ObjectController.extend({
foo:'bar'
});
查看dom互動
App.StarfieldView = Em.View.extend({
click: function(){
alert('you clicked this view!');
}
});
嘗試在動畫CC（html5 canvas）中的數組中做一個數組
[英]Trying to do an array within an array in animate CC (html5 canvas)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.