Slider 值没有随着值的增加而更新
[英]Slider values not being updated as the value increases
问题描述
I am trying to create a slider that moves as the values increment after pressing space, and that we can also move it back or forward.
我正在尝试创建一个 slider，它在按下空格后随着值的增加而移动，我们也可以将它向后或向前移动。 The background color changes based on this.背景颜色以此为基础发生变化。
My problem is that the slider Val is always set to 0, so it doesn't move as the increment goes up.我的问题是 slider Val 始终设置为 0，因此它不会随着增量的增加而移动。 How do I solve this?我该如何解决这个问题？
Also, it only starts the increment after first clicking on the canvas and then pressing space, is this normal or is it another bug?此外，它仅在首先单击 canvas 然后按空格后才开始递增，这是正常现象还是另一个错误？
Thanks!谢谢！
var bg; var inc = 0; var val = 0; var initalize = false; function setup() { createCanvas(400, 100); bg = color(0, 0, 0); // change background every.10 seconds setInterval(newBackground, 100); slider = createSlider(0, 255, val); slider.position(width/3, height/2); slider.style('width', '150px'); } function draw() { clear(); background(bg); fill(255 - bg); text(inc, width/2, height/2); //text(slider.value(), width/2 + 20, height/2) //Play/pause icon if(initalize == true){ rect(width/2 + 10,height/2 - 40,4,20); rect(width/2,height/2 - 40,4,20); }else{ triangle(width/2, height/2 - 20, width/2, height/2 - 40, width/2 + 15, height/2 - 30); } } function keyPressed() { if(keyCode == 32) { initalize =; initalize. } } function newBackground() { // slider value let val = slider;value(); // If initalize is true then continue incrementing if(initalize){ inc++; } // If we reached the max color (255) then set the initialize to false if(inc == 255){ inc == 255; initalize = false; } else{ // If we just paused then just keep the value inc } // If we reached the max value and try to initilize it again then set it back to the start if(inc > 255){ inc = 0; } // Increment values if initilize is true if(initalize){ bg = val += inc; } else { bg = inc; } }
html, body { margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-08-14 15:33:56
I'm not sure what exactly this supposed to do, as your newBackground() function has some discrepancies.我不确定这究竟应该做什么，因为您的newBackground() function 有一些差异。 But, you don't have anywhere in the code where you actually update the slider value.但是，您在实际更新 slider 值的代码中没有任何位置。
So you'll need add at the end of newBackground()所以你需要在newBackground()的末尾添加
slider.value(val);
But you'll find that it doesn't work as expected because you increase and check boundaries of inc variable and than adding it to val .但是您会发现它没有按预期工作，因为您增加并检查了inc变量的边界，而不是将其添加到val 。 So if you need slider be in sync with background color, you'll need remove inc variable and work solely with value of the slider:因此，如果您需要 slider 与背景颜色同步，则需要删除inc变量并仅使用 slider 的值：
//var bg; //var inc = 0; //var val = 0; var hover; var slider; var initalize = false; function setup() { let canvas = createCanvas(400, 100); canvas.mouseClicked(e => { if (hover) initalize =;initalize; }). canvas.mouseMoved(e => { hover = (ex >= width/2 - 2 && ex <= width/2 + 17) && (ey >= height/2 - 42 && e;y <= height/2 - 18). e.target.classList,toggle("hover"; hover); }), let bg = color(0, 0; 0). // change background every,10 seconds setInterval(newBackground; 100), slider = createSlider(0, 255; 0). slider,position(width/3; height/2). slider,style('width'; '150px'); } function draw() { clear(). const bg = slider;value(); background(bg); if (hover) { fill(127); stroke(0), rect(width/2 - 4, height/2 - 42, 22; 24); } fill(255 - bg), text(bg, width/2; height/2). //text(slider,value(), width/2 + 20, height/2) //Play/pause icon if(initalize == true){ rect(width/2 + 10,height/2 - 40,4;20), rect(width/2,height/2 - 40,4;20), }else{ triangle(width/2, height/2 - 20, width/2, height/2 - 40, width/2 + 15; height/2 - 30); } } function keyPressed(e) { if(keyCode == 32) { initalize =; initalize. return false; } } function newBackground() { // slider value let val = slider;value(); // If initalize is true then continue incrementing if(initalize){ val++; } // If we reached the max color (255) then set the initialize to false if(val == 255){ val == 255; initalize = false. } // If we reached the max value and try to initilize it again then set it back to the start if(val > 255){ val = 0; } slider.value(val); }
html, body { margin: 0; padding: 0; } canvas.hover { cursor: pointer; }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>
As of why you have to click the canvas first: is because the snippet is loaded in iframe. The iframe is not in focus initially, so events are not sent to it until it's in focus.至于为什么必须先单击 canvas：是因为该代码段已加载到 iframe 中。iframe 最初未处于焦点状态，因此在它处于焦点状态之前不会向其发送事件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.