Wechat applet project example - I have a paintbrush (painting)

Wechat applet project example —— I have a paintbrush （ Drawing a picture ）

See the bottom of the text for the project code , Praise, focus and surprise

---

One 、 Project presentation

I have a brush is a small drawing program
Users can draw freely on the whiteboard , You can also choose a local photo , Draw on the picture
Users can freely modify the brush width 、 Color , At the same time, the painting can be saved locally

Two 、 home page

The front page consists of two pictures
It represents two functions: free drawing and photo drawing
Users click to select different functions

<!--index.wxml-->
<view class="painting" bindtap="toPainting">
  <image src="../../images/paint3.png" mode="aspectFit"/>
</view>

<view class="painting2" bindtap="toPainting2">
  <image src="../../images/paint2.png" mode="aspectFit"/>
</view>

/**index.wxss**/
page{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.painting{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  width: 260rpx;
  height: 260rpx;
  /* background-color: red; */
}

.painting2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  width: 260rpx;
  height: 260rpx;
  /* background-color: red; */
}

The effect of the home page is as follows ：

3、 ... and 、 Free drawing

Users can draw on a blank page
Users can adjust the brush thickness , Brush color
You can also use an eraser to erase
Finally, you can save the drawing to the local

Here's just UI Interface code

<!--painting.wxml-->
<canvas canvas-id="myCanvas" style="height: calc(100vh - {
   {canvasHeight}}px)" disable-scroll="true" bindtouchend="toucheEnd" bindtouchstart="touchStart" bindtouchmove="touchMove"/>
<view class="bottom">
  <block wx:for="{
   {btnInfo}}" wx:key="{
   {index}}">
    <view class="list-item" data-type="{
   {item.type}}" style="background: {
   {item.background}}" bindtap="tapBtn"></view>
  </block>
</view>
<view class="choose-box" wx:if="{
   {width}}">
<view class="color-box" style="background: {
   {'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {
   {w}}px; border-radius: {
   {w/2}}px"></view>
  <slider min="1" max="50" step="1" show-value="true" value="{
   {w}}" bindchange="changeWidth"/>
</view>
<view class="choose-box" wx:if="{
   {color}}">
  <view class="color-box" style="background: {
   {'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {
   {w}}px; border-radius: {
   {w/2}}px"></view>
  <slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{
   {r}}" data-color="r" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{
   {g}}" data-color="g" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{
   {b}}" data-color="b" bindchange="changeColor"/>
</view>
<view class="choose-box-flex" wx:if="{
   {clear}}">
  <view class="choose-item" bindtap="chooseEraser">
    <view class="choose-img" style='background: url("https://s1.ax1x.com/2022/05/25/XkppBF.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px; border: {
   {eraser ? "2px solid red" : "2px solid transparent"}}'></view>
    <view> Eraser </view>
  </view>
  <view class="choose-item" bindtap="clearCanvas">
    <view class="choose-img" style='background: url("https://s1.ax1x.com/2022/05/25/XkpDCn.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px;'></view>
    <view> Empty </view>
  </view>
</view>

/* painting.wxss */
page {
  background: rgba(153, 204, 255, 0.1);
}

canvas {
  width: 100vw;
}

.bottom {
  width: 100vw;
  height: 50px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}

.list-item {
  width: 30px;
  height: 30px;
  margin: 10px 0;
  border-radius: 50%;
}

.choose-box {
  width: 100vw;
  position: absolute;
  bottom: 50px;
}

.color-box {
  width: 50vw;
  margin: 20px auto;
}

slider {
  margin: 20px 30px;
}

.choose-box-flex {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  position: absolute;
  bottom: 50px;
  font-size: 16px;
  color: #666;
  text-align: center;
}
.choose-img {
  width: 30px;
  height: 30px;
  margin: 10px;

  border-radius: 50%;
  background: white;
}

Now I will show you my roommate ！！！
（ Those who like my roommate can confide in me , Send micro signal ！！！）

Four 、 Photo drawing

The user can select a photo
Painting on the basis of photos
Other functions are consistent with free painting

Here's just UI Interface code

<!--painting-2.wxml-->
<canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="touchStart"
  bindtouchmove="touchMove" bindtouchend="touchEnd" wx:if="{
   {hasChoosedImg}}"
  style="height: {
   {(canvasHeightLen == 0) ? canvasHeight : canvasHeightLen}}px; width: {
   {canvasWidth}}px;" 
/>
<view class="failText" wx:if="{
   {!hasChoosedImg}}" click=""> No photos selected , Click to reselect </view>
<view class="bottom">
  <block wx:for="{
   {btnInfo}}" wx:key="{
   {index}}">
    <view class="list-item" data-type="{
   {item.type}}" style="background: {
   {item.background}}" bindtap="tapBtn"></view>
  </block>
</view>
<view class="choose-box" wx:if="{
   {width}}">
<view class="color-box" style="background: {
   {'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {
   {w}}px; border-radius: {
   {w/2}}px"></view>
  <slider min="1" max="50" step="1" show-value="true" value="{
   {w}}" bindchange="changeWidth"/>
</view>
<view class="choose-box" wx:if="{
   {color}}">
  <view class="color-box" style="background: {
   {'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {
   {w}}px; border-radius: {
   {w/2}}px"></view>
  <slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{
   {r}}" data-color="r" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{
   {g}}" data-color="g" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{
   {b}}" data-color="b" bindchange="changeColor"/>
</view>

/* painting-2.wxss */
page {
  background: rgba(153, 204, 255, 0.1);
}

.failText {
  margin-top: 100px;
  text-align: center;
  color: #888;
}

.bottom {
  width: 100vw;
  height: 50px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}

.list-item {
  width: 30px;
  height: 30px;
  margin: 10px 0;
  border-radius: 50%;
}

.choose-box {
  width: 100vw;
  position: absolute;
  bottom: 50px;
}

.color-box {
  width: 50vw;
  margin: 20px auto;
}

slider {
  margin: 20px 30px;
}

.choose-box-flex {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  position: absolute;
  bottom: 50px;
  font-size: 16px;
  color: #666;
  text-align: center;
}
.choose-img {
  width: 30px;
  height: 30px;
  margin: 10px;

  border-radius: 50%;
  background: white;
}

Next I will draw my roommate 2 Number ！！
My roommate 2 No. 1 is the school grass ！！！
If you like it, please send me a wechat message ！

At the end of the article

That's all for the specific introduction
Small programs sometimes get stuck, but not much
Interested students can continue to study
The code is in the link below

Click to download Applet