从0开发《工程测绘大师》小程序之玩转角度与弧度的互相转化篇（十）

于 2020-08-16 18:54:50 发布
阅读量859 收藏 1
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43030820/article/details/108040788
版权

在这里插入图片描述

上一篇讲解了如何实现角度与度分秒的计算，在该篇中我们会讲解如何实现角度与弧度的互相转换。

目录

侃侃而谈

为什么要进行角度与弧度的之间的相互转化呢？难道直接用角度不行吗？其实角度和弧度都是一种度量角大小的两种不同单位，这就好像“米”和“市尺”是度量长度大小的两种不同的单位一样。

为了计算方便很多很多数学公式通常过程都是以弧度计算，而结果以角度或度分秒的形式输出。这也就是为什么角度与弧度之间要相互转化的最大原因。

01、角度与弧度的概念

什么是角度？

角度是用以量度角的单位，符号为“°”。一周角分为360等份，每份定义为1度（1°）。

什么是弧度？

弧长等于半径的弧，其所对的圆心角为1弧度。(即两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角的弧度为1)。

一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17’44.806’’，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。

度与弧度之间的换算

角度转化成弧度

由以上得知，一个平角是 π 弧度。即

180度＝π弧度

由此可知：

1度＝π/180 弧度 ( ≈0.017453弧度 )

 所以 

 弧度＝度×π/180

弧度转化成角度

因为 π弧度＝180°
所以 1弧度＝180°/π （≈57.3°）
因此，可得到 把弧度化成度的公式：
度＝弧度×180°/π

02、角度➙弧度代码实现

因为代码中都有相应注释，这里我不会做过多的说明。你只需要在微信中任意创建一个page页面就可以编写运行，以下文件的名字只是一个参考。其中样式还是与之前第七篇的样式（centralmeridianis.wxss）一致，由于篇幅有限样式不再做过多说明。

dfmtorad.wxml

<mynavbar  back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="度分秒转弧度"></mynavbar>
<view class="header-text">
  <image src="../../../../../icon/deg1.png" style=""></image> 60进制角度
</view>
<block wx:for="{{list}}" wx:key="id">
  <view class="centralmerid" id="{{item.id}}">
    <view class="centralmerid-border {{item.border ? 'selected-border' :  '' }}">
      <view class="centralmerid-left-icon">
        <image class="img-icon" src="{{item.url}}"></image>
        <text class="left-text">{{item.text}}</text>
      </view>
      <input class="{{item.border ? 'selected-border' :  '' }}" type="digit" value="{{cleantext}}" bindfocus="{{item.focous}}"  bindblur="{{item.name}}" maxlength="{{item.maxlength}}"></input>
      <view class="centralmerid-right-text">{{item.unit}}</view>
    </view>
  </view>
</block>
<!-- 计算按钮 -->
<view class="result-btn" bindtap="multipleTap">
  <view class="results">
    <button type="primary" style="width:90%;">计算</button>
  </view>
</view>
<scroll-view class="footer" hidden="{{resultShow}}" scroll-y="true">
  <view class="result-inner">
    <view class="header-text close fixed-header">
      <view class="close">
        <image src="../../../../../icon/other.png"></image>结果
      </view>
      <image src="../../../../../icon/close.png" bindtap="myclose"></image>
    </view>
    <view class="result-inner-inner">弧度：<text class="resultColor">{{resultRad}}</text> ʳᵃᵈ</view>
  </view>
</scroll-view>
<view class="footer-text" wx:if="{{resultShow}}">
  <view class="footer-text-inner">
    <view class="footer-inner">小贴士：单击为计算，双击则为清空。</view>
    <view class="footer-inner">我国领土跨22个3度投影带，即第24~45带。</view>
  </view>
</view>

dfmtorad.json

{
  "usingComponents": {
    "mynavbar":"../../../../../common/resources/navbar/navbar"
  }
}

