Android 如何跟随手指画一条平滑的线 [英] Android How to draw a smooth line following your finger

查看:35
本文介绍了Android 如何跟随手指画一条平滑的线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

I am using this example below. But when I move my fingers too fast across the screen the line turns to individual dots.

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

I am not sure whether I can speed up the drawing. Or I should connect the two last points with a straight line. The second of these two solutions seems like a good option, except when moving your finger very fast you will have long sections of a straight line then sharp curves.

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

If there are any other solutions it would be great to hear them.

提前感谢您的帮助.

推荐答案

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

An easy solution, as you mentioned, is to simply connect the points with a straight line. Here's the code to do so:

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);
}

确保您将油漆从填充更改为笔触:

make sure you change your paint from fill to stroke:

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

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

Another option is to connect the points with iterpolation using the quadTo method:

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);
}

这仍然会导致一些尖锐的边缘.

This still results in some sharp edges.

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

If you're really ambitious, you can start to calculate the cubic splines as follows:

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);
}

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

Also, I found that you needed to change the following to avoid duplicate motion events:

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 &Point 类的 dy 值:

and add the dx & dy values to the Point class:

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

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

这会产生平滑的线条,但有时必须使用循环连接点.此外,对于长时间的绘图会话,这需要大量计算.

This produces smooth lines, but sometimes has to connect the dots using a loop. Also, for long drawing sessions, this becomes computationally intensive to calculate.

希望能帮到你……玩一些有趣的东西.

Hope that helps... fun stuff to play around with.

编辑

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

I threw together a quick project demonstrating these different techniques, including Square's suggessted signature implementation. Enjoy: https://github.com/johncarl81/androiddraw

这篇关于Android 如何跟随手指画一条平滑的线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