javascript 在p5.js中设置按钮样式

j91ykkif 于 2022-12-25 发布在 Java

关注(0)|答案(1)|浏览(220)

我目前正在用p5.js做一个项目，遇到了一个javascript的问题。我用javascript创建了一些按钮来帮助某些功能工作，我正在寻找一种方法来设计按钮。对于项目的其余部分，我使用了bootstrap，所以我试图找到一种方法来设计它，如果可能的话，尽可能类似于CSS的其余部分。javascript中的按钮代码如下所示。

button1 = createButton('start');
button2 = createButton('stop');
button3 = createButton('play');
button4 = createButton('save');

button1.mousePressed(start_);
button2.mousePressed(stop_);
button3.mousePressed(play_);
button4.mousePressed(save_);

JavaScript

来源：https://stackoverflow.com/questions/42101752/styling-buttons-in-p5-js

1条答案

按热度按时间

ia2d9nvy1#

createButton返回一个p5.Element对象，该对象具有一个.class()方法来设置class属性。然后，类可以用于样式设置，可以使用 Bootstrap 或自定义CSS。例如：

let btn;

function setup() {
  const cls = "maroon-bg white-text";
  btn = createButton("hello world");
  btn.class(cls);
  btn.position(50, 50);
  btn.mouseClicked(() => {
    btn.class(btn.class() ? "" : cls);
  });
}

.maroon-bg {
  background-color: maroon;
}

.white-text {
  color: white;
}

button {
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 在p5.js中设置按钮样式

1条答案

相关问题

热门标签

最新问答