Android-用户用手指画线 [英] Android - User paints lines with their finger

问题描述

我想在Android上构建一个工具，使用户可以在图片上绘制一些简单的对象(例如，线，圆或箭头).我首先开始尝试线条部分，的确可以在绘画上取得成功.逻辑是用户在某一点上轻击，然后拖动其手指以绘制线条.我使用的是这样的类(它基于 DonGru在这里的答案 ):

I want to build a tool on Android where the user can paint some simple objects over a picture (eg line, circle or arrow). I started trying the line part first, and indeed I could succeed on painting it. The logic is that the user taps at one point and then drags their finger, painting the line. I use a class like this (it is based on DonGru's answer here):

public class DrawView extends View {
    Paint paint = new Paint();
    float Sx, Sy, Lx, Ly;

    public DrawView(Context context, float x1, float y1, float x2, float y2) {
        super(context);

        paint.setColor(Color.RED);
        Sx=x1;
        Sy=y1;
        Lx=x2;
        Ly=y2;   
    }

    @Override
    public void onDraw(Canvas canvas) {
            canvas.drawLine(Sx, Sy, Lx, Ly, paint);
    }
}

在活动代码中，我像这样使用onTouch侦听器:

From the activity code I use the onTouch listener like this:

@Override
public boolean onTouch(View view, MotionEvent event) { 
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            Sx1 = event.getX();
            Sy1 = event.getY();
            return true;

        case MotionEvent.ACTION_MOVE:
            Cx1 = event.getX();
            Cy1 = event.getY();
            drawLine();
            return true;

        case MotionEvent.ACTION_UP:
            Lx1 = event.getX();
            Ly1 = event.getY();
            return true;
        }
    return false;
}

public void drawLine(){

    setContentView(R.layout.show);
    ImageView myImage = (ImageView) findViewById(R.id.lastphoto);
    myImage.setImageBitmap(rotatedPic);

    dv=new DrawView(this, Sx1, Sy1, Cx1, Cy1);

    addContentView(dv, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
            ViewGroup.LayoutParams.FILL_PARENT));

    RelativeLayout mRelativeLayout = (RelativeLayout) findViewById(R.id.linear);
    mRelativeLayout.setOnTouchListener((OnTouchListener) this);
    mRelativeLayout.addView(new Drawer(this));   
}

在每一步中，我都会重新创建整个视图，因此从起点到终点只有一条线是可见的.我首先担心的是，我不知道此实现是否正确.另外，我希望这些行在创建后作为对象处理.用户应该能够移动它们，旋转它们，删除等等.我认为我可以通过将每条线的边缘坐标保存在类似缓冲区的方式来做到这一点，如果用户点击得非常靠近一个边缘，我可以处理该手势.但这一切听起来太复杂了，我不知道这是否不稳定.

On every move I recreate the whole view, so that only one line from the starting to ending point is visible. My first concern is that I do not know if this implementation is correct. Also, I want these lines to be handled as objects after created. The user should be able to move them, rotate them, delete etc. I think that I can do this by holding the coordinates of the edges of each line in something like a buffer, and if the user taps very close to one edge I can handle that gesture. But all of this sounds too complex and I do not know if this is unstable.

我应该使用一些不同的方法来实现我完全不喜欢的东西吗?

Is there some different method that I should use to implement something like this that I am totally missing?

推荐答案

在我看来，存储绘制的线条并允许用户对其进行操作只是相当复杂.

To store the lines drawn, and enable the user to manipulate them, is only moderately complex, in my opinion.

创建Line类.包括开始和结束坐标，颜色等作为类的字段以及要删除，移动等的方法.还添加一个带有MotionEvent参数的方法.在此方法中，您可以使用MotionEvent确定是否已触摸此行，并根据需要调整其位置.

Create a Line class. Include the start and end co-ordinates, colour etc as fields of the class and methods to delete, move etc. Also add a method which takes a MotionEvent argument. In this method, you use the MotionEvent to determine if this line has been touched and adjust it's position as you need.

在扩展View类的集合或某种列表中存储对绘制的每条线(作为Line类的实例创建)的引用，ArrayList应该这样做.然后，在onTouch事件中，调用每行的触摸检测方法，并将MotionEvent传递给这些方法.

Store references to each line drawn (created as an instance of the Line class) in a collection or list of some sort in your extended View class, ArrayList should do. Then, in the onTouch event, call the touch detect method of each line and pass the MotionEvent to the methods.

最后，通过迭代对Line实例的引用的集合，重写View的onDraw回调以绘制每条线.

Finally, override the onDraw callback of the View to draw each line by iterating through the collection of references to the Line instances.

您还可以添加更多手势，例如长按以进行删除等.这是这种方法的一个(完全未经测试的，是从内存写入的)骨架.

You could also add more gesture such as long press for delete etc. Here's a (totally untested, written from memory) skeleton of such an approach.

class Line

    public float x1, x2, y1, y2;

    public void detectTouch(MotionEvent motionEvent){

         // code to detect a touch and adjust the x and ys accordingly

    }

class DrawView extends View{

    private ArrayList<Line> lines = new ArrayList<Lines>();

    ....
    ....

@Override
public void onDraw(Canvas canvas) {

    super.onDraw();

    for (Line line : lines){
         canvas.drawLine(line.x1,line.y1,line.x2,line.y2);
    }
}

@Override
public boolean onTouch(View view, MotionEvent event) {

    ....
    ....

    for (Line line : lines){
        line.detectTouch(MotionEvent);
    }


}

玩得开心！

这篇关于Android-用户用手指画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！