欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义视图实现手指移动轨迹

程序员文章站 2023-08-15 22:32:14
今天看了大神写的关于贝塞尔曲线的博客,就写下了关于手指轨迹的一篇博客, 一、什么是贝塞尔曲线 贝塞尔曲线(bézier curve),又称贝兹曲线或贝济埃曲线,是应用于...

今天看了大神写的关于贝塞尔曲线的博客,就写下了关于手指轨迹的一篇博客,

一、什么是贝塞尔曲线

贝塞尔曲线(bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如photoshop等。

二、贝塞尔曲线公式

Android自定义视图实现手指移动轨迹

三、手指轨迹原理

因为这个我们用的是自定义控件,所以我们创建一个finger的类集成view,重写ondraw  ontouchevent这个两个方法

public finger(context context, @nullable attributeset attrs)需要这个构造方法

Android自定义视图实现手指移动轨迹

其实手指轨迹的原理也很简单,就是通过ontouchevent来获取道手指的位置,来绘制path路径即可。

四、分析代码

这里我先写出全部的代码,后面我再来一一分析代码的作用:

全部代码:

package com.campus.shopping.drawtext;
 
import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.path;
import android.support.annotation.nullable;
import android.util.attributeset;
import android.view.motionevent;
import android.view.view;
 
/**
 * created by sang on 2018/6/24.
 */
 
public class myview extends view {
 
 private path mpath = new path();
 private float mprex,mprey;
 
 public myview(context context, @nullable attributeset attrs) {
  super(context, attrs);
 }
 
 @override
 public boolean ontouchevent(motionevent event) {
  switch (event.getaction()) {
   case motionevent.action_down: {
    mpath.moveto(event.getx(), event.gety());
    mprex = event.getx();
    mprey = event.gety();
    return true;
   }
   case motionevent.action_move:
    float endx = (mprex+event.getx())/2;
    float endy = (mprey+event.gety())/2;
    mpath.quadto(mprex,mprey,endx,endy);
    mprex = event.getx();
    mprey = event.gety();
    invalidate();
    break;
   default:
    break;
  }
  return super.ontouchevent(event);
 }
 
 public void reset(){
  mpath.reset();
  invalidate();
 }
 
 @override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  paint paint = new paint();
  paint.setcolor(color.white);
  paint.setstyle(paint.style.stroke);
 
  canvas.drawpath(mpath, paint);
 }
}

ontouchevent方法:

public boolean ontouchevent(motionevent event) {
  switch (event.getaction()) {
   case motionevent.action_down: {
    mpath.moveto(event.getx(), event.gety());
    mprex = event.getx();
    mprey = event.gety();
    return true;
   }
   case motionevent.action_move:
    float endx = (mprex+event.getx())/2;
    float endy = (mprey+event.gety())/2;
    mpath.quadto(mprex,mprey,endx,endy);
    mprex = event.getx();
    mprey = event.gety();
    invalidate();
    break;
   default:
    break;
  }
  return super.ontouchevent(event);
 }

当手指按下触发了action_down时,这里我通过moveto的方法绘制了第一个点,这个必须使用moveto,因为如果不使用这个这个点将会在(0,0)开始,最后我们回去到xy点作为控制点,最后使用返回 真的方式让action_move,action_up事件往这个控件继续传递事件。

Android自定义视图实现手指移动轨迹

再来看当触发action_move时,因为贝塞尔曲线是由线段构成的,结束点时在线段的中间的位置,所以这里的计算方法是(起点+最后的点)/2就可以得到中间的点.

使用方式:

<com.campus.shopping.drawtext.finger
 android:id="@+id/viewmy"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" />

Android自定义视图实现手指移动轨迹

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。