Created
July 24, 2013 09:56
-
-
Save ErikHellman/6069322 to your computer and use it in GitHub Desktop.
A very simple example of using multi-touch on Android to build a custom View for finger painting. This example uses the Path class from the android.graphics package. Feel free to use this code as you wish for your own multi-touch apps.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class PaintView extends View { | |
public static final int MAX_FINGERS = 5; | |
private Path[] mFingerPaths = new Path[MAX_FINGERS]; | |
private Paint mFingerPaint; | |
private ArrayList<Path> mCompletedPaths; | |
private RectF mPathBounds = new RectF(); | |
public PaintView(Context context) { | |
super(context); | |
} | |
public PaintView(Context context, AttributeSet attrs) { | |
super(context, attrs); | |
} | |
public PaintView(Context context, AttributeSet attrs, int defStyle) { | |
super(context, attrs, defStyle); | |
} | |
@Override | |
protected void onAttachedToWindow() { | |
super.onAttachedToWindow(); | |
mCompletedPaths = new ArrayList<Path>(); | |
mFingerPaint = new Paint(); | |
mFingerPaint.setAntiAlias(true); | |
mFingerPaint.setColor(Color.BLACK); | |
mFingerPaint.setStyle(Paint.Style.STROKE); | |
mFingerPaint.setStrokeWidth(6); | |
mFingerPaint.setStrokeCap(Paint.Cap.BUTT); | |
} | |
@Override | |
protected void onDraw(Canvas canvas) { | |
super.onDraw(canvas); | |
for (Path completedPath : mCompletedPaths) { | |
canvas.drawPath(completedPath, mFingerPaint); | |
} | |
for (Path fingerPath : mFingerPaths) { | |
if (fingerPath != null) { | |
canvas.drawPath(fingerPath, mFingerPaint); | |
} | |
} | |
} | |
@Override | |
public boolean onTouchEvent(MotionEvent event) { | |
int pointerCount = event.getPointerCount(); | |
int cappedPointerCount = pointerCount > MAX_FINGERS ? MAX_FINGERS : pointerCount; | |
int actionIndex = event.getActionIndex(); | |
int action = event.getActionMasked(); | |
int id = event.getPointerId(actionIndex); | |
if ((action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_POINTER_DOWN) && id < MAX_FINGERS) { | |
mFingerPaths[id] = new Path(); | |
mFingerPaths[id].moveTo(event.getX(actionIndex), event.getY(actionIndex)); | |
} else if ((action == MotionEvent.ACTION_POINTER_UP || action == MotionEvent.ACTION_UP) && id < MAX_FINGERS) { | |
mFingerPaths[id].setLastPoint(event.getX(actionIndex), event.getY(actionIndex)); | |
mCompletedPaths.add(mFingerPaths[id]); | |
mFingerPaths[id].computeBounds(mPathBounds, true); | |
invalidate((int) mPathBounds.left, (int) mPathBounds.top, | |
(int) mPathBounds.right, (int) mPathBounds.bottom); | |
mFingerPaths[id] = null; | |
} | |
for(int i = 0; i < cappedPointerCount; i++) { | |
if(mFingerPaths[i] != null) { | |
int index = event.findPointerIndex(i); | |
mFingerPaths[i].lineTo(event.getX(index), event.getY(index)); | |
mFingerPaths[i].computeBounds(mPathBounds, true); | |
invalidate((int) mPathBounds.left, (int) mPathBounds.top, | |
(int) mPathBounds.right, (int) mPathBounds.bottom); | |
} | |
} | |
return true; | |
} | |
} |
If i want to draw a circle graphic by using canvas.drawCircle
how can I do
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You are correct.
initGrid
is supposed to be called inside ofonCreate
, like you wrote. If you want to empty the grid (to start the game again), you can callinitGrid
again.setGridTile
can then be called in youronTouchEvent
-method, where you pass the ID of the finger (or color) and the position.