I'm struggling with something I would expect to be straight forward with libgdx.
In short this is a "finger paint" app where I want to draw a path of a certain width where the user touches the screen.
I've earlier done this by using a plain Android android.view.View. I had a android.graphics.Path in which I stored the coordinates of the user's current touch. In the onDraw() method of the view I drew the path to the android.graphics.Canvas. Whenever the user released a finger I drew the path to an offline canvas/android.graphics.Bitmap which also was drawn in the onDraw() method. Plain and simple.
How can that be done using libgdx?
I have tried using a com.badlogic.gdx.graphics.Pixmap that I can draw a line to whenever the user moves a finger. This works well except the fact that I'm unable to control the witdh of the line using Gdx.gl.glLineWidth(). I know I can draw a rectangle instead of a line to set the width, but Pixmap doesn't seem to have any means of rotating, so I don't see how this can be done.
I can use a com.badlogic.gdx.graphics.glutils.ShapeRenderer for drawing lines (or rectangles) in com.badlogic.gdx.Screen.render(). As far as I can see I then need to store every single touch point of the current touch, and then draw all lines on render. Whenever the user relases a finger I guess I can store the screen as-is with something like com.badlogic.gdx.utils.ScreenUtils.getFrameBufferPixmap(). Hopefully there is a easier way to achieve what I want.
I ended up drawing circles on a pixmap where the line should be:
One circle on touchDown
Several circles from last touch point to next touch point reported to touchDragged
I'm not very happy with this solution, but it kinda works.
Maybe you can calculate line dot coordinates manually and use triangles to draw them on pixmap? Like use 2 triangles to form (rotated) box?
Related
I am working on an app that will compare histograms in hopes to match faces.
The app allows the user to take a photo, select a few key points in the image and then the app draws circles around those points. I then detect the circles using the OpenCV Hough Circle Transform functions. Up to this point the app works great.
What I need to implement now is one of two options:
Detect the circles and create separate histograms for the area inside of each circle.
Detect the circles and blackout the area(s) around the circles and create one histogram.
I'm leaning towards method 2, but I'm not sure how mask/color/paint around the area outside of the circles after they are detected. Any input would be appreciated. Thanks.
Instead of painting the area outside the circles in the original image, why not create a new image and copy the content of the circles to it?
Another point is that histograms are independent of translation. So, it does not matter if you copy the circles to the exact locations in the new image.
Do clarify if I did not answer your question, or if you have other questions now.
I am using FingerPaint example available in ApiDemos for drawing my finger movement on screen.
Now instead of line, I am adding circles in my path object and this path with circle will be drawn when onDraw method is called.
Now my issue is when I slowly move my finger it draws circles at the points given by onTouchEvent properly but when I move my finger with some speed, unlike line, it draws only few circles.
After debugging, I found that while moving finger rapidly, some of the touch events are dropped by the view and on that points circles are not drawn.
Can anyone give some pointers on this. Why this is happening?
Two things I can think of without seeing code.
First, are you getting the historical points recorded between touchEvents and using them also? If not, that would cause some serious jerkiness like you are talking about.
If you are, and it's just not picking them up, the best you'll be able to do might be to cheat it some. Check the distance between the current and last circle drawn. If it exceeds the circle's diameter too much, draw a line with the same thickness as the circle, with a circle on both ends.
suppose my bitmap is like
This image is actually in square transparent. I want to get the only viewable points as array so I can bound it and handle touch event on canvas. Right now it is square so when I touch at the corner of the image it still detect touch event on image. i don't want to do like this. Only if user clicked on viewable part then only action would be taken otherwise not.
For temporary I have used radius of image from center point it works fine but accurate, also if this image triangle part length is long then if it remain in square format user fill/get event on image outside.
I have used canvas to draw bitmap. Is there any other way or easy way to do this thing and handle event.
I have seen many games in that they used like custom shapes and touch event fire only on display part of object, how could i achieve this things.
Take a look at coordinates:
Android Canvas Coordinate System
and
http://code.google.com/p/apps-for-android/source/browse/trunk/SpriteMethodTest/src/com/android/spritemethodtest/CanvasSprite.java?r=150
Which goes into sprite:
http://p-xr.com/android-tutorial-how-to-paint-animate-loop-and-remove-a-sprite/
This may help too:
http://www.droidnova.com/playing-with-graphics-in-android-part-vi,209.html
Some of that should be helpful.
The problem is pretty complicated to explain but here goes:
I'm making a paint program that draws paths onto a canvas with textured background. Each stroke is stored as a path that updates as the user moves the stylus across the screen. When the path is updated I call drawpath on the canvas. The problem is that on each move event, the path is drawn over the existing line on the canvas, so the antialiasing on it darkens the existing line and make it appear thicker and jaggier than expected.
I had a solution where I store the older canvas (the one without the active path) and keep another transparent canvas on top of that. I would clear the top canvas and redraw the path on each move event, and then draw both canvases together. BUT that makes the program so slow that the paths look terrible - you can tell the drawing is lagging way behind the stylus movements.
Is there any way to make either A) drawing / clearing multiple canvases faster or B) make antialiasing not mess up on multiple redraws?
Figured out.
It was so simple I can't believe I got stuck on it.
The "canvas" used in onDraw() is automatically erased every time, so I just called canvas.drawPath() with the currently updating path in the onDraw() function, at no extra cost.
I'm using a SurfaceView (actually I'm tweaking the Android sample app "LunarView"). I've changed the doDraw() method of that sample app so that I can draw my own things to the canvas provided in the call. This is working fine, I can draw my own things to the canvas and they're showing up in the emulator fine.
What I would like to do, if possible, is have the canvas adapt to the X and Y scale orientation my app naturally uses. For example, my app needs to draw a simple X-Y graph, but I need the X axis to be "down" the screen and the Y axis to be "to the right". (In other words, a typical graph but rotated 90 degrees clockwise.)
I thought that the Matrix class, with its setRectToRect(...) method would be just the ticket for this, but it isn't working for me. I've tried a whole bunch of different invocations of setRectToRect(...) and whenever I call it my canvas shows nothing. If I comment out the calls, my canvas shows what I expect.
The canvas class has some super-powerful methods for scaling and translating, so it just seems natural to me that it would also support the type of axis swap I need, but for the life of me I can't figure out how to do it!
Any help would be great,
Thanks
Rich
Rich,
You can use canvas functions....
You need to tell it where to rotate, using center coordinates usually work best. Find center of canvas and call this: canvas.rotate(90,cx,cy);