【问题标题】:Android How to draw a smooth line following your fingerAndroid 如何沿着手指画一条平滑线
【发布时间】:2011-11-27 18:31:30
【问题描述】:

http://marakana.com/tutorials/android/2d-graphics-example.html

我在下面使用这个例子。但是当我在屏幕上移动手指太快时,线条会变成单个点。

我不确定是否可以加快绘图速度。或者我应该用一条直线连接最后两个点。这两种解决方案中的第二种似乎是一个不错的选择,除非当您的手指快速移动时,您会看到较长的直线段,然后是陡峭的曲线。

如果有任何其他解决方案,很高兴听到它们。

提前感谢您的帮助。

【问题讨论】:

标签: java android touch interpolation curve-fitting


【解决方案1】:

正如您所提到的,一个简单的解决方案是简单地用直线连接点。这是执行此操作的代码:

public void onDraw(Canvas canvas) {
    Path path = new Path();
    boolean first = true;
    for(Point point : points){
        if(first){
            first = false;
            path.moveTo(point.x, point.y);
        }
        else{
            path.lineTo(point.x, point.y);
        }
    }
    canvas.drawPath(path, paint);
}

确保将绘画从填充更改为描边:

paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setColor(Color.WHITE);

另一种选择是使用 quadTo 方法通过迭代连接点:

public void onDraw(Canvas canvas) {
    Path path = new Path();
    boolean first = true;
    for(int i = 0; i < points.size(); i += 2){
        Point point = points.get(i);
        if(first){
            first = false;
            path.moveTo(point.x, point.y);
        }

        else if(i < points.size() - 1){
            Point next = points.get(i + 1);
            path.quadTo(point.x, point.y, next.x, next.y);
        }
        else{
            path.lineTo(point.x, point.y);
        }
    }

    canvas.drawPath(path, paint);
}

这仍然会产生一些尖锐的边缘。

如果你真的有野心,你可以开始计算三次样条如下:

public void onDraw(Canvas canvas) {
    Path path = new Path();

    if(points.size() > 1){
        for(int i = points.size() - 2; i < points.size(); i++){
            if(i >= 0){
                Point point = points.get(i);

                if(i == 0){
                    Point next = points.get(i + 1);
                    point.dx = ((next.x - point.x) / 3);
                    point.dy = ((next.y - point.y) / 3);
                }
                else if(i == points.size() - 1){
                    Point prev = points.get(i - 1);
                    point.dx = ((point.x - prev.x) / 3);
                    point.dy = ((point.y - prev.y) / 3);
                }
                else{
                    Point next = points.get(i + 1);
                    Point prev = points.get(i - 1);
                    point.dx = ((next.x - prev.x) / 3);
                    point.dy = ((next.y - prev.y) / 3);
                }
            }
        }
    }

    boolean first = true;
    for(int i = 0; i < points.size(); i++){
        Point point = points.get(i);
        if(first){
            first = false;
            path.moveTo(point.x, point.y);
        }
        else{
            Point prev = points.get(i - 1);
            path.cubicTo(prev.x + prev.dx, prev.y + prev.dy, point.x - point.dx, point.y - point.dy, point.x, point.y);
        }
    }
    canvas.drawPath(path, paint);
}

另外,我发现您需要更改以下内容以避免重复的运动事件:

public boolean onTouch(View view, MotionEvent event) {
    if(event.getAction() != MotionEvent.ACTION_UP){
        Point point = new Point();
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        Log.d(TAG, "point: " + point);
        return true;
    }
    return super.onTouchEvent(event);
}

并将 dx 和 dy 值添加到 Point 类:

class Point {
    float x, y;
    float dx, dy;

    @Override
    public String toString() {
        return x + ", " + y;
    }
}

这会产生平滑的线条,但有时必须使用循环连接点。 此外,对于长时间的绘图会话,这将变得计算密集。

希望对您有所帮助...有趣的东西。

编辑

我整理了一个快速项目来演示这些不同的技术,包括 Square 建议的签名实现。欣赏:https://github.com/johncarl81/androiddraw

【讨论】:

  • 这是一篇关于这个主题的有趣文章。好像android批处理触摸事件:corner.squareup.com/2010/07/smooth-signatures.html
  • 第一个循环cubicTo() 示例似乎是错误的。它应该遍历所有点,而不仅仅是最后一个。
  • Eric Obermühlner:我正在围绕cubicTo()调用循环遍历for循环中的所有点。
  • @johncarl 我同意埃里克的观点。我认为曲线代码是错误的——第一个循环只会平滑最后几个点。我建议第一个循环从 0 开始运行,而不是从“points.size() - 2”开始。 (这是基于我实际上将此代码复制到我的图形应用程序中并对其进行测试的事实)
  • Android 已经内置了与此相同的功能,但功能更多,w/c 你可以参考here。只需使用johncarl的第一个例子,就可以实现平滑的边缘线条。
【解决方案2】:

这对你来说可能不再重要,但我费了很大力气才解决它,我想分享一下,可能对其他人有用。

@johncarl 提供的解决方案教程非常适合绘图,但它们为我的目的提供了限制。如果您将手指从屏幕上移开并放回原处,此解决方案将在最后一次单击和新单击之间画一条线,从而使整个绘图始终保持连接。所以我试图找到一个解决方案,最后我得到了它!(对不起,如果听起来很明显,我是一个图形初学者)

public class MainActivity extends Activity {
    DrawView drawView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set full screen view
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                     WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        drawView = new DrawView(this);
        setContentView(drawView);
        drawView.requestFocus();
    }
}


public class DrawingPanel extends View implements OnTouchListener {
    private static final String TAG = "DrawView";

    private static final float MINP = 0.25f;
    private static final float MAXP = 0.75f;

    private Canvas  mCanvas;
    private Path    mPath;
    private Paint       mPaint;   
    private LinkedList<Path> paths = new LinkedList<Path>();

    public DrawingPanel(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(6);
        mCanvas = new Canvas();
        mPath = new Path();
        paths.add(mPath);
    }               

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {            
        for (Path p : paths){
            canvas.drawPath(p, mPaint);
        }
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
            mX = x;
            mY = y;
        }
    }

    private void touch_up() {
        mPath.lineTo(mX, mY);
        // commit the path to our offscreen
        mCanvas.drawPath(mPath, mPaint);
        // kill this so we don't double draw            
        mPath = new Path();
        paths.add(mPath);
    }

    @Override
    public boolean onTouch(View arg0, MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touch_start(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                break;
        }
        return true;
    } 
}  

我用你的手指取了用于绘图的 android 示例,并对其进行了一些修改以存储每条路径,而不仅仅是最后一条!希望它可以帮助某人!

干杯。

【讨论】:

  • 嘿...请尝试在某个地方清除列表,否则随着您一次绘制越来越多,它会逐渐变慢..
  • 对于不长时间运行它的应用程序(例如我所做的)来说,这不是问题,对于我的实现来说,它的运行时间永远不会超过 1 分钟左右。但是感谢您指出这个问题!
  • 嘿。通过存储绘制路径,很容易实现“撤消”或“重做”功能。但是如果我们不将绘图存入位图中,如何实现擦除功能呢?
  • 我不认为你可以。如果不存储怎么知道要删除哪一个呢?
  • 只是好奇,mCanvas 是干什么用的?您在 touch_up() 中提到了“将路径提交到我们的屏幕外”,但看起来 mCanvas 从未在其他任何地方使用过。
【解决方案3】:

我已经尝试了几种方法来渲染运动事件的累积点。 最后,通过计算两点之间的中点并将列表中的点视为二次贝塞尔曲线的锚点,我得到了最好的结果(除了第一个和最后一个点,它们通过简单的线连接到下一个中​​点)。

这给出了一条没有任何拐角的平滑曲线。绘制的路径不会触及列表中的实际点,而是穿过每个中点。

Path path = new Path();
if (points.size() > 1) {
    Point prevPoint = null;
    for (int i = 0; i < points.size(); i++) {
        Point point = points.get(i);

        if (i == 0) {
            path.moveTo(point.x, point.y);
        } else {
            float midX = (prevPoint.x + point.x) / 2;
            float midY = (prevPoint.y + point.y) / 2;

            if (i == 1) {
                path.lineTo(midX, midY);
            } else {
                path.quadTo(prevPoint.x, prevPoint.y, midX, midY);
            }
        }
        prevPoint = point;
    }
    path.lineTo(prevPoint.x, prevPoint.y);
}

【讨论】:

  • 谢谢。它完全符合我的预期。
  • 谢谢你,这就是我搜索的内容!
  • 我不得不拔出 path.lineTo(prevPoint.x, prevPoint.y); for 循环外的语句以获得干净流畅的线条。你能解释一下为什么会出现吗?
  • 末尾的 path.lineTo(prevPoint.x, prevPoint.y) 将最后一个中间点连接到最后一个点。它已经在循环之外,不应妨碍线条流畅。
【解决方案4】:

如果你想要简单:

public class DrawByFingerCanvas extends View {

    private Paint brush = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Path path = new Path();

    public DrawByFingerCanvas(Context context) {
        super(context);
        brush.setStyle(Paint.Style.STROKE);
        brush.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas c) {
        c.drawPath(path, brush);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x,y);
                break;
            case MotionEvent.ACTION_MOVE:
                path.lineTo(x, y);
                break;
            default:
                return false;
        }
        invalidate();
        return true;
    }
}

在活动中:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new DrawByFingerCanvas(this));
}

结果:

要擦除所有绘图,只需旋转屏幕即可。

【讨论】:

  • 这应该是公认的答案——用最简单的代码实现了 OP 的要求
  • 谢谢。请告诉我如何添加一个大加号来显示光标所在的位置?
【解决方案5】:

我有非常相似的问题。当你调用onTouch方法时,你也应该使用方法(在onTouch(MotionEvent event)里面)

event.getHistorySize();

和 类似的东西

int histPointsAmount = event.getHistorySize(); 
for(int i = 0; i < histPointsAmount; i++){
    // get points from event.getHistoricalX(i);
    // event.getHistoricalY(i); and use them for your purpouse
}

【讨论】:

  • 对此一无所知...很想知道事件中有多少历史数据。
【解决方案6】:

ACTION_MOVE 的运动事件可以将多个运动样本批处理到一个对象中。使用 getX(int) 和 getY(int) 可获得最新的指针坐标。使用getHistoricalX(int, int)getHistoricalY(int, int) 访问批次中较早的坐标。使用它们来构建路径会更顺畅:

    int historySize = event.getHistorySize();
    for (int i = 0; i < historySize; i++) {
      float historicalX = event.getHistoricalX(i);
      float historicalY = event.getHistoricalY(i);
      path.lineTo(historicalX, historicalY);
    }

    // After replaying history, connect the line to the touch point.
    path.lineTo(eventX, eventY);

这是 Square 的一个很好的教程:http://corner.squareup.com/2010/07/smooth-signatures.html

【讨论】:

  • 我遇到了曲线绘制不正确的问题。这个解决方案解决了我的问题。谢谢!
【解决方案7】:

我最近不得不对此进行一些修改,现在已经开发出我认为最好的解决方案,因为它做了三件事:

  1. 它允许您绘制不同的线条
  2. 它适用于较大的笔触,无需使用复杂的三次样条线
  3. 它比这里的很多解决方案都快,因为canvas.drawPath() 方法是 for 循环之外,所以它不会被多次调用。

public class DrawView extends View implements OnTouchListener {
private static final String TAG = "DrawView";

List<Point> points = new ArrayList<Point>();
Paint paint = new Paint();
List<Integer> newLine = new ArrayList<Integer>();

public DrawView(Context context, AttributeSet attrs){
        super(context, attrs);
        setFocusable(true);
        setFocusableInTouchMode(true);
        setClickable(true);

        this.setOnTouchListener(this);

        paint.setColor(Color.WHITE);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20);

    }

    public void setColor(int color){
        paint.setColor(color);
    }
    public void setBrushSize(int size){
        paint.setStrokeWidth((float)size);
    }
    public DrawView(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);


        paint.setColor(Color.BLUE);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20);
    }

    @Override
    public void onDraw(Canvas canvas) {
        Path path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        for (int i = 0; i<points.size(); i++) {
            Point newPoint = new Point();
            if (newLine.contains(i)||i==0){
                newPoint = points.get(i)
                path.moveTo(newPoint.x, newPoint.y);
            } else {
                newPoint = points.get(i);

                path.lineTo(newPoint.x, newPoint.y);
            }

        }
        canvas.drawPath(path, paint);
    }

    public boolean onTouch(View view, MotionEvent event) {
        Point point = new Point();
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        Log.d(TAG, "point: " + point);
        if(event.getAction() == MotionEvent.ACTION_UP){
            // return super.onTouchEvent(event);
            newLine.add(points.size());
        }
        return true;
    }
    }

    class Point {
        float x, y;

    @Override
    public String toString() {
        return x + ", " + y;
    }
    }

这也有效,只是不太好

  import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.util.*;

public class DrawView extends View implements OnTouchListener {
    private static final String TAG = "DrawView";
List<Point> points = new ArrayList<Point>();
Paint paint = new Paint();
List<Integer> newLine = new ArrayList<Integer>();

public DrawView(Context context, AttributeSet attrs){
    super(context, attrs);
    setFocusable(true);
    setFocusableInTouchMode(true);

    this.setOnTouchListener(this);

    paint.setColor(Color.WHITE);
    paint.setAntiAlias(true);
}
public DrawView(Context context) {
    super(context);
    setFocusable(true);
    setFocusableInTouchMode(true);

    this.setOnTouchListener(this);

    paint.setColor(Color.WHITE);
    paint.setAntiAlias(true);
    }

@Override
public void onDraw(Canvas canvas) {
    for (int i = 0; i<points.size(); i++) {
        Point newPoint = new Point();
        Point oldPoint = new Point();
        if (newLine.contains(i)||i==0){
            newPoint = points.get(i);
            oldPoint = newPoint;
        } else {
            newPoint = points.get(i);
            oldPoint = points.get(i-1);
        }
            canvas.drawLine(oldPoint.x, oldPoint.y, newPoint.x, newPoint.y, paint);
    }
}

public boolean onTouch(View view, MotionEvent event) {
    Point point = new Point();
    point.x = event.getX();
    point.y = event.getY();
    points.add(point);
    invalidate();
    Log.d(TAG, "point: " + point);
    if(event.getAction() == MotionEvent.ACTION_UP){
        // return super.onTouchEvent(event);
        newLine.add(points.size());
    }
    return true;
    }
}

class Point {
    float x, y;

    @Override
    public String toString() {
        return x + ", " + y;
    }
}

它可以让你画线相当好,唯一的问题是如果你把线加粗,这会让画出来的线看起来有点奇怪,真的,我还是推荐使用第一个。

【讨论】:

    【解决方案8】:

    您的MotionEvent 中提供的信息可能比您意识到的要多得多。

    链接中的示例忽略了事件中包含的历史接触点。请参阅MotionEvent 文档顶部附近的“批处理”部分:http://developer.android.com/reference/android/view/MotionEvent.html 除此之外,用线连接点可能不是一个坏主意。

    【讨论】:

      【解决方案9】:

      我遇到了这个问题,我画的是点而不是线。您应该首先创建一条路径来保持您的线路。仅在您的第一个触摸事件上调用 path.moveto。然后在画布上绘制路径,然后在完成后重置或倒回路径(path.reset)...

      【讨论】:

        【解决方案10】:

        这里有一个简单的方法来平滑用Path绘制的点。lineTo

        fun applySmoothing(smoothingIterations: Int) {
            for (z in 1..smoothingIterations) {
                for (i in graphPoints.indices) {
                    if (i > 0 && i < graphPoints.size-1) {
                        val previousPoint = graphPoints[i-1]
                        val currentPoint = graphPoints[i]
                        val nextPoint = graphPoints[i+1]
                        val midX = (previousPoint.x + currentPoint.x + nextPoint.x) / 3
                        val midY = (previousPoint.y + currentPoint.y + nextPoint.y) / 3
                        graphPoints[i].x = midX
                        graphPoints[i].y = midY
                    }
                }
            }
        }
        

        【讨论】:

          【解决方案11】:

          这是一个简化的解决方案,它会沿着您的手指绘制一条直线,并且始终是直的:

          https://stackoverflow.com/a/68076519/15463816

          【讨论】:

          • 请为提问者发布最小示例。
          猜你喜欢
          • 2013-09-04
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-09-20
          • 1970-01-01
          • 2011-05-17
          • 1970-01-01
          相关资源
          最近更新 更多