【发布时间】：2020-05-07 19:18:18
【问题描述】：
我对编程很陌生，正在尝试在 p5.js 中编写草图，我想使用滑块来滑动图像以制作“服装选择器”，但我正在努力让滑块在图像中滑动我可以只找到通过颜色滑动的示例。这是使用滑块的唯一方法吗？ 有没有更好的方法来创建这样的草图？
谢谢
【问题讨论】：
标签： javascript p5.js
【发布时间】：2020-05-07 19:18:18
【问题描述】：
这是一个非常冗长的问题，有很多答案，还有很多工作要做，但我会尝试解释如何去做。 滑块使用范围工作，因此如果滑块一直向左，则为 0，一直向右，则为最大值，因此对于本示例。这意味着在滑块路径中的任何点都有相应的百分比或数字。所以这意味着如果你想做一个装备选择器，那么当它沿着滑块移动时，只需创建括号。因此，如果滑块为 1，则装备 1 和 2 装备 2，依此类推。 为此，您需要使用数组。像这样。
另外，如果您忘记了滑块 https://p5js.org/reference/#/p5/createSlider 的语法，请查看 createSlider() 上的此链接
//this will be somewhere in setup or such
outfitSlider = createSlider(0,10,50,0);
//A function to be called by DRAW
function outfitCheck() {
i = outfitSlider.value();
outfit = outfits[i];
}
现在您可以让outfitCheck() 被放置在滑块上的观察者调用，或者只是在绘图函数中调用它。
这适用于将服装放在一个数组中的想法。您可以通过观看数组教程来了解如何在其他地方进行操作。
这是一个很好的 StackOverflow，因为我看到你提到了图片 Creating an array of image objects
您还可以在数组中拥有不同的参数，不仅是 src，还有样式或类或 id，以使用 CSS 或使用 P5 dom 对其进行一些样式设置，由您决定。但是由于它有很多不同的图片，您或多或少将不得不对其进行硬编码。但是使用 for 循环可能会有所帮助。 希望这能回答你的问题。或多或少地轮流做一个更好的，这一切都取决于你的实际程序及其上下文，因为那里有很多选择。
【讨论】：