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

This article mainly explains "how to achieve the moving compass of WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to achieve the moving compass of WeChat Mini Programs.

Create / add image resources

First draw with Word, and then convert it to png.

Next, add the images directory to the Mini Program project and copy the png file to that directory.

Index.wxml

{{angle}}

Add a canvas named compassCanvas whose width and height are both 300px.

Index.js

/ / logs.js

Page ({

Data: {

Angle:'- -'

}

/ / Guide needle drawing

DrawCompass: function (direction) {

Var center_x = 150

Var center_y = 150

/ / use wx.createContext to get the drawing context context

Var context = wx.createCanvasContext ('compassCanvas')

/ / rotate the coordinate system according to the angle

Context.translate (center_x, center_y)

Context.rotate (- direction / 180 * Math.PI)

Context.translate (- center_x,-center_y)

/ / draw the direction turntable

Context.drawImage ('.. /.. / images/compass-1.png', 0,0

Center_x * 2, center_y * 2)

/ / restore the coordinate system

Context.translate (center_x, center_y)

Context.rotate (direction / 180 * Math.PI)

Context.translate (- center_x,-center_y)

/ / draw the pointer.

Context.beginPath ()

Context.setLineWidth (5)

Context.setStrokeStyle ('red')

Context.moveTo (140112)

Context.lineTo (150,60)

Context.lineTo (160112)

Context.closePath ()

Context.stroke ()

Context.draw ()

}

/ / event handling function

OnLoad: function () {

Var that = this

Wx.onCompassChange (function (res) {

/ / keep 1 decimal place

Var direction = res.direction.toFixed (1) +'°'

That.setData ({angle: direction})

That.drawCompass (res.direction)

});

}

})

DrawCompass function

Firstly, by rotating the coordinate system with the canvas center as the axis, the rotation angle is a negative compass angle. This includes a conversion from angle to Radian. Next, it's easy to draw the compass dial.

In this Mini Program, the dial turns to the pointer, so first turn the coordinate system back, and finally draw the pointer.

OnLoad function

In the onCompassChange processing function, in addition to setting the angle data, the above drawCompass function is called at the same time.

At this point, I believe you have a deeper understanding of "how to achieve the moving compass of WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.