把键盘输入到余烬组件
Take Keyboard Input Into Ember Component
我在绿色画布中创建了一个矩形块的ember组件。
我遇到的麻烦是添加一个键盘输入命令为a S D W在画布周围移动矩形。这在常规javascript或jquery中很容易做到,但在组件模型中我有点迷路了。任何关于这个函数的帮助都是非常有用的。
链接这里是一个ember javascript bin: http://emberjs.jsbin.com/miyatoti/1/edit
这是我现在的组件代码。
App.BoxGameComponent = Em.Component.extend({
tagName:'canvas',
width: 325,
height: 280,
refresh:30,
attributeBindings:['width', 'height'],
stars:null,
on:false,
build: function(){
var canvas = this.$()[0],
ctx = canvas.getContext('2d'),
shippos = [150, 120],
height = this.get('height'),
width = this.get('width');
this.set('shippos', shippos);
this.set('ctx', ctx);
this.set('on', true);
}.on('didInsertElement'),
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 = 'green';
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
},
box: function () {
var that = this;
var ctx = this.get('ctx'),
height = this.get('height'),
width = this.get('width'),
shippos = this.get('shippos');
var posx = shippos[0],
posy = shippos[1];
ctx.rect(posx,posy,50,50);
ctx.stroke();
},
game: function(){
if(this.get('on')){
this.loop();
}
}.observes('on'),
loop: function () {
var refreshRate = this.get('refresh');
this.clear();
this.box();
if(this.get('on')){
Em.run.later(this, this.loop, refreshRate);
}
}
});
有谁能帮帮忙吗?我已经绞尽脑汁想了几个小时了
连接画布元素有点棘手,因为画布没有焦点。所以你只需连接到窗口(然后稍后销毁它)。
$(window).on('keyup', {self:this}, this.handleKeyUp );
http://emberjs.jsbin.com/miyatoti/2/edit 相关文章:
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- React组件等待所需道具进行渲染
- 如何创建带有插槽的vue js组件预加载程序
- KnockoutJS-组件-多个实例
- 如何在余烬中从组件过渡到路由
- 为什么这个余烬组件不渲染
- 余烬组件,如何等待随机jQuery插件初始化
- 余烬JS组件观察器不起作用
- 余烬组件插入两个表行
- 无法识别余烬组件 - 绑定属性渗入控制器
- 如何将应用商店注入我的余烬组件
- 将旧代码转换为余烬组件
- 余烬子组件通过父组件更新来自查询参数的属性
- 把键盘输入到余烬组件
- 余烬组件集成测试:' link-to '为空
- 余烬:从组件到应用控制器的气泡动作
- 余烬CLI-在每个循环中使用组件而不是itemController的条件输出
- 设置属性为余烬组件