【P5JS教学】标准计算器-界面设计

目录

01 结果显示区

02 功能按钮区

03 使用P5JS绘制界面

---

标准计算器主要实现基本数字的四则运算（加、减、乘、除）以及简单的科学计算（幂运算）。

例：

根据上图，我们可以看到标准计算器的界面主要包含两大区域，分别是结果显示区以及功能按钮区。

01 结果显示区

我们尝试使用功能按钮区中的部分功能，在结果显示区域中获得了下图结果。

经过分析，在结果显示区中我们必须有以下几个元素：

1. 在还未使用四则运算时，结果显示区中的计算结果元素显示用户输入内容；

2. 当输入四则运算符时，将输入的数字与运算符转换为字符串显示在计算结果元素上方，此时若重新修改四则运算符，字符串会自动修改其中的四则运算符，直至用户再次输入数字，计算结果元素位置重新显示用户第二次输入的数字；

3. 当输入等号时，字符串显示为等式，且计算结果元素显示计算结果。

02 功能按钮区

功能按钮区由24个按钮组成（MC、MR等功能本教程不涉及），并在按钮正中间显示功能符号。

注意：当用户按下按钮时，其颜色也会发生改变。

03 使用P5JS绘制界面

（1）在文档内使用P5JS组件，如果还不会创建P5JS组件，可以参考Hello World。

（2）创建画布，并指定画布颜色；

1. function setup() {
2. // 创建一个画布，大小为：320*540
3. createCanvas(320, 540);
4. }
6. function draw() {
7. // 指定背景颜色
8. background(150);
9. }
11. new p5();

（3）先给计算器起个名称，并显示在画面中吧；

1. function setup() {
2. // 创建一个画布，大小为：320*540
3. createCanvas(320, 540);
4. }
6. function draw() {
7. // 指定背景颜色
8. background(150);
10. // 定义标题颜色
11. fill(240);
12. // 设置对齐方式：居中，在使用文字绘图工具时，提供的坐标为文字的中心
13. textAlign(CENTER, CENTER);
14. // 设置字体大小
15. textSize(18);
16. // 在(width/2, 20)坐标上显示文字，width是P5JS的关键词，表示画布宽度
17. text('标准计算器 - P5学院', width/2, 20);
18. }
20. new p5();

（4）绘制功能按钮区

1. function setup() {
2. // 创建一个画布，大小为：320*540
3. createCanvas(320, 540);
4. }
6. function draw() {
7. // 指定背景颜色
8. background(150);
10. // 1. 绘制标题
11. this.drawAppName('标准计算器 - P5学院');
13. // 2. 绘制功能按钮区
14. this.drawFuncBtn();
16. }
18. function drawFuncBtn() {
19. // 由于功能按钮布局较为规律，因此可以使用嵌套循环进行绘制
20. for(var i = 0; i < 6; i++) { // 行元素
21. for(var j = 0; j < 4; j++) { // 列元素
22. stroke(150);
23. fill(200);
24. // 绘制方块，rect(x, y, w, h)，参数分别为矩形左上角定位坐标以及矩形的宽和高
25. // 由于矩形定位坐标和列元素相关，因此可以使用如下算法计算按钮大小及位置
26. var btnWidth = (width-25)/4; // 25为按钮横向间隔总和
27. var btnHeight = (height-220-35)/6; // 220为显示区域，35为按钮纵向间隔总和
28. var posX =5+ j*btnWidth+j*5; // 第一个5是按钮最左侧的间隔，5+j*5是从第二列开始左侧的间隔总和
29. var posY = 5+220+i*5+i*btnHeight; // 第一个5是按钮除顶部留出220空间的第一段间隔，5+i*5同理
30. rect(posX, posY, btnWidth, btnHeight);
31. }
32. }
33. }
35. function drawAppName(name) {
36. // 定义标题颜色
37. fill(240);
38. // 设置对齐方式：居中，在使用文字绘图工具时，提供的坐标为文字的中心
39. textAlign(CENTER, CENTER);
40. // 设置字体大小
41. textSize(18);
42. // 在(width/2, 20)坐标上显示文字，width是P5JS的关键词，表示画布宽度
43. text(name, width/2, 20);
44. }
46. new p5();

（5）功能按钮中间添加功能符号

1. var btnTextList = [
2. '%', 'CE', 'C', 'Back', '1/x', 'x^2', 'sqrt', '/', '7', '8', '9', 'x', '4', '5', '6', '-', '1', '2', '3', '+', '+/-', '0', '.', '='
3. ];
5. function setup() {
6. // 创建一个画布，大小为：320*540
7. createCanvas(320, 540);
8. }
10. function draw() {
11. // 指定背景颜色
12. background(150);
14. // 1. 绘制标题
15. this.drawAppName('标准计算器 - P5学院');
17. // 2. 绘制功能按钮区
18. this.drawFuncBtn();
20. }
22. function drawFuncBtn() {
23. // 由于功能按钮布局较为规律，因此可以使用嵌套循环进行绘制
24. for(var i = 0; i < 6; i++) { // 行元素
25. for(var j = 0; j < 4; j++) { // 列元素
26. // 在数组中获取指定符号
27. var btnText = btnTextList[j+i*4];
29. stroke(150);
30. fill(200);
31. // 绘制方块，rect(x, y, w, h)，参数分别为矩形左上角定位坐标以及矩形的宽和高
32. // 由于矩形定位坐标和列元素相关，因此可以使用如下算法计算按钮大小及位置
33. var btnWidth = (width-25)/4; // 25为按钮横向间隔总和
34. var btnHeight = (height-220-35)/6; // 220为显示区域，35为按钮纵向间隔总和
35. var posX =5+ j*btnWidth+j*5; // 第一个5是按钮最左侧的间隔，5+j*5是从第二列开始左侧的间隔总和
36. var posY = 5+220+i*5+i*btnHeight; // 第一个5是按钮除顶部留出220空间的第一段间隔，5+i*5同理
37. rect(posX, posY, btnWidth, btnHeight);
39. // 绘制完按钮后，添加按钮功能符号
40. textAlign(CENTER, CENTER);
41. textSize(18);
42. noStroke();
43. fill(60);
44. text(btnText, posX+btnWidth/2, posY+btnHeight/2);
45. }
46. }
47. }
49. function drawAppName(name) {
50. // 定义标题颜色
51. fill(240);
52. // 设置对齐方式：居中，在使用文字绘图工具时，提供的坐标为文字的中心
53. textAlign(CENTER, CENTER);
54. // 设置字体大小
55. textSize(18);
56. // 在(width/2, 20)坐标上显示文字，width是P5JS的关键词，表示画布宽度
57. text(name, width/2, 20);
58. }
60. new p5();

（6）绘制结果显示区

1. var btnTextList = [
2. '%', 'CE', 'C', 'Back', '1/x', 'x^2', 'sqrt', '/', '7', '8', '9', 'x', '4', '5', '6', '-', '1', '2', '3', '+', '+/-', '0', '.', '='
3. ];
5. function setup() {
6. // 创建一个画布，大小为：320*540
7. createCanvas(320, 540);
8. }
10. function draw() {
11. // 指定背景颜色
12. background(150);
14. // 1. 绘制标题
15. this.drawAppName('标准计算器 - P5学院');
17. // 2. 绘制功能按钮区
18. this.drawFuncBtn();
20. // 3. 绘制结果显示区
21. this.drawScreen();
23. }
25. function drawScreen() {
26. // 绘制屏幕
27. fill(200);
28. rect(5, 40, width-10, 140);
30. // 添加计算结果
31. textAlign(RIGHT);
32. textSize(18);
33. fill(50);
34. text('0', width-15, 150);
35. // 添加等式字符串
37. textSize(16);
38. fill(100);
39. text('0', width-15, 110);
40. }
42. function drawFuncBtn() {
43. // 由于功能按钮布局较为规律，因此可以使用嵌套循环进行绘制
44. for(var i = 0; i < 6; i++) { // 行元素
45. for(var j = 0; j < 4; j++) { // 列元素
46. // 在数组中获取指定符号
47. var btnText = btnTextList[j+i*4];
49. stroke(150);
50. fill(200);
51. // 绘制方块，rect(x, y, w, h)，参数分别为矩形左上角定位坐标以及矩形的宽和高
52. // 由于矩形定位坐标和列元素相关，因此可以使用如下算法计算按钮大小及位置
53. var btnWidth = (width-25)/4; // 25为按钮横向间隔总和
54. var btnHeight = (height-220-35)/6; // 220为显示区域，35为按钮纵向间隔总和
55. var posX =5+ j*btnWidth+j*5; // 第一个5是按钮最左侧的间隔，5+j*5是从第二列开始左侧的间隔总和
56. var posY = 5+220+i*5+i*btnHeight; // 第一个5是按钮除顶部留出220空间的第一段间隔，5+i*5同理
57. rect(posX, posY, btnWidth, btnHeight);
59. // 绘制完按钮后，添加按钮功能符号
60. textAlign(CENTER, CENTER);
61. textSize(18);
62. noStroke();
63. fill(60);
64. text(btnText, posX+btnWidth/2, posY+btnHeight/2);
65. }
66. }
67. }
69. function drawAppName(name) {
70. // 定义标题颜色
71. fill(240);
72. // 设置对齐方式：居中，在使用文字绘图工具时，提供的坐标为文字的中心
73. textAlign(CENTER, CENTER);
74. // 设置字体大小
75. textSize(18);
76. // 在(width/2, 20)坐标上显示文字，width是P5JS的关键词，表示画布宽度
77. text(name, width/2, 20);
78. }
80. new p5();