How to implement simple handwritten signature component by WeChat Mini Programs
This article mainly introduces WeChat Mini Programs how to achieve a simple handwritten signature component of the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this WeChat Mini Programs how to achieve a simple handwritten signature component article will have a harvest, let's take a look.
Demand:
It is possible to realize the user's handwritten signature on WeChat Mini Programs.
Componentization is required.
Effect.
First, train of thought
In WeChat Mini Programs, we use the canvas component to implement. Think of the user's input as a pen. The signature we are going to draw is made up of many points. But simple points do not form a line very well. Points are also connected by lines. The following is the implementation process code.
II. Realization
1. Page and style
Wxml
The canvas component here is the latest usage.
Empty
Wxss
.btnList {width: 95%; margin:0 auto;} .handWriting {background: # fff; width: 95%; height: 80vh; margin:0 auto} 2. Initialization
Because it is used in custom components, you should pay attention to the problem of this pointing when getting canvas. If you do not call the In method of SelectorQuery, then the custom component cannot get the canvas because it points to the parent component at this time.
Component (initial data of {/ * component * / data: {canvasName: "# handWriting", ctx: ", canvasWidth:0, canvasHeight:0, startPoint: {x 1A1A1A 0, y 1A1A1A 0,}, selectColor:" black ", lineColor:" # 1A1A1A " / / Color lineSize: 1.5, / / Note multiple radius:5,// the radius of the circle drawn}, ready () {let canvasName = this.data.canvasName Let query = wx.createSelectorQuery () .in (this); / / get the SelectQuery object query.select (canvasName) .fields ({node: true, size: true}) .exec ((res) = > {const canvas = res [0] .node; const ctx = canvas.getContext ("2d"); / / get the device pixel ratio const dpr = wx.getSystemInfoSync (). PixelRatio / / set canvas canvas size to prevent handwriting dislocation canvas.width = res [0] .width * dpr; canvas.height = res [0] .height * dpr; ctx.scale (dpr, dpr); ctx.lineJoin= "round"; this.setData ({ctx});}) Query.select (".handcenter") .boundingClientRect (rect = > {console.log ("rect", rect); this.setData ({canvasWidth:rect.width, canvasHeight:rect.height});}). Exec ();}, / / omit the following code.}); 3. When clicked
Component ({/ / omit the above code. Methods: {scaleStart (event) {if (event.type! = "touchstart") return false; let currentPoint = {x: event.touches [0] .x, y: event.touches [0] .y} this.drawCircle (currentPoint) This.setData ({startPoint:currentPoint});}, drawCircle (point) {/ / the responsible point here is let ctx = this.data.ctx; ctx.beginPath (); ctx.fillStyle = this.data.lineColor / the handwriting thickness is determined by the size of the circle ctx.arc (point.x, point.y, this.data.radius, 0,2 * Math.PI); ctx.fill (); ctx.closePath ();}, / / omit the following code.}) 4. When signing
Component ({/ / omit the above code methods: {drawLine (sourcePoint, targetPoint) {let ctx = this.data.ctx; this.drawCircle (targetPoint); ctx.beginPath (); ctx.strokeStyle = this.data.lineColor; ctx.lineWidth = this.data.radius * 2 / / multiply 2 here because the thickness of the line is equal to the diameter of the circle ctx.moveTo (sourcePoint.x, sourcePoint.y); ctx.lineTo (targetPoint.x, targetPoint.y); ctx.stroke (); ctx.closePath ();}, clearCanvas () {/ / clear the canvas let ctx = this.data.ctx Ctx.rect (0,0, this.data.canvasWidth, this.data.canvasHeight); ctx.fillStyle = "# FFFFFF"; ctx.fill ();}}) this is the end of the article on "how to implement a simple handwritten signature component for WeChat Mini Programs". Thank you for reading! I believe you all have a certain understanding of "how to realize the simple handwritten signature assembly by WeChat Mini Programs". If you want to learn more, you are welcome to follow the industry information channel.
