I am learning android Live wallpaper development. I found an awesome template in the AndEngine Forums
In this template I found an overridable method OnTab which provides 2 parameters i.e x coordintate & y coordinate .
protected void onTap(final int pX, final int pY)
{
SurfaceHolder holder= //Get current surface holder object
Paint paint = new Paint();
Canvas canvas= holder.lockCanvas();
paint.setColor(Color.WHITE);
canvas.drawCircle(20, 50, 25, paint);
}
I want to draw a circle when user tabs or touches the screen but i am finding it difficult to get the sufaceholder object which will let me draw a circle on the canvas Or can i achieve this some other way?
You need to do the drawing within the onDraw() method. When a touch is occurring you should save the X and Y location and then in the onDraw() method draw the circle.
Related
I have an Activity in which the user touches the eye positions on a picture, and this is supposed to draw a little white circle over each. I have a working bit of code that, using the Android FaceDetector tools, finds the eye positions and facial midpoint and draws a rectangle. The drawing part of that code, for reference, is this:
private void drawRectangles(){
Canvas canvas = new Canvas(mBitmap);
Paint paint = new Paint();
paint.setStrokeWidth(2);
paint.setColor(Color.BLUE);
paint.setStyle(Style.STROKE);
for (int i=0; i < faceFrames.length; i++) {
RectF r = faceFrames[i];
if (r != null){
canvas.drawRect(r, paint);
Log.d(TAG, "Drew rectangle");
}
}
mImageView.setImageResource(0);
mImageView.setImageBitmap(mBitmap);
mImageView.draw(canvas);
}
That part's fine. I figured, as a method that is called from onTouchEvent, that I could use the following to draw a circle:
private void makeDrawableLayer(int x, int y, int touchCount){
if (touchCount == 1){
Bitmap eyeOneBmp = Bitmap.createBitmap(mBitmap);
Canvas c1 = new Canvas(eyeOneBmp);
c1.drawCircle(x, y, 5, eyePaint);
mImageView.setImageResource(0);
mImageView.setImageBitmap(eyeOneBmp);
mImageView.draw(c1);
}
}
Here are screen shots showing the result of each code snippet. The first picture is the rectangle drawn on the face. The second picture shows the very strange result I get when I attempt to draw using the second code snippet. Note, however, that I had specified x and y as 10, 10 for the circle's position when drawing the second output. It's the same thing when I give it the passed-in eye position coordinates, just with the pixelated circle coming from wherever the eye is.
Does anyone have any idea what the heck is going on with this behavior?
Thanks so much.
So I found that you can basically only draw one time to the canvas before needing to make a class that extends View to start calling methods from. What I ended up needing to do was: customView.prepareCircle(), customView.invalidate(), and then parentView.addView(customView). And actually, I could only prepare, invalidate, and re-add the modified custom view to the canvas once before having to make any subsequent calls from a Runnable on the UI thread. I am not under the impression this is an ideal way to do it (certainly doesn't feel elegant), but it is giving me the results I want:
It is a difficult task to create an app for kids and i am given a task of creating an connect the dots app.
example
https://play.google.com/store/apps/details?id=zok.android.dots
i have done some tutorials of onTouchEvent.
i know how to paint on screen Draw in Canvas by finger, Android
i am getting the dot coordinates using this Android: How do I get the x y coordinates within an image / ImageView? example
but I really don't know how to achieve this target.
I'd really appreciate a solution to this! Thanks!
input image is http://imgur.com/Z24yQUx,t6nL71r
EDIT
#Override
protected void onDraw(Canvas canvas) {
//backgroundBitmap is the image i want to show in background
if(DISPLAY_ALPHABET==0)
{
canvas.drawBitmap(backgroundBitmap, 0f, 0f, null);
DISPLAY_ALPHABET=1;
}
show(canvas);
}
public void show(Canvas canvas)
{
Paint paint = new Paint();
int cnt=1;
canvas.drawPaint(paint);
//color of numbers
paint.setColor(Color.BLUE);
paint.setTextSize(16);
canvas.drawColor(BACKGROUND);
** canvas.drawBitmap(mBitmap, 0, 0, null);**
canvas.drawPath(mPath, mPaint);
mPaint.setColor(Color.BLACK);
//Drawing points on canvas
for (Point point : mPoints) {
canvas.drawPoint(point.x, point.y, mPaint);
canvas.drawText(""+cnt++, point.x-7, point.y-7, paint);
}
mPaint.setColor(Color.RED);
}
I don't have much idea about this but still felt like worth thinking
You can save the next dot coordinates in a arraylist or a vector.
when you are drawing the line using canvas, check whether the Motion-Event x and y coordinates matches to that of the next point in the vector.
Once a coordinate is touched search for the next one in the vector
You can use a counter to increase the vector position, once the dot touched increment the counter.
EDIT: Check out my Demo App in this Link and check what you might need.
I'm doing a Live Wallpaper. I have a Runnable (which is updated every 5 seconds) where I call a draw() method which draws something on a Canvas. It calls a method in another class which is supposed to draw a series of bitmaps (with a delay, so it's animated). How would I change the code below, so that the next bitmap would be drawn with a delay?
int imageToDraw = 10;
while(imageToDraw>=0)
{
Bitmap b = BitmapFactory.decodeResource(mContext.getResources(), mContext.getResources().getIdentifier("image_"+imageToDraw, "raw", mContext.getPackageName()));
float centerX = (width - b.getWidth())/2;
float centerY = (height - b.getHeight())/2;
Paint p = new Paint();
p.setColor(Color.BLACK);
mCanvas.drawRect(0f, 0f, (float)width, (float)height, p); //draws a rectangle to clear the screen
mCanvas.drawBitmap(b, centerX, centerY, new Paint());
--imageToDraw;
b.recycle();
}
From Android's API Guide on Canvas and Drawables:
Draw your graphics directly to a Canvas. This way, you personally call
the appropriate class's onDraw() method (passing it your Canvas), or
one of the Canvas draw...() methods (like drawPicture()). In doing so,
you are also in control of any animation.
This means you have to perform the animation yourself, frame by frame. If you don't actually need to draw complex graphics, consider switching back to standard views so you can use help class like AnimationDrawable. Check here for an example of how to do your own animation in Canvas.
I'm playing around with the FaceDetectionListener, my purpose is to draw a circle around the eyes. I have SurfaceView object named preview and a SurfaceHolder object named previewHolder.
Everything works quite well, I can detect who many faces which are represented in my SurfaceView using the backcamera. I also want to draw some circle around the left and right eye. My drawCanvas method looks like this:
private void drawCanvas(float x, float y) {
Canvas canvas = previewHolder.lockCanvas();
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);
paint.setDither(true);
paint.setColor(0xFFFFFF00);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(3);
canvas.drawPoint(x, y, paint);
previewHolder.unlockCanvasAndPost(canvas);
}
This method is called from the FaceDetectionListener:
#Override
public void onFaceDetection(Face[] faces, Camera camera) {
if (faces.length > 0) {
tv.setText(String.valueOf(faces.length) + " Face(s) Detected");
for(Face f : faces) {
int leftEyeXCoordinate = f.leftEye.x;
int leftEyeYCoordinate = f.leftEye.y;
drawCanvas(leftEyeXCoordinate, leftEyeYCoordinate);
int rightEyeXCoordinate = f.rightEye.x;
int rightEyeYCoordinate = f.rightEye.y;
drawCanvas(rightEyeXCoordinate, rightEyeYCoordinate);
}
}
else
tv.setText("No Faces Detected!");
}};
I keep getting an NullPointerException at the line int leftEyeXCoordinate = f.leftEye.x;
Can I draw points, rects and other stuff while the camera is moving around? Or do I have to capture the picture first?
So my question is: Have anybody accomplished this before and want to tell me how I could do so?
Thanks!
Yeah, I have seen this problem too. Face object that is returned is android.hardware.Camera.Face instead of FaceDetector.Face and only the rect object has valid info in there. The bounds of the rect objects are in camera coordinate system. You will have to convert them to Views coordinate system. Its explained at this link under rect.
I have to draw circle on canvas whose shape will be changing continuously as diameter length is changed. (Note, Diameter length is modified based on the intent data). Can we show smooth transition of same shape like from larger size to smaller size)
My current circle code looks like below, (This is inside onCreate)
bitmap = Bitmap.createBitmap((int) getWindowManager()
.getDefaultDisplay().getWidth(), (int) getWindowManager()
.getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
canvas = new Canvas(bitmap);
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
drawingImageView.setImageBitmap(bitmap);
// Draw Circle
canvas.drawCircle(50, 50, 20, paint); // circle example
I am using ImageView. How can I change the size of same circle dynamically. There is receiver like below
registerReceiver( )
onReceive(Context c,Intent i){
// Based on data , modify the drawn Circle
}
OnReceive would receive intent and based on data, we need to keep circle shape changing. When I put drawCircle code inside onReceive, it's not rendering the circle too.
Thanks in advance.
I would rather use a SurfaceView instead of an ImageView + Bitmap. A possible solution could look like this:
SurfaceHolder mHolder = mSurfaceView.getHolder();
Canvas canvas = mHolder.lockCanvas();
yourDrawCircleMethod(canvas);
canvas.unlockCanvasAndPost();
Note that you should also implement a SurfaceHolder.Callback to get notified about the SurfaceViews state.