Slider 值没有随着值的增加而更新
[英]Slider values not being updated as the value increases
问题描述
我正在尝试创建一个 slider，它在按下空格后随着值的增加而移动，我们也可以将它向后或向前移动。 背景颜色以此为基础发生变化。
我的问题是 slider Val 始终设置为 0，因此它不会随着增量的增加而移动。 我该如何解决这个问题？
此外，它仅在首先单击 canvas 然后按空格后才开始递增，这是正常现象还是另一个错误？
谢谢！
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
我不确定这究竟应该做什么，因为您的newBackground() function 有一些差异。 但是，您在实际更新 slider 值的代码中没有任何位置。
所以你需要在newBackground()的末尾添加
slider.value(val);
但是您会发现它没有按预期工作，因为您增加并检查了inc变量的边界，而不是将其添加到val 。 因此，如果您需要 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>
至于为什么必须先单击 canvas：是因为该代码段已加载到 iframe 中。iframe 最初未处于焦点状态，因此在它处于焦点状态之前不会向其发送事件。
如何在 javascript 中使用范围 slider 更新值（更改时）？
[英]How to use range slider updated values (on change) in javascript?
角度数据-将更新值绑定到范围时遇到麻烦（使用滑块）
[英]Angular data - having trouble binding updated values to scope (using slider)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.