dfmtorad.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        duValue: '',
        fenValue: '',
        miaoValue: '',
        resultRad: '',
        resultShow: true,
        list: [{
                id: 0,
                name: 'duValue',
                focous: 'dufocous',
                unit: '°',
                url: '../../../../../icon/ed.png',
                text: "度",
                maxlength: 3,
                border: false
            },
            {
                id: 1,
                name: 'fenValue',
                focous: 'fenfocous',
                unit: '′',
                url: '../../../../../icon/ed.png',
                text: "分",
                maxlength: 2,
                border: false
            },
            {
                id: 2,
                name: 'miaoValue',
                focous: 'miaofocous',
                unit: '″',
                url: '../../../../../icon/ed.png',
                text: "秒",
                maxlength: 5,
                border: false
            }
        ]
    },
    // 关闭答案
    myclose() {
        this.setData({
            resultShow: true
        })
    },
     // 当前获取焦点改变边框颜色
     dufocous() {
        this.setData({
            'list[0].border': true
        })
    },
    fenfocous() {
        this.setData({
            'list[1].border': true
        })
    },
    miaofocous() {
        this.setData({
            'list[2].border': true
        })
    },
    // 获取度
    duValue(e) {
        this.setData({
            duValue: e.detail.value,
            'list[0].border': false
        })
    },
    fenValue(e) {
        this.setData({
            fenValue: e.detail.value,
            'list[1].border': false
        })
    },
    miaoValue(e) {
        this.setData({
            miaoValue: e.detail.value,
            'list[2].border': false
        })
    },
    // 当前选中的边框改变颜色
  
    // 计算
    calculations() {
        const PI = Math.PI
        var that = this
        if (that.data.duValue == '' || that.data.fenValue == '' || that.data.miaoValue == '') {
            wx.vibrateShort({}) //开启震动
            wx.showModal({
                title: '友情提示！',
                content: '请您输入完整值在进行计算！😂',
                showCancel: false,
                cancelText: "确定"
            })
        } else {
            var du = Number(that.data.duValue)
            var fen = Number(that.data.fenValue)
            var miao = Number(that.data.miaoValue)
            var deg = du + fen / 60 + miao / 3600 //度
            var rad = (deg * PI / 180).toFixed(9) //弧度
            that.setData({
                resultShow: false,
                resultRad: rad
            })
        }
    },
    // 调用最终计算
    //单击计算 
    multipleTap: function (e) {
        var that = this
        let curTime = e.timeStamp;
        let lastTime = that.lastTapDiffTime;
        that.lastTapDiffTime = curTime;
        //两次点击间隔小于300ms, 认为是双击
        let diff = curTime - lastTime;
        if (diff < 300) {
            clearTimeout(that.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
            that.setData({
                cleantext: '',
                duValue: '',
                fenValue: '',
                miaoValue: ''
            })
        } else { //双击清空
            // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
            that.lastTapTimeoutFunc = setTimeout(function () {
                that.calculations()
            }, 300);
        }
    }
})
其中最主要的部分为以下的部分这里实现了角度到度分秒的实现，小程序中都是用的js代码实现，你也可以用各种编程语言去实现，此处仅作为抛砖引玉。

var du = Number(that.data.duValue)
var fen = Number(that.data.fenValue)
var miao = Number(that.data.miaoValue)
var deg = du + fen / 60 + miao / 3600 //度
var rad = (deg * PI / 180).toFixed(9) //弧度
that.setData({
    resultShow: false,
    resultRad: rad
})

03、弧度➙角度及度分秒代码实现

radtodfm.wxml

<mynavbar back="true" home="true" tourl="../../../../../pageBar/component/index" color="rgba(0,0,0,.5)" titleText="弧度转度及度分秒"></mynavbar>
<block wx:for="{{list}}" wx:key="id">
  <view class="centralmerid" id="{{item.id}}">
    <view class="centralmerid-border {{item.border ? 'selected-border' :  '' }}">
      <view class="centralmerid-left-icon">
        <image class="img-icon" src="{{item.url}}"></image>
        <text class="left-text">{{item.text}}</text>
      </view>
      <input class="{{item.border ? 'selected-border' :  '' }}" type="digit" value="{{cleantext}}" bindblur="{{item.name}}" bindfocus="{{item.focous}}"></input>
      <view class="centralmerid-right-text">{{item.unit}}</view>
    </view>
  </view>
</block>
<!-- 计算按钮 -->
<view class="result-btn" bindtap="multipleTap">
  <view class="results">
    <button type="primary" style="width:90%;">计算</button>
  </view>
