我正在用dart编写一个使用canvas的基本应用程序,它基本上有2个正方形,其中一个从屏幕的右边移动到另一个,第二个移动当用户按箭头键时。
现在的问题是,当我在Dartium中尝试它时它工作正常。但如果我尝试在Chrome / Firefox中打开它,我只能看到一个空矩形。
即使我将其编译为javascript代码,Dart编辑器也不会显示任何错误。
但是当我查看Chrome的Inspect元素的控制台时,会出现以下错误消息:
Uncaught TypeError: Object [object Window] has no method 'webkitRequestAnimationFrame$1'
对该方法的调用如下:
void main() {
var maincharacter = new Player(10,10, 70, 70, "red");
var secondCharacter = new Player(400,250, 50,50, "yellow");
player = maincharacter;
sprites = new Set();
randomnumbergenerator = new Random();
window.on.keyDown.add(myKeyDownEvent);
CanvasElement element = query("canvas");
context = element.context2d;
maincharacter.context = context;
secondCharacter.context = context;
maincharacter.type = 'player';
sprites.add(maincharacter);
sprites.add(secondCharacter);
window.webkitRequestAnimationFrame(animate);
}
在这里:
void animate(num time){
enemyCreator(time);
context.clearRect(0,0,400,400);
for(final sprite in sprites){
if(!sprite.isPlayer()) {
sprite.move(5, 0);
// sprite.isOutside(0);
if(!(sprite.posx<0)){
query('#text').text = " Posx: ${sprite.posx.toString()} Length: ${sprites.length}";
sprite.draw();
} else {
query('#text').text = "Destroyed";
sprites.remove(sprite);
}
} else {
sprite.draw();
query('#text').text = " Time: $counter Length: ${sprites.length}";
}
}
window.webkitRequestAnimationFrame(animate);
}
这是抛出异常的javascript行:
$.window().webkitRequestAnimationFrame$1($.animate)
有什么想法吗?
答案 0 :(得分:4)
该方法在Dart中被称为requestAnimationFrame()
而不是webkitRequestAnimationFrame()
:http://api.dartlang.org/docs/bleeding_edge/dart_html/LocalWindow.html#requestAnimationFrame
int requestAnimationFrame(RequestAnimationFrameCallback callback)
正如约翰所说,试试:
window.requestAnimationFrame(animate);
您可能将Dart的方法与“原生”DOM方法混淆了
在Dart中你没有指定那个前缀。Window.prototype.webkitRequestAnimationFrame
答案 1 :(得分:3)
尝试
window.requestAnimationFrame(animate);
代替。