Shulou(Shulou.com)06/02 Report--

This article is about how to implement the canvas drag function in Mini Program. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Create a canvas

Data data

/ / Mouse status statusConfig: {idle: 0, / / normal status Drag_start: 1, / / drag start Dragging: 2, / / dragging}, / / canvas status canvasInfo: {/ / Circle status status: 0, / / Mouse position inside the circle dragTarget: null, / / position when you click on the circle lastEvtPos: {x: null, y: null} }

Draw two circles on the canvas

OnLoad: function (options) {/ / set the canvas to get the context ctx this.getCanvas () of the canvas }, getCanvas () {/ / get the canvas element according to id, WeChat Mini Programs cannot use document, we need to use wx.createSelectorQuery () instead of const query = wx.createSelectorQuery () query.select ('# myCanvas') .fields ({node: true, size: true}) .exec ((res) = > {const canvas = res [0] .node / / sets the canvas scale canvas.width= "500" Canvas.height= "600,000"; const ctx = canvas.getContext ('2d') / / draw two circles on the canvas and pass ctx to paint this.drawCircle (ctx, 100,100,20); this.drawCircle (ctx, 200,200,10) / / save the information about our painting. After moving, we need to empty the artboard and redraw var circles = [] circles.push ({x: 100,100, r: 20}); circles.push ({x: 200,200, r: 10}) Don't forget to save this.setData ({circles})}, / / draw a circle drawCircle (ctx, cx, cy, r) {ctx.save () ctx.beginPath () ctx.strokeStyle = 'yellow' ctx.lineWidth = 3 ctx.arc (cx, cy, r, 0, 2 * Math.PI) ctx.stroke () ctx.closePath () ctx.restore ()}

Set 3 touch event types to the canvas to trigger conditions touchstart finger touch action start touchmove finger touch move touchcancel finger touch action is interrupted, such as call reminder, pop-up window touchend finger touch action ends tap finger touch action leaves immediately

The touch action begins. If the click point is in the circle, change the information in canvasInfo.

HandleCanvasStart (e) {/ / get the position of the click point const canvasPosition = this.getCanvasPosition (e); / / determine whether the click point is in the circle. If false is not returned, the information const circleRef = this.ifInCircle (canvasPosition) of the circle is returned; if const {canvasInfo, statusConfig} = this.data; / / is in the circle, change the status information of the circle if (circleRef) {canvasInfo.dragTarget = circleRef / / change the drag state idle-> Drag_start canvasInfo.status = statusConfig.Drag_start; canvasInfo.lastEvtPos = canvasPosition } this.setData ({canvasInfo})}, / / get the location of the click point getCanvasPosition (e) {return {x: e.changedTouches [0] .x, y: e.changedTouches [0] .y}}, / / see if the click point is in the circle ifInCircle (pos) {const {circles} = this.data; for (let I = 0; I)

< circles.length; i++ ){ // 判断点击点到圆心是不是小于半径 if( this.getDistance(circles[i], pos) < circles[i].r ){ return circles[i] } } return false },// 获取两点之间的距离（数学公式）getDistance(p1, p2){ return Math.sqrt((p1.x-p2.x) ** 2 + (p1.y-p2.y) ** 2)} 手指触摸后移动 , 重新绘制圆 handleCanvasMove(e){ const canvasPosition = this.getCanvasPosition(e); const {canvasInfo, statusConfig, circles} = this.data; // 是拖拽开始状态，滑动的大小大于5（防抖） if( canvasInfo.status === statusConfig.Drag_start && this.getDistance(canvasPosition, canvasInfo.lastEvtPos) >

5) {/ / change the drag state Drag_start-> Dragging canvasInfo.status = statusConfig.Dragging;} else if (canvasInfo.status = statusConfig.Dragging) {canvasInfo.dragTarget.x = canvasPosition.x; canvasInfo.dragTarget.y = canvasPosition.y / / redraw const query = wx.createSelectorQuery () query.select ('# myCanvas') .fields ({node: true, size: true}) .exec ((res) = > {const canvas = res [0] .node canvas.width= "500"; canvas.height=" 600" Const ctx = canvas.getContext ('2d') / / iterate through circles, draw the circle again circles.forEach (c = > this.drawCircle (ctx, c.x, c.y, c.r)})} this.setData ({canvasInfo,})}

The finger touch action ends, and the canvasInfo is changed to idle again in the state.

HandleCanvasEnd (e) {const {canvasInfo, statusConfig} = this.data; if (canvasInfo.status = statusConfig.Dragging) {/ / change the drag state Dragging-> idle canvasInfo.status = statusConfig.idle; this.setData ({canvasInfo})}} Thank you for reading! On "how to achieve canvas drag function in Mini Program" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.