Question

如何使按钮更改变量？

我是编程新手，甚至对p5.js还是新手，在尝试创建一个非常基本的绘图软件时遇到了这个问题。我可以用计算机上的一个键很好地绘制以及更改颜色，但是现在我试图添加一个功能，您可以在其中更改光标的大小以绘制更大或更小的线条。我在屏幕上创建了一个按钮，但无法弄清楚如何执行上述任务。我已经尝试过创建一个函数，当您单击该按钮时该函数似乎可以正常工作，但是我无法弄清楚该如何做或将其放置在代码中的位置。

function draw() {
    let yel = color(255, 255, 0);
    let red = color(255, 0, 0);
    let black = color(0);
    let green = color(0, 255, 0);
    let blue = color(0, 0, 255);

    var size;

    if(mouseIsPressed) {
        noStroke();

        if(keyIsPressed) {
            if(keyCode === UP_ARROW) {
                fill(red);
            }else if(keyCode === RIGHT_ARROW) {
                fill(green);
            }else if(keyCode === LEFT_ARROW) {
                fill(blue);
            }else {
                fill(black);
            }
        }

        if(mouseButton === LEFT) {
            ellipse(mouseX, mouseY, size, size);
        }
    }
}

我上面提到的函数当前不在代码中。显示的所有代码都可以正常工作。我在html文档中有一个按钮，带有一个带有onclick事件的按钮，用于激活功能“ S1”。

Answer 1

您只需要向按钮（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）添加一个事件侦听器，然后在其中运行代码：

<div class="Section__item">
  <div class="Section__item__title">Title</div>
  <div>
    <img class="Section__item__image" width="120" height="120">
    <i class="Section__item__icon icon-right-nav-workflow">Icon</i>
  </div>
  <div class="Section__item__text">This is a descritption</div>
</div>

document.addEventListener('DOMContentLoaded', function() {
  var supaCoolButton = document.querySelector('.supa_cool_button')
  supaCoolButton.addEventListener('click', function() {
    console.log('Call functions in here!')
    // You would invoke `draw()` here.
  })
})

如果您愿意共享更大的代码段，我们可以向您展示如何更好地合并该功能。

Answer 2

我获得了一些创作自由，并想出了一些可能对您有所帮助的东西。我假设没有任何修饰，您希望您的项目看起来像这样：

function setup(){
  createCanvas(400, 200);
  background(120);
}
function draw() {
    let yel = color(255, 255, 0);
    let red = color(255, 0, 0);
    let black = color(0);
    let green = color(0, 255, 0);
    let blue = color(0, 0, 255);

    

    if(mouseIsPressed) {
        noStroke();

        if(keyIsPressed) {
            if(keyCode === UP_ARROW) {
                fill(red);
            }else if(keyCode === RIGHT_ARROW) {
                fill(green);
            }else if(keyCode === LEFT_ARROW) {
                fill(blue);
            }else {
                fill(black);
            }
        }

        if(mouseButton === LEFT) {
            ellipse(mouseX, mouseY, size, size);
        }
    }
}

var size = 2;
var increment = 2;

function increaseSize(){
  size += increment;
  strokeWeight(size);
  document.getElementById("currentsize").innerHTML = size;
}

function decreaseSize(){
  if(size > increment) size -= increment;
  strokeWeight(size);
  document.getElementById("currentsize").innerHTML = size;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

<div id="controls">
  <button onclick="increaseSize()">BIGGER</button>
  <button onclick="decreaseSize()">SMALLER</button>
  <label id="currentsize">2</label>
</div>

要注意的是更改size变量的范围，将S1()函数重命名为更有意义的内容以及HTML中的其他按钮和标签。每个函数都会根据increment变量中指出的数量来增加或减小椭圆的当前大小。

如何使按钮更改变量？

2 个答案: