本篇适合有一定小程序基础的人，比如说已经看过开发文档。下面是一张效果图。
效果图
首先对界面进行布局，采用上下布局，工具栏固定在底部。画板铺满除了工具栏之外的部分。wxml代码如下：
首先外层容器包裹两个子容器，一个是上面的画图区域，一个是底部的工具栏。
第一步得先让外层的container容器铺满整个屏幕，代码如下：
page {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
这样子设置就可以了，效果的话可以自己加背景色看。page是wxml页面外层的标签。我们在调试区域可以看到。
然后让工具栏居于底部，画板占据其他空间，可以使用flex布局，代码如下：
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.canvas-area {
background-color: pink;
width: 100%;
flex: 1;
}
.canvas-tools {
background-color: mediumslateblue;
width: 100%;
position: fixed;
bottom: 0;
}
这样外层的框架就已经出来了，下面实现工具栏里面的图标块。
这里放了5个view.这5个view我们可以使用flex布局，让他分散排列。新代码如下：
.canvas-tools {
background-color: mediumslateblue;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
.tool {
width: 50px;
height: 50px;
border-radius: 50%;
}
那每一个图标虽然形状是一致的，但是具体内容又不一样，这个时候需要单独设置样式，我们可以使用拼接样式，像下面这样：
.pen-small {
background-color: white;
}
.pen-large {
background-color: white;
}
.pen-red {
background-color: red;
}
.pen-yellow {
background-color: yellow;
}
.eraser {
background-color: white;
}
到这里界面已经出来了。下面实现作图的功能。首先我们先把图画出来，再考虑改变颜色和画笔粗细。
根据官方api，我们在onload里面这样写，画出了两条线。
图2
然后我们给画板添加事件
图3
图4
这里是状态机变量，改变粗细和颜色的时候改变状态机变量的值就好了。
但是wxml页面里需要给他一个参数值。
网友评论