Example of the graffiti function implemented by WeChat applets [Download source code] and download the applet source code

Example of the graffiti function implemented by the applet [Download source code], download the applet source code

This article describes the graffiti function implemented by applets. We will share this with you for your reference. The details are as follows:

Let's take a look at the running effect:

Layout file index. wxml:

<View class = "container"> <! -- Canvas area --> <view class = "canvas_area"> <! -- Note: The canvas-id in the same page cannot be repeated. If you use a canvas-id that has already appeared, the canvas corresponding to the canvas label is hidden and does not work normally. --> <canvas-id = "myCanvas" class = "myCanvas" disable-scroll = "false" bindtouchstart = "touchStart "bindtouchmove =" touchMove "bindtouchend =" touchEnd "> </canvas> </view> <! -- Canvas tool area --> <view class = "canvas_tools"> <view class = "box box1" bindtap = "penSelect" data-param = "5"> </view> <view class = "box box2" bindtap = "penSelect" data-param = "15"> </view> <view class = "box box3" bindtap = "colorSelect" data-param = "# cc0033"> </view> <view class = "box box4" bindtap = "colorSelect" data-param = "# ff9900"> </view> <view class = "box box5" bindtap = "clearCanvas"> </view>

Index. js:

Page ({data: {pen: 3, // paint width default value color: '# cc0033' // paint color default value}, startX: 0, // save X axis Variable startY: 0, // Save the X axis Variable isClear: false, // whether to enable the eraser flag // touch the finger to start the touchStart: function (e) {// obtain the coordinates of the touch point this. startX = e. changedTouches [0]. x this. startY = e. changedTouches [0]. y this. context = wx. createContext () if (this. isClear) {// determine whether the Enable eraser function true indicates clearing false indicates painting this. context. setStrokeStyle ('# f8f8f8') // set the line style to the back of the canvas. Scene color eraser principle is: the background color of the canvas is the same as that of the place where the image is wiped to achieve the effect of the eraser. context. setLineCap ('round ') // set the line endpoint style this. context. setLineJoin ('round ') // set the style at the intersection of two lines this. context. setLineWidth (20) // set the line width this. context. save (); // save the scaling, rotation, and translation information of the current coordinate axis. this. context. beginPath () // start a path this. context. arc (this. startX, this. startY, 5, 0, 2 * Math. PI, true); // Add an arc path to the current path and draw it clockwise. A total of 360 degrees is drawn, that is, a circle. this. context. fill (); // fill the current path with this. context. Restore (); // restore the scaling, rotation, and translation information of the previously saved coordinate axes} else {this. context. setStrokeStyle (this. data. color) this. context. setLineWidth (this. data. pen) this. context. setLineCap ('round ') // round the line this. context. beginPath () }}, // move the touchMove: function (e) {var startX1 = e. changedTouches [0]. x var startY1 = e. changedTouches [0]. y if (this. isClear) {// determine whether the Enable eraser function true indicates clearing false indicates painting this. context. save (); // save the scaling, rotation, and translation of the current coordinate axis Information this. context. moveTo (this. startX, this. startY); // move the path to the specified vertex in the canvas, but do not create a line this. context. lineTo (startX1, startY1); // Add a new vertex, and then create the line from this vertex to the last specified vertex in the canvas this. context. stroke (); // stroke the current path this. context. restore () // restore the scaling, rotation, and translation information of the previously saved coordinate axes. this. startX = startX1; this. startY = startY1;} else {this. context. moveTo (this. startX, this. startY) this. context. lineTo (startX1, startY1) this. context. stroke () this. startX = star TX1; this. startY = startY1;} // It is just a container that records method calls and is used to generate the actions array that records the painting behavior. Context does not correspond to <canvas/>. An array of draw actions generated by a context can be applied to multiple <canvas/> wx. drawCanvas ({canvasId: 'mycanvas ', reserve: true, actions: this. context. getActions () // get the drawing action array})}, // touch the finger action to end the touchEnd: function () {}, // start the eraser method clearCanvas: function () {if (this. isClear) {this. isClear = false;} else {this. isClear = true ;}}, penSelect: function (e) {// method console for changing the paint brush size. log (e. currentTarget); this. setData ({pen: parseInt (e. currentTarget. dataset. param)}); this. isClear = false;}, colorSelect: function (e) {// method console for changing the paint color. log (e. currentTarget); this. setData ({color: e. currentTarget. dataset. param}); this. isClear = false ;}})

Appendix: complete instance code click hereDownload from this site.

I hope this article will help you develop small programs.