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

2024-10-29 13:51:55

前言

上一篇我们通过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通过交互实现贝塞尔曲线的绘制

目录前言获取触控位置交互绘制实现绘制代码运行效果总结前言之前几篇我们介绍了贝塞尔曲线的原理.绘制曲线和动效实现,这些都是代码预设好的,如果我们要根据需要自行绘制曲线,就需要使用交互来实现了.本篇我们先来介绍简单的交互式绘图,通过获取触控位置来设定贝塞尔曲线的控制点,从而实现交互式绘制曲线. 获取触控位置第一个要解决的问题是如何获取手指在屏幕的触控位置.在 Flutter 中,提供了一个 Listener 组件,可以监听各类触控事件.Listener 的组件构造方法定义如下: c
android实现多点触摸应用

本文实例为大家分享了android实现多点触摸应用的具体代码,供大家参考,具体内容如下 JhkMultiTouchActivity.java package com.android.forlinx; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; public class JhkMultiTouchAc
Android实现手机多点触摸画圆

本文实例为大家分享了Android实现手机多点触摸画圆的具体代码,供大家参考,具体内容如下静态效果图:(多个手指按下和抬起的状态) 代码实现部分: 1.先写个实体类,设置相关的属性 package com.zking.laci.android19_pointstouch; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import java.ut
Android实现多点触控功能

使用了Android的系统API实现了多点触控功能,多点触控对设备的硬件有一定的要求,目前市面上的手机几乎都能实现多点触控了.实现多点触控最关键的API: event.getPointerCount() 意思是这事件中包含的数据的指针的数量,总是大于或等于1.可以简单理解为放在手机屏幕上的手指的数目,为什么总是大于或等于1呢?因为触发事件需要用手指去触屏,一触屏必然产生一个指针. 重写这两个函数: 一: public boolean onTouchEvent(MotionEvent event)
Android通过单点触摸移动图片

本文实例为大家分享了Android通过单点触摸移动图片的具体代码,供大家参考,具体内容如下编写布局资源文件先准备一张图片放入drawable内这里主要就是将图片显示出来并设置id(android:scaleType="fitXY"表示图片按原比例设置大小) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sche
Android利用控制点的拖拽画一个粽子

目录前言实现逻辑应用总结前言上一篇我们通过Listener获取触控点的位置作为贝塞尔曲线的控制点,实现曲线的交互式绘制.不过,上一篇有个缺陷,控制点绘制完成后只能撤销,没法修改,如果要调整绘制的图形的话会非常麻烦,这一篇我们来实现控制点的拖拽式移动,动态调整位置来调整绘制的图形. 实现逻辑上一篇的主要代码我们不做更改,主要是需要实现控制点的拖拽式移动,移动过程中动态绘制新的曲线.不过由于绘制过程中不能同时移动点,因此需要有个完成绘制的控制,完成绘制后才支持拖拽控制点.拖拽控制点实现
Android仿qq消息拖拽效果

本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView.Button.Imageview等都可以实现相应的拖拽效果:在触发的地方调用 MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void d
Android自定义View实现拖拽效果

腾讯QQ有那种红点拖动效果,今天就来实现一个简单的自定义View拖动效果,再回到原处,并非完全仿QQ红点拖动. 先来看一下效果图简单说一下实现步骤 1.创建一个类继承View 2.绘制出一个小球 3.重写onTouchEvent,来根据手指放下,移动,抬起,来控制小球 4.直接在布局中引用先贴一张图看下View的坐标系下面就贴一下代码,最后会给出源码 public class CustomView extends View { private int lastX; private int
Android 实现仿QQ拖拽气泡效果的示例

目录效果图: 一.实现思路二.功能实现三.全屏拖拽效果实现源码地址: 效果图: 一.实现思路在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效果. 整个拖拽效果我们可以拆分成以下几步来实现: 1.默认状态 2.两气泡相连状态 3.两气泡分离状态 4.气泡消失状态二.功能实现默认状态:用来做一个状态的标识,无需特别处理. 两气泡相连状态:绘制一个固定圆和一个移
android ListView和GridView拖拽移位实现代码

关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例: 首先说一下:拖拽ListView的item就不应该可以任意移动,只应该在ListView所在的范围内,而网易的你看看我都可以移动到状态栏了,虽然你做了处理,但是用户体验我个人感觉不好,在看看百度的,不仅控制了移动范围,更不错的百度的移动起来会时时的换位,看起来相当的形象,所以我认为这样相当的棒.说明一点
Android实现悬浮可拖拽的Button

本文实例为大家分享了Android实现悬浮可拖拽Button的具体代码,供大家参考,具体内容如下 1.简介最近,因为项目需要,需要制作一个界面上可拖拽的按钮,网上也有多实例,看了下大部分都是示例不全或讲解不清晰,效果图也不明显,借此自己记录一番自己的实现方案,以备不时之需,同时也为广大学者可以直接通过拷贝方式完成项目所需. 2.效果图在开始代码之前,首先看看效果图,如下: 3.核心代码实现 3.1 DraggingButton 实现 public class DraggingButton e
Android RecycleView实现Item拖拽效果

基于公司产品的优化需求,其中一个需求涉及到RecycleView的拖拽,以及拖拽后item位置的持久化,目的是可以用户自定义界面偏好,并在用户下次进入本界面后,之前设置的偏好仍然有效.我写了一个小Demo用作演示效果. 先看效果(只看效果,不看颜值) 步骤1.建接口文件ItemTouchHelperViewHolder,该接口文件中描述的是选中和放开当前Item调用的方法. public interface ItemTouchHelperViewHolder { void onItemSelec
Qt利用QDrag实现拖拽拼图功能详解

目录一.项目介绍二.项目基本配置三.UI界面设置四.主程序实现 4.1 main.cpp 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件 4.3 PiecesList类 4.4 PuzzleWidget类五.效果演示一.项目介绍本文介绍利用QDrag类实现拖拽拼图功能.左边是打散的图,拖动到右边进行复现,此外程序还支持手动拖入原图片. 二.项目基本配置新建一个Qt案例,项目名称为“puzzle”,基类选择“QMainWindow”,取消选中创建
利用Vue3实现拖拽定制化首页功能

目录前期准备开始方法一方法二方案三最终实现结果总结前期准备 Vue3 Ts VueDragable (4版本以上) 期望拖拽组件组件可以按需加载导入开始首先呢,我们先看下VueDragable的文档效果文档的效果是这种基于列表的一个拖拽排序,那么回归到我们期望我们是想通过动态引入组件来进行拖拽排序,那么在完成拖拽定制化之前,首先要讲的是动态组件,在使用Vue2时候相信我们不陌生我们可以通过Component is来动态引入,如: <template> <div
Android ReboundScrollView仿IOS拖拽回弹效果

初衷: 其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个. 这里先说下思路吧,如果不愿意看的朋友可以直接跳过这一步,看下面的代码: Android 原生的ScrollView是不支持拉出屏幕外,并且也没有回弹效果的,用户友好度却不不太好,不知道为什么不那么设计. 我想做的事情正如上面所述: 1.希望能拉出屏幕外 2.松手后希望控件回弹我的思路是对ScrollView的子

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

目录

前言

实现逻辑

应用

总结

相关推荐

随机推荐