</view>
<scroll-view class="footer" hidden="{{resultShow}}" scroll-y="true">
  <view class="result-inner">
    <view class="header-text close fixed-header">
      <view class="close">
        <image src="../../../../../icon/other.png"></image>结果
      </view>
      <image src="../../../../../icon/close.png" bindtap="myclose"></image>
    </view>
    <view class="result-inner-inner">度：<text class="resultColor">{{deg}}</text></view>
    <view class="result-inner-inner">度分秒：<text class="resultColor">{{dufenmiao}}</text></view>
  </view>
</scroll-view>
<view class="footer-text" wx:if="{{resultShow}}">
  <view class="footer-text-inner">
    <view class="footer-inner">小贴士：单击为计算，双击则为清空。</view>
    <view class="footer-inner">我国领土跨22个3度投影带，即第24~45带。</view>
  </view>
</view>

radtodfm.json

{
  "usingComponents": {
    "mynavbar":"../../../../../common/resources/navbar/navbar"
  }
}

radtodfm.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        radValue: '',
        dufenmiao: '',
        selecteBorder: false,
        resultShow: true,
        list: [{
            id: 0,
            name: 'radValue',
            focous: 'radfocous',
            unit: 'ʳᵃᵈ',
            url: '../../../../../icon/deg1.png',
            text: "弧度",
            border: false
        }]
    },
    // 关闭答案
    myclose() {
        this.setData({
            resultShow: true
        })
    },
    // 获取度
    radValue(e) {
        this.setData({
            radValue: e.detail.value,
            'list[0].border': false
        })
    },
    // 获取焦点后改变边框
    radfocous() {
        this.setData({
            'list[0].border': true
        })
    },
    // 计算
    calculations() {
        const PI = Math.PI
        var that = this
        if (that.data.radValue == '') {
            wx.vibrateShort({}) //开启震动
            wx.showModal({
                title: '友情提示！',
                content: '请您输入值在进行计算！😂',
                showCancel: false,
                cancelText: "确定"
            })
        } else {
            var radValue = Math.abs(that.data.radValue) //角度
            var deg = getApp().fomatFloat((radValue * 180 / PI),10) //弧度
            var du = Math.floor(deg) //度
            var fen = Math.floor((deg - du) * 60) //分
            var miao = ((deg - du) * 3600 % 60).toFixed(0) //秒 四舍六入
            that.setData({
                resultShow: false,
                deg: deg + '°',
                dufenmiao: du + "°" + fen + "′" + miao + "″"
            })
        }
    },
    // 调用最终计算
    //单击计算 
    multipleTap: function (e) {
        var that = this
        let curTime = e.timeStamp;
        let lastTime = that.lastTapDiffTime;
        that.lastTapDiffTime = curTime;
        //两次点击间隔小于300ms, 认为是双击
        let diff = curTime - lastTime;
        if (diff < 300) {
            clearTimeout(that.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
            that.setData({
                cleantext: '',
                radValue: '',
                dufenmiao: ''
            })
        } else { //双击清空
            // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
            that.lastTapTimeoutFunc = setTimeout(function () {
                that.calculations()
            }, 300);
        }
    }
})

其中最主要的代码为以下部分

  var radValue = Math.abs(that.data.radValue) //角度
  var deg = getApp().fomatFloat((radValue * 180 / PI),10) //弧度
  var du = Math.floor(deg) //度
  var fen = Math.floor((deg - du) * 60) //分
  var miao = ((deg - du) * 3600 % 60).toFixed(0) //秒 四舍六入
  that.setData({
      resultShow: false,
      deg: deg + '°',
      dufenmiao: du + "°" + fen + "′" + miao + "″"
  })

04、界面展示

如何验证我们的计算是否准确？这是编写计算类的程序都会遇到的问题，在角度与度分秒的相互转换中可以很简单的验证，你只需要把互相计算出的结果用于互相计算，如果结果一样就OK。

图 3-1 度分秒转弧度
在这里插入图片描述

图 3-2 弧度转度分秒及度
在这里插入图片描述

-END-

-预告-

以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之坐标正算（十一）
在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨说前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值