从另一个内部调用函数-javascript
我对javascript比较陌生,有几个问题希望您能帮助解决。我正在利用canvas的fabric库创建各种动画 我有一个在按下相关按钮时调用的功能:从另一个内部调用函数-javascript,javascript,html,animation,canvas,fabricjs,Javascript,Html,Animation,Canvas,Fabricjs,我对javascript比较陌生,有几个问题希望您能帮助解决。我正在利用canvas的fabric库创建各种动画 我有一个在按下相关按钮时调用的功能: //for starting the animation startSim.onclick = function(){ //obtain speed value from the control panel. var speed = 10000 / (new Number(speedControl.value)); //
//for starting the animation
startSim.onclick = function(){
//obtain speed value from the control panel.
var speed = 10000 / (new Number(speedControl.value));
//stuff
//animation process
object.animate('top', '+='+canvas.height,{
duration: speed,
abort: function(){
var returnedBool;
//Pause is pressed, simulation pauses
if(pause){
//stuff
}
//restart required
if(restart){
//stuff
}
//option here to save data?
return returnedBool;
},//end abort callback
onChange: canvas.renderAll.bind(canvas),
onComplete: function(){
//stuff
}
});//end animate callback
};
我想做的是在上述动画处于活动状态时调用某些其他函数
我知道我想用java或C++做这个,但是我好像不能调用这个函数。
我有一个显示面板,应该输出各种信息-随着动画的完成,变量将发生变化,我希望它们在屏幕上输出,并随着它们的变化而更新
我正在用一个简单的函数进行测试:
function updateInfoPanel(testSpeed){
var test = document.getElementById('currentSpeed');
test.innerHTML = test.innerHTML + testSpeed;
}
我想我需要在主动画循环中调用它,如果我在调用它之前调用它,它很好,但显然只显示变量一次。有人能告诉我哪里出了问题吗
我也有一个基本的碰撞检测功能,但不在动画循环中工作,我认为这些问题是相互关联的
非常感谢你的帮助
我删除了代码中不必要的部分以节省空间
因此,我刚刚尝试使用一个函数作为onChange的结果:
onChange: function(){
canvas.renderAll.bind(canvas);
updateInfoPanel(speed);
},
这不会出现语法错误,但动画不会延迟,尽管“信息”面板中的“速度”变量会很快更新:(您需要调用renderAll(),bind实际上返回一个函数用作处理程序。请尝试以下代码:
onChange: function(){
canvas.renderAll();//.bind(canvas);
updateInfoPanel(speed);
},
让我知道它是否有用?我可能弄错了,但你能简单地将你的更新函数放在
onChange
事件中吗?嗨@Robb,我试过了,但它似乎不喜欢。需要一个冒号,但我不能给它一个。@Robb-嗨,再次更新了问题,因为它感觉我越来越近了。在onChange事件中,它可能没有sn不知道回调中有什么canvas
,因此渲染不起作用。这将是我第一次猜测它为什么没有更新。@Robb-有道理。虽然它没有抛出任何错误,但你是对的,没有渲染。我尝试将canvas作为参数传递,但失败了。有什么建议吗?嫁给我吧。今晚,我可以谢谢arty,你用过织物库吗?是的,我用过。我们可以继续在这里聊天