微信小程序如何實(shí)現(xiàn)會動的指南針

本篇內(nèi)容主要講解“微信小程序如何實(shí)現(xiàn)會動的指南針”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序如何實(shí)現(xiàn)會動的指南針”吧!

創(chuàng)建/添加圖像資源

首先用Word畫，然后轉(zhuǎn)換成png。

接下來在小程序工程中添加images目錄，將png文件拷貝到該目錄中。

index.wxml

<!--index.wxml-->

<view class="container">

 <!-- canvas.wxml -->

 <canvas style="width: 300px; height: 300px;" canvas-id="compassCanvas"></canvas>

 <view class="usermotto">

   <text class="angle_text">{{angle}}</text>

 </view>

</view>

添加一個名為compassCanvas，寬和高都是300px的canvas.

index.js

//logs.js

Page({

 data: {

   angle: '--',  

 },

 //指南針描畫

 drawCompass: function (direction) {

   var center_x = 150

   var center_y = 150

   // 使用 wx.createContext 獲取繪圖上下文 context

   var context = wx.createCanvasContext('compassCanvas')

   //根據(jù)角度旋轉(zhuǎn)坐標(biāo)系

   context.translate(center_x, center_y);

   context.rotate(-direction / 180 * Math.PI);

   context.translate(-center_x, -center_y);

   //描畫方向轉(zhuǎn)盤

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

                     center_x * 2, center_y * 2)

   //恢復(fù)坐標(biāo)系

   context.translate(center_x, center_y);

   context.rotate(direction / 180 * Math.PI);

   context.translate(-center_x, -center_y);

   //描畫指針。

   context.beginPath()

   context.setLineWidth(5)

   context.setStrokeStyle('red')

   context.moveTo(140, 112)

   context.lineTo(150, 60)

   context.lineTo(160, 112)

   context.closePath()

   context.stroke()

   context.draw()

 },

 //事件處理函數(shù)

 onLoad: function () {

   var that = this;

   wx.onCompassChange(function (res) {

     //保留1位小數(shù)

     var direction = res.direction.toFixed(1) + '°';

     that.setData({ angle: direction})

     that.drawCompass(res.direction);

   }); 

 },

})

drawCompass函數(shù)

首先通過以canvas中心為軸旋轉(zhuǎn)坐標(biāo)系，旋轉(zhuǎn)角度角度是負(fù)的羅盤角度。這里包含了一個角度到弧度的轉(zhuǎn)換。接下來描畫指南針表盤就簡單了。

在這個小程序中，表盤轉(zhuǎn)而指針不動，所以首先將坐標(biāo)系再轉(zhuǎn)回來，最后描畫指針。

onLoad函數(shù)

在onCompassChange的處理函數(shù)中，除了設(shè)定angle數(shù)據(jù)之外，同時調(diào)用的上面的drawCompass函數(shù)。

到此，相信大家對“微信小程序如何實(shí)現(xiàn)會動的指南針”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！