How to draw onto an ImageView Bitmap with finger and obtain coordinates and save the drawn image

问题

Basically i have a grid(stored as an image) like so:

What I need to do is draw on this grid with my finger(multiple strokes) and display and save this new bitmap.

Additionally, while drawing I need to obtain the coordinates of the stroke so I can calculate some data from it(The whole grid is divided into zones ).

The coordinate part was simple, which I did using Rect(), getX() and getY() viz.

int getZoneLocation(int x, int y)
    {

        Rect rectangle = new Rect();

        amslerView.getGlobalVisibleRect(rectangle);

        String coords = "Left:%d Top:%d Right:%d Bottom:%d ActionBarHeight:%d StatusBarHeight:%d";

        // Zone 1 Rectangle

        Log.i("Rectangle Coordinates",
                String.format(coords, rectangle.left, rectangle.top, rectangle.right, rectangle.bottom, getActionBarHeight(), getStatusBarSize()));

        Rect outerMostRect = new Rect(rectangle);

        int xOffset = rectangle.width() / 10;
        int yOffset = rectangle.height() / 10;

        Log.i("Rectangle Attribs", "Width: " + xOffset + "Height: " + yOffset);

        // Zone 2 Rectangle

        Rect zone2Rectangle = new Rect(outerMostRect.left + xOffset, outerMostRect.top + yOffset, outerMostRect.right - xOffset, outerMostRect.bottom
                - yOffset);

        Log.i("Zone 2 Coordinates", "" + zone2Rectangle.left + " " + zone2Rectangle.top + " " + zone2Rectangle.right + " " + zone2Rectangle.bottom);

        // Zone 3 Rectangle

        Rect zone3Rectangle = new Rect(zone2Rectangle.left + xOffset, zone2Rectangle.top + yOffset, zone2Rectangle.right - xOffset,
                zone2Rectangle.bottom - yOffset);

        // Zone 4 Rectangle

        Rect zone4Rectangle = new Rect(zone3Rectangle.left + xOffset, zone3Rectangle.top + yOffset, zone3Rectangle.right - xOffset,
                zone3Rectangle.bottom - yOffset);

        // Zone 5 Rectangle
        Rect zone5Rectangle = new Rect(zone4Rectangle.left + xOffset, zone4Rectangle.top + yOffset, zone4Rectangle.right - xOffset,
                zone4Rectangle.bottom - yOffset);

        // Check from inside out for point existence
        if (zone5Rectangle.contains(x, y))
        {
            return 5;
        } else if (zone4Rectangle.contains(x, y))
        {
            return 4;
        } else if (zone3Rectangle.contains(x, y))
        {
            return 3;
        } else if (zone2Rectangle.contains(x, y))
        {
            return 2;
        } else if (outerMostRect.contains(x, y))
        {
            return 1;
        }
        return -1;
    }

Basically what I did was obtain the localVisibleRect from the ImageView that displays this grid and then simply call this method to obtain the data I need inside to onTouchListener.

Now the real dilemma for me is how to implement the finger drawing along with this, and what exactly to use to implement this.

So far I've looked at SurfaceView, Canvas and even GestureOverlayView(which is stupid I know).

I've also taken a look at the FingerPaint demo from the api examples, but that draws onto an empty view and I honestly have no idea on how to implement this with an ImageView.

Any suggestions would be invaluable.

回答1:

you can use this class:

import android.view.View.OnTouchListener;

public class XCanvas extends ImageView implements OnTouchListener
{               
    private Activity context = null;
    private Paint paint = null;        

    public XCanvas(Activity context)
    {
        super(context); 
        this.context = context;

        this.paint = new Paint();       

        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);     

        paint.setAntiAlias(true);       
    }   

    @Override
    protected void onDraw(Canvas g) 
    {                               
        super.onDraw(g);    

        //Set background        
        this.paint.setColor(Color.rgb(0xff, 0xff, 0xff));       
        g.drawRect(0, 0, this.getWidth(), this.getHeight(), this.paint);

        //Paint everything here!
    }             

    @Override
    public boolean onTouch(View v, MotionEvent event) 
    {
        int action = event.getAction() & MotionEvent.ACTION_MASK;

        switch (action) 
        {
            case MotionEvent.ACTION_DOWN:
            {
                this.pointerPressed(event);
                break;
            }
            case MotionEvent.ACTION_MOVE:
            {
                this.pointerDragged(event);         
                break;  
            }
            case MotionEvent.ACTION_UP:
            {
                this.pointerReleased();
                break;
            }                   
        }

        return true;
    }        

    protected void pointerPressed(MotionEvent event)
    {
        //you can save touch point here!
    }

    protected void pointerDragged(MotionEvent event)
    {
        //for get x ==>  eveevent.getX()
        //for get y ==>  eveevent.getY()        

        this.repaint();
    }

    protected void pointerReleased()
    {

    }    

    public void repaint() 
    {       
        this.invalidate();
    }           
}

and for use class paste this code in main activity:

    private XCanvas xCanvas = null;

@Override
public void onCreate(Bundle savedInstanceState) 
{       
    super.onCreate(savedInstanceState);                                                     

    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                                       WindowManager.LayoutParams.FLAG_FULLSCREEN);
    requestWindowFeature(Window.FEATURE_NO_TITLE);      

    //getWindow().setBackgroundDrawableResource(R.color.MapBackground);

    this.xCanvas = new XCanvas(this);                               
    this.xCanvas.repaint();

    setContentView(this.xCanvas);
    this.xCanvas.requestFocus();
}

来源：https://stackoverflow.com/questions/19475332/how-to-draw-onto-an-imageview-bitmap-with-finger-and-obtain-coordinates-and-save