Applet comments / handwriting

Time:2021-7-16

This chapter mainly introduces how to make handwriting / picture annotation in small programs.

Introduction to small program documents

Canvas:Canvas, drawing context:CanvasContext

1. Create a canvas in the front end, and the canvas ID of the front end’s canvas,Using Wx. Createcontext to get the drawing context

var context = wx.createCanvasContext('myCanvas')

2. Set properties / styles. The following are the most commonly used ones

  • setStrokeStyle(‘red’) — Set line style
  • Setlinewidth (4) — set line width
  • Setlinecap (‘Round ‘) — sets the style of line ends

3. Drawing

Set path:

  • context.lineTo(x,y)
  • context.moveTo(x,y)
  • context.rect(x1,y1,x2,y2)

Then set the style and you can draw:

context.setStrokeStyle('red')
context.stroke()
context.draw()

The above is to set the style and then draw stroke().

Multi segment drawing:

The path described by stroke() is calculated from beginpath(), so if you need to draw multiple color line segments:

After you need lineTo (), setStrokeStyle (), stroke (), call context.beginPath () to start a new paragraph.

If you don’t restart the path, it will be set last time(setFillStylesetStrokeStyleSetlinewidth).

In addition, it should be noted that:stroke()   Strokrect() will not be included because strokrect() will draw immediately.

Picture annotation demo

index.wxml

Multiple images, using swiper preview. Click to enter the annotation state and display the current picture as the background of the canvas

1     
 2         
 3             
 4                 
 5                     
 6                 
 7             
 8         
 9         
10             
11             
12         
13

index.js

Record the start position of the touch, and draw directly when the touch moves. Some other operations, such as start annotation, undo, reset and save, are relatively simple. See the demo of GitHub for details.

1     /**
 2 * touch start
 3      */
 4     touchStart: function (e) {
 5         if (e.changedTouches.length >= 2) return;
 6 // get the coordinates of the touch point
 7         this.startX = e.changedTouches[0].x
 8         this.startY = e.changedTouches[0].y
 9 // set brush color
10         this.context.strokeStyle = this.data.penColor;
11 // set line width
12         this.context.setLineWidth(this.data.lineWidth);
13 // make the lines mellow
14         this.context.setLineCap('round')
15         this.context.beginPath()
16     },
17     /**
18 * move after finger touch
19      */
20     touchMove: function (e) {
21         if (e.changedTouches.length >= 2) return;
22         var startX1 = e.changedTouches[0].x
23         var startY1 = e.changedTouches[0].y
24 
25         this.context.moveTo(this.startX, this.startY)
26         this.context.lineTo(startX1, startY1)
27         this.context.stroke()
28 
29         this.startX = startX1;
30         this.startY = startY1;
31         this.context.draw(true);
32     },
33     /**
34 * touch end
35      */
36     touchEnd: function (e) {
37         this.touchMove(e);
38     },

Demo effect:

 

 demo:https://github.com/Kybs0/wechat_handWriting

Other pits:

If it is a small program developed with taro framework, the level of canvas will be very high. If you need to top the button, you can use cover view to add operations.