Android利用控制点的拖拽画一个粽子

 更新时间:2022年05月30日 09:37:53   作者:岛上码农  
端午节就要到了,本文我们将利用控制点的拖拽式移动,动态调整位置来调整绘制一个简单的粽子图形,感兴趣的小伙伴可以跟随小编一起动手尝试一下

前言

上一篇我们通过Listener获取触控点的位置作为贝塞尔曲线的控制点,实现曲线的交互式绘制。不过,上一篇有个缺陷,控制点绘制完成后只能撤销,没法修改,如果要调整绘制的图形的话会非常麻烦,这一篇我们来实现控制点的拖拽式移动,动态调整位置来调整绘制的图形。

实现逻辑

上一篇的主要代码我们不做更改,主要是需要实现控制点的拖拽式移动,移动过程中动态绘制新的曲线。不过由于绘制过程中不能同时移动点,因此需要有个完成绘制的控制,完成绘制后才支持拖拽控制点。拖拽控制点实现这里有两个主要逻辑:

  • 控制点的命中判断:即拖拽开始时判断哪个控制点被命中,需要移动。
  • 监听触控位置的移动过程:移动过程中动态绘制新的图形,以便直接看到对应的效果。

控制点的命中判断在完成绘制后,首先需要监听触控按下事件,看看触控点是否覆盖了某个控制点的触控响应范围,同时对于距离较近的点,可能会同时命中多个点的触控响应范围,这个时候需要取距离最近的那个点。对于触控范围,我们定义为每个触控点的周边10个像素点。命中触控点的实现代码如下:

int checkPointToMove(Offset pressedPoint) {
    // 控制点非空才查找
    if (points.isNotEmpty) {
      var pointsToCheck = <Offset>[];
      final maxDistance = 10.0;
      // 查找触控响应范围内的控制点
      for (Offset p in points) {
        if ((p.dx - pressedPoint.dx).abs() < maxDistance &&
            (p.dy - pressedPoint.dy).abs() < maxDistance) {
          pointsToCheck.add(p);
        }
      }
      
      // 未找到
      if (pointsToCheck.length == 0) {
        return -1;
      } else if (pointsToCheck.length == 1) {
        // 只有一个点,直接返回
        return points.indexOf(pointsToCheck[0]);
      } else {
        // 有多个点命中,找到距离最近的点返回
        Offset point = pointsToCheck[0];
        var distance = distanceBetween(pointsToCheck[0], pressedPoint);
        for (int i = 1; i < pointsToCheck.length; i++) {
          var newDistance = distanceBetween(pointsToCheck[i], pressedPoint);
          if (newDistance < distance) {
            point = pointsToCheck[i];
            distance = newDistance;
          }
        }

        return points.indexOf(point);
      }
    }

    return -1;
  }

移动过程的处理就比较简单了,我们已经找到了命中的控制点,那就在触控位置移动监听响应方法onPointerMove中更新控制点位置,并重新绘制即可,代码如下,其中indexOfPointToMove是一个状态变量,即找到的控制点下标:

onPointerMove: ((event) {
  if (indexOfPointToMove != -1) {
    points[indexOfPointToMove] = event.localPosition;
    setState(() {});
  }
}),

应用

逻辑完成了,我们就来做一个绘制应用吧。考虑端午节快到了,我们尝试来绘制一个粽子的线条画看看。下面是调整前后的对比效果以及调整过程的动图,可以看到,调整后的还是更像粽子一些。

总结

本篇介绍了如何通过拖拽调整贝塞尔曲线绘制的控制点来调整图形的绘制,实际上很多绘图都可能用到拖拽式的控制点位的调整,比如电子围栏的设置。实际上主要的代码是判断触控位置命中了具体哪个控制点。本篇代码已经上传至:绘图相关代码

以上就是Android利用控制点的拖拽画一个粽子的详细内容,更多关于Android粽子的资料请关注脚本之家其它相关文章!

相关文章

  • android屏幕圆角实现方法的示例代码

    android屏幕圆角实现方法的示例代码

    本篇文章主要介绍了android屏幕圆角实现方法的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 使用Fragment+ViewPager实现底部导航栏

    使用Fragment+ViewPager实现底部导航栏

    这篇文章主要为大家详细介绍了使用Fragment+ViewPager实现底部导航栏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Android用ActionBar高仿微信主界面的实例代码

    Android用ActionBar高仿微信主界面的实例代码

    这篇文章主要介绍了Android用ActionBar高仿微信主界面的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 基于Android实现一个常用的布局吸顶效果

    基于Android实现一个常用的布局吸顶效果

    这篇文章给大家介绍一个布局吸顶效果,一般出现在内容较长页面还嵌套着分类页面的情况,比如电商的详情页嵌套分类,在页面滑动到tab的时候我们希望tab还能保留在页面顶部而不被顶上去,文中有详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • Android开发使用RecyclerView添加点击事件实例详解

    Android开发使用RecyclerView添加点击事件实例详解

    这篇文章主要为大家介绍了Android开发使用RecyclerView添加点击事件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Android动态加载Activity原理详解

    Android动态加载Activity原理详解

    这篇文章主要介绍了Android动态加载Activity原理详解的相关资料,需要的朋友可以参考下
    2016-04-04
  • Android Studio启动报错Java 1.8 or later is required的解决方法

    Android Studio启动报错Java 1.8 or later is required的解决方法

    这篇文章主要为大家详细介绍了Android Studio启动时报错Java 1.8 or later is required的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Kotlin挂起函数应用介绍

    Kotlin挂起函数应用介绍

    挂起函数用状态机以挂起点将协程的运算逻辑拆分成不同的片段,每次执行协程运行不同的逻辑片段,由此可以知道协程是运行在线程中的,线程的并发处理方式也可以用在协程上
    2022-11-11
  • Android 修改app图标和名称的方法

    Android 修改app图标和名称的方法

    下面小编就为大家分享一篇Android 修改app图标和名称的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Android AndFix热修复原理详情

    Android AndFix热修复原理详情

    这篇文章主要介绍了Android AndFix热修复原理详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值吗,需要的小伙伴可以参考一下
    2022-08-08

最新评论