在p5中创建计算器

Question

因此，我仅使用p5.js构建一个计算器。我已经让数字显示被按下的数字，但是我不明白如何使数字显示在数字的“层”上，例如。我单击2和5，我得到25。有人知道如何使此功能正常工作。非常感谢您的帮助。谢谢。

let number = 0;
function setup() {
createCanvas(400, 400);
let one = createButton('1');
one.mousePressed(clickedOne);
let two = createButton('2');
two.mousePressed(clickedTwo);
let three = createButton('3');
three.mousePressed(clickedThree);
let four = createButton('4');
four.mousePressed(clickedFour);
let five = createButton('5');
five.mousePressed(clickedFive);
let six = createButton('6');
six.mousePressed(clickedSix);
let seven = createButton('7');
seven.mousePressed(clickedSeven);
let eight = createButton('8');
eight.mousePressed(clickedEight);
let nine = createButton('9');
nine.mousePressed(clickedNine);
let zero = createButton('0');
zero.mousePressed(clickedZero);
let equals = createButton('=');
let clear = createButton('AC');
let divide = createButton('÷');
let multiply = createButton('x');
let add = createButton('+');
let minus = createButton('-');
one.position(100, 150);
one.size(45, 45);
two.position(144, 150);
two.size(45, 45);
four.position(100, 194);
four.size(45, 45);
six.position(188, 194);
six.size(45, 45);
three.position(188, 150);
three.size(45, 45);
five.position(144, 194);
five.size(45, 45);
seven.position(100, 238);
seven.size(45, 45);
eight.position(144, 238);
eight.size(45, 45);
nine.position(188, 238);
nine.size(45, 45);
zero.position(100, 282);
zero.size(89, 45);
equals.position(188, 282);
equals.size(45, 45);
divide.position(232, 150);
divide.size(45, 45);
multiply.position(232, 194);
multiply.size(45, 45);
add.position(232, 238);
add.size(45, 45);
minus.position(232, 282);
minus.size(45, 45);
clear.position(100, 106);
clear.size(177, 45);

}

function clickedOne(){
number = 1;
}

function clickedTwo(){
number = 2;
}

function clickedThree(){
number = 3;
}

function clickedFour(){
number = 4;
}

function clickedFive(){
number = 5;
}

function clickedSix(){
number = 6;
}

function clickedSeven(){
number = 7;
}

function clickedEight(){
number = 8;
}

function clickedNine(){
number = 9;
}

function clickedZero(){
number = 0;
}

function draw() {
background(220);
noStroke();
fill(20, 255, 255, 30);
rect(100, 53, 177, 54, 5);
strokeWeight(6);
stroke(0);
noFill();
rect(97, 50, 183, 280, 5);
strokeWeight(1);
stroke(0);
text(number, width/2 + 50, 100);
}

Answer 1

我要说的第一件事是创建一个新变量，该变量将存储要在屏幕上显示的数字。

所以让我们在顶部定义一个名为number的全局变量：

let number = 0;

然后您需要在计算器上显示此数字，因此在绘图功能中添加：

  strokeWeight(1);
  stroke(0);
  text(number, width/2 + 50, 100);

请注意我是如何重新定义strokeWeight的，因为您在此之前定义的那个对于文本来说太大了。

接下来，您要为按钮定义一个单击处理程序，以便单击时会发生某些情况，这是一个示例

 // within setup function
 let one = createButton('1');

 one.mousePressed(clickedOne);

 ....
 // outside of setup function
 function clickedOne() {
    number = 1;
 }

很显然，您在点击处理程序中采取的操作会发生很大变化，但这绝对可以使您走上正确的轨道！