Flutter根据偏移量转换角度 Offset 的使用实例

￡神魔★判官ぃ 2023-10-07 17:31 2阅读 0赞

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

--------------------

学习Dart语言，首先我们需要使用到一个语言调试工具 [DartPad][]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

在 Dart 中，dart:math 类库提供了 数学常数和函数，加上随机数生成器，本文章来概述一下。

在使用前 你需要导入依赖

import 'dart:math';

##### 1 Offset 概述 #####

Offset 在Dart 中，用来表示 创建一个偏移量。第一个参数设置了dx，水平分量，第二个参数设置了dy，垂直分量。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

##### 2 Offset 的 direction #####

这个偏移量的角度为从正x轴顺时针方向的弧度，范围是 -pi ~ pi（-π ~ π），假设x轴的正值向右而y轴的正值向下。

*  0表示dy = 0 dx = 0或正， Offset(0,0) 表示无偏移，在原点位置
 *  从0到pi/2表示右下象限的dx和dy为正值。
 *  从pi/2到 pi 的值表示dx的负值，dy的正值，即左下象限。
 *  从0到 -pi /2表示右上象限的dx为正值，dy为负值。
 *  从- pi/2到-pi表示左上象限dx和dy的负值。

当dy = 0 dx为负时，direction的值是 pi。

当dx为0时，dy为正，direction为 pi/2 ,dy为负，direction 为- pi/2。  
查看源码 Offset 的 direction 实际上是反三角函数 tan 的计算

double get direction => math.atan2(dy, dx);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 1]

##### 3 根据偏移量来计算偏移角度 #####

import 'dart:math';
    
    import 'dart:ui';
    
    void main() {
        
      //定义偏移点
      Offset start = new Offset(200, 200);
    
      //获取计算偏移量 弧度
      double direction = start.direction;
      //获取直线偏移角度
      double angle = direction * 180 / pi;
      //保留两位小数
      String angleStr = angle.toStringAsFixed(2);
      
      print('tan direction $direction');
    
      print('角度: $angleStr°');
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 3]

--------------------

完毕

--------------------

小编也写了几本书，如果你有兴趣可以去看看

*  [手机点击查看][Link 1] \# [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

[DartPad]: https://dartpad.dev/?id=0ca5b334ec413c084575f575e0240501
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/325de0c4d6034da2836902cb5744a274.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7418fff1533f4235be65d894010358cd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5fc560268abe48e4883eb435606f48be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/90ea985d2ffc4ac2a44368a01327f9d0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/cc0b82b426dc4540ae6ce9ac0e70ced6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 4]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center