教你一步步做微信小程序涂鸦

本篇适合有一定小程序基础的人，比如说已经看过开发文档。下面是一张效果图。

效果图

首先对界面进行布局，采用上下布局，工具栏固定在底部。画板铺满除了工具栏之外的部分。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页面里需要给他一个参数值。