Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/flash/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 画布的背景无意中出现在前面_Node.js_Canvas_Dialogflow Es_Actions On Google - Fatal编程技术网

Node.js 画布的背景无意中出现在前面

Node.js 画布的背景无意中出现在前面,node.js,canvas,dialogflow-es,actions-on-google,Node.js,Canvas,Dialogflow Es,Actions On Google,我有9个插槽,我希望能够在我的行动对话中填充元素。frame()函数设计交互式画布的背景。因此,我想一开始就把它叫做。问题是当我画第二个元素时,前一个元素消失了。我已经找到了原因frame()似乎每次都会重新绘制背景 我尝试在回调函数中调用frame(),以获得默认的欢迎意图,但没有任何更改。我还让函数noop()和foo()只调用frame()一次。。没有结果。 然后,每次把背景放在前面后,我都试图重新绘制前面的元素,但这也不起作用。 我也无法使用div在index.html中重新创建插槽。矩

我有9个插槽,我希望能够在我的行动对话中填充元素。
frame()
函数设计交互式画布的背景。因此,我想一开始就把它叫做。问题是当我画第二个元素时,前一个元素消失了。我已经找到了原因
frame()
似乎每次都会重新绘制背景

我尝试在回调函数中调用frame(),以获得
默认的欢迎意图,但没有任何更改。我还让函数
noop()
foo()
只调用
frame()
一次。。没有结果。 然后,每次把背景放在前面后,我都试图重新绘制前面的元素,但这也不起作用。 我也无法使用
div
在index.html中重新创建插槽。矩形显示在整个画布框架的上方或下方

有人知道怎么解决这个问题吗?或者您认为最简单的解决方案是创建背景的
.jpg
,并将其设置为html文件中画布的
style=“background url(“…”)”

感谢您的帮助

“严格使用;”
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
//尝试在之后重新绘制以前的元素失败
//无意中将背景带到前面:
var prevReqs=[]//见第26行和第78行
var-iD=1;
风险值要求=[
新规定(50,50),
新规定(500,50),
新要求(950,50),
新规定(50250),
新规定(500250),
新规定(950250),
新规定(50450),
新规定(500450),
新要求(950450),
];
常量回调={
onUpdate(州){
if(状态为“iD”){
iD=state.iD;
//预请求推送(iD);
drawRec();
}
},
};
函数drawRec(){
requestAnimationFrame(drawRec);//启用绘图
需求[iD-1]。drawRequirement();
}
功能需求(xCoord、yCoord){
this.xCoord=xCoord;
this.yCoord=yCoord;
this.drawRequirement=function(){//绘制元素
ctx.beginPath();
ctx.lineWidth=“1”;
ctx.strokeStyle=“#000000”;
ctx.fillStyle=“#FFFFFF”;
ctx.rect(xCoord,yCoord,200100);
ctx.fill();
ctx.stroke();
ctx.moveTo(xCoord,yCoord+33);
ctx.lineTo(xCoord+200,yCoord+33);
ctx.stroke();
ctx.font=“12px Arial”;
ctx.fillStyle=“#000000”;
ctx.strokeStyle=“#000000”;
ctx.textAlign=“左”;
ctx.fillText(“id:+id,xCoord+5,yCoord+47);
}
}
//背景。。。问题函数
函数框架(){
请求动画帧(帧);
ctx.fillStyle=“#D6EAF8”;
ctx.strokeStyle=“#D6EAF8”;
ctx.rect(0,01200600);
ctx.stroke();
ctx.fill();
for(设i=0;i
我怀疑它做的并不是你认为它在做的事情(从你如何使用它以及旁边的评论判断)。它做的是而不是“启用绘图”

它所做的是请求在下一次渲染引擎将要进行重新绘制之前调用名为的函数。这可以用于更新动画(因此得名),但也有非动画用途。在动画中使用时,通常具有执行绘图调用的函数
requestAnimationFrame()
再次命名相同的函数-将其放入一个无休止的循环中

这就是您在这里要做的。您认为您只调用了一次
frame()
,但因为,在这里面,您有一行代码

requestAnimationFrame(frame);
它将呈现函数中的内容,然后在重新呈现布局之前(通常它愿意每秒执行60次左右),它会一遍又一遍地重新调用您的函数

因此,
frame()
不断被调用的原因是,它请求不断被调用

根据您的实际需要,您有几种方法:

  • 放下那一行,除非你在做动画,否则没必要
  • 如果您正在根据
    iD
    的值制作动画,则您的
    onUpdate
    可以只设置
    iD
    的值,并让
    frame()
    根据iD绘制东西

  • 顺便说一句,您的情况并非如此,但是发布webhook代码的一个原因是要准确地查看您在
    ImmersiveResponse
    对象中发送的内容。如果您每次都发送
    url
    参数,那么您每次都会重新加载页面(从而重新绘制背景)。

    您能吗[更新您的问题](编辑)以包含您在webhook上使用的代码,该webhook正在初始化交互式画布并更新状态?哦,当然,抱歉。已更新