I'm trying to create an application similar to Finger Paint example from Android SDK. I was trying to implement Undo/Redo functionality to my test app and used the accepted answer in this question : Android FingerPaint Undo/Redo implementation.
The example there is working, but there is a strange things which I've noticed. If I select eraser mode for example on some button click, the default implementation acts like a eraser, but using onDraw() as in the question mentioned above is not doing this. Instead of it's acting like a normal brush and drawing with a black stroke (depending on the given color).
If I try to add another effects to the current brush, for example I drew 15 lines and after that select add blur option, after I draw the new one, all lines before get blurred too.
if (mPaint.getMaskFilter() != mBlur) {
mPaint.setMaskFilter(mBlur);
} else {
mPaint.setMaskFilter(null);
}
return true;
So my question is..any ideas how can I separate old lines from new ones and setting effects only for them and using clear mode as it should be?
Thanks for any kind of help!
You would rather hold history in an object like the following one than just holding the path objects..
class pathInfo {
Path mPath;
int mStyle;
boolean mbAntiAlias;
....
}
Then while drawing each path pick each corresponding info from these objects
protected void onDraw(Canvas canvas) {
for (PathInfo p : pathsInfo){
mPaint.setStyle(p.mStyle);
....
canvas.drawPath(p.mPath, mPaint);
}
}
Related
the keywords about this topic:
CustomSurfaceView: three custom surfaceview for three different levels.
Canvas: lock/unlockAndPost method (i'm not using custom bitmap )
Multi thread ( each surface is a separate thread )
Shapes ( shapes on canvas )
Client/Server ( architecture )
Flickering ( IS WHY I'M HERE )
We are developing a client/server application and I'm working on the client side. I'm receiving messages from the server containing general data (coordinates, color, width [...] ) about paths like, circle, rectangle, line and other shapes. The web application allows the user to send these data drawing on HTML5 Canvas, to an android device that receiving this messages and parsing it, will be able to redraw all the shapes. From my own experience on this subjects, I learned that the best way to keep in control all the things you draw on the canvas, is saving everything into a buffer, array, list or something like that, then reuse it when you want (for example, you can use the older path for show, hide, move or simply change something on the canvas). In my opinion, the android application follows the best practice of android development and OOP paradigm so I'm not assuming errors related to the bad architecture. In this case, I'm saving the messages on web client side. When the user draws on HTML5 Canvas, the messages which contain shape info are perfectly reported to the android canvas, but the problem appears when:
[example]
Consider you draw 10 objects (10 messages) and you want delete only one object on web app canvas, so the only way is clearing all the canvas, and redraw all the previous shapes without the deleted shape (so resend to the client 9 messages by loop the messages buffer ). This method works perfectly for the web app but cause flickering problem on android client. So after too many experiments I found a workaround, using a Thread.sleep(100)(Whooo! 100ms is too much), in order to parse slowly the messages and let the surfaceview thread to read correctly the data (data access through singleton pattern) and write on the double-buffer of the canvas.Well, it's slow and ugly but it works ! Actually I don't like this “horrible” workaround so please help me to see an exit strategy.
This is a piece of code where the canvas get data from shapes containers and draw if data are present. The data of each containers came from server messages.
#Override
public void run() {
Canvas canvas = null;
while (running) {
//this is the surface's canvas
try {
canvas = shapesSurfaceHolder.lockCanvas();
synchronized (shapesSurfaceHolder) {
if (shapesSurfaceHolder.getSurface().isValid()) {
if(!Parser.cmdClear){
//draw all the data present
canvas.drawPath(PencilData.getInstance().getPencilPath(),
PencilData.getInstance().getPaint());
canvas.drawPath(RectData.getInstance().getRectPath(),
RectData.getInstance().getPaint());
canvas.drawPath(CircleData.getInstance().getCirclePath(),
CircleData.getInstance().getPaint());
canvas.drawPath(LineData.getInstance().getLinePath(),
LineData.getInstance().getPaint());
canvas.drawText(TextData.getInstance().getText(),
TextData.getInstance().getX(),
TextData.getInstance().getY(),
TextData.getInstance().getPaint());
} else {
//remove all canvas content and clear data.
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
for (int i = 0; i < AbstractFactory.SHAPE_NUM; i++) {
abstracFactory.getShape(i).clearData();
}
}
}
}
} finally {
if (canvas != null) {
shapesSurfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
}//end_run()
I can summarize that, apparently, my problem is to draw too quickly
Note:
Similar concept: Android thread controlling multiple texture views causes strange flickering
Hardware acceleration is enabled.
minSdkVersion 17
Tested on
Tablet Samsung SM-T113
Google Nexus 5
The TextureView issue was due to a bug specific to TextureView. You're using SurfaceView, so that does not apply here.
When drawing on a SurfaceView's Surface, you must update every pixel inside the dirty rect (i.e. the optional arg passed to lockCanvas()) every time. If you don't provide a dirty rect, that means the entire screen must be updated. This is because the Surface is double- or triple-buffered, and swapped when you call unlockCanvasAndPost(). If you lock / clear / unlock, then the next time you lock / draw / unlock, you will not be drawing into the buffer you previously cleared.
If you want to do incremental rendering, you should point your Canvas at an off-screen Bitmap and do all your rendering there. Then just blit the entire bitmap between lock and unlock. The alternative is to store up the drawing commands, starting with the initial clear, and play them all back between lock/unlock.
The phrase "three custom surfaceview" is somewhat concerning if they're all on screen at once. If you have them all at different Z depths (default, media overlay, top) then they will behave correctly, but the system is generally more efficient if you can put everything on one.
My code here receives a value for bmpX and bmpY and uses them to draw a bitmap at that location on the screen. This works exactly as I want it to, but I would rather use the canvas.translate() function to handle the movement of the image, rather than just canvas.drawBitmap(), because I will be applying other draw elements to the canvas and I want them all to move the same amount and direction.
My question is: where can I move the canvas.drawBitmap() in the code so that it just draws onto the canvas at the start, but it is moved any time after that using canvas.translate() instead? Anywhere I place the code still freezes the image at that point where I draw it, regardless of how much I change the position of canvas.translate(). I'm imaging its possible to "stick" the image to the canvas, so to speak, and then move the canvas, which also moves the image with it.
public void run() {
// TODO Auto-generated method stub
while(isRunning) {
if(!surfaceHolder.getSurface().isValid()) {
continue;
}
canvas = surfaceHolder.lockCanvas();
canvas.drawRGB(255, 255, 255);
canvas.drawBitmap(bmp, bmpX-(bmp.getWidth()/2),
bmpY-(bmp.getHeight()/2), null);
//canvas.translate(bmpX, bmpY);
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
I hope I explained my problem clearly enough. Thanks!
Answering my own question here for clarity, afetr info I got offline. UI cannot be done on a thread like this, I needed to be using an android UI thread instead. runOnUIUpdatethread and async tasks
I'm trying to create an Android app that adds a random quote to images.
The general process is this:
Start from a custom given image that shows when starting the app.
From this image all the user can do is tap on it and generate a new random "quote" that get overlaid on the image.
The user can save the newly created image with the quote he chose and set it as wallpaper.
I have got to the point where I can display the image in an ImageView.
My list of quotes is stored in my strings.xml file.
I do something like this in an app. Use Canvas.
I edited down a piece of my code, which actually adds a couple of other images on the background and stuff too.
Meat of code:
private static Bitmap getPoster(...) {
Bitmap background = BitmapFactory.decodeResource(res, background_id)
.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(background);
Typeface font = Typeface.createFromAsset(res.getAssets(), FONT_PATH);
font = Typeface.create(font, Typeface.BOLD);
Paint paint = new Paint();
paint.setTypeface(font);
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Style.FILL);
paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);
float fontSize = getFontSize(background.getWidth(), THE_QUOTE, paint); //You'll have to define a way to find a size that fits, or just use a constant size.
paint.setTextSize(fontSize);
canvas.drawText(THE_QUOTE, (background.getWidth() - paint.measureText(THE_QUOTE)) / 2,
background.getHeight() - FILLER_HEIGHT, paint); //You might want to do something different. In my case every image has a filler in the bottom which is 50px.
return background;
}
Put your own version of that in a class and feed it the image id and anything else. It returns a bitmap for you to do whatever you want with (display it in an imageview, let the user save it and set as wallpape).
I know i did this for the PC with imagemagick a few years ago(save image with text on)
Seems like imagemagick have been ported to android, so I would start digging into thier documentation.
https://github.com/lilac/Android-ImageMagick
Ok! Francesco my friend, I've an idea although not a working code ('cuz I'm not really good at it). So, here it is:
Implement an onClickListener() on your ImageView like below:
ImageView iv = (ImageView)findViewById(R.id.imageview1);
iv.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v)
{
/** When I say do your stuff here, I mean read the user input and set your wallpaper here. I'm sorry that I don't really know how to save/set the wallpaper */
}
});
When it comes to reading user input/generating random quotes, you can do this:
You said you already have the quotes saved in the strings.xml file. Using the ids of those strings, I think you can implement a switch case scenario where it uses java imports - java.util.Scanner and java.util.Random. Ultimately, using these in your ImageView onClickListener could/should result in the desired output.
I know my answer is too vague, but I've a faint hope that it has given you a minute lead as to what you can implement. I seriously hope there are better answers than this. If not, then I hope this helps you some, and I also hope that I'm not leading you in the wrong direction since this is just a mere speculation. Sorry, but this is all I've got.
I know this has been asked before and I went through all the answers and nope this ain't that, and yes I have the activity named in the manifest so it's not that.
Here's my problem:
I have a sprite moving across the screen and when in the window where you choose the livewallpaper, I have a preference that lets the user choose the height (so they can move the sprite up or down) the only problem is the sprite is constantly moving so when they use the seekbar to move the sprite up or down I get the old 'Window already focused, ignoring focus gain of" Now if I go out and come back in again of course this stop and restarts it and the new preference hight is already in their so it moves to the new height then but not in the live preview.
Here is the sprite code:
private void addShipOne() {
int heightPosition = (screenSized / 2) - (screenSized / /*this.bigShipHeight*/gettheFreakingHeight());
int widthPosition = 0;
Point startPoint = new Point(widthPosition, heightPosition);
this._shipone.add(new SpaceShipOne(this._context, this, startPoint, 125));
(sorry about the method name I was using to test a quick version I was a bit frustrated at that point) lol
It then goes into an OnDraw method then into the render to render it all.
public void render(){
Canvas canvas = null;
try{
canvas = this._surfaceHolder.lockCanvas(null);
synchronized (this._surfaceHolder) {
this.onDraw(canvas);
}
}finally{
if(canvas != null){
this._surfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
I have another preference that allows the user to choose the frequency of the ships appearing it works fine but it goes from left to right and changes ships then so it updates the frequency then, but the height one doesn't work, I tested the log to make sure the height int goes through and it does so its not that, the only thing I can come up with is the maybe add this when the ship turns left or right, but it does not work while its moving by the looks of it.
this.bigShipHeight is where the new height value goes into ( I was just testing it another way with the gettheFreakingHeight() (I used an if else statement for that method that used the frquency preference instead which does work nicely.
Just to add the full code part.
In the onDraw(Canvas canvas)
I render the _shipone as such
for (Renderable renderable : this._shipone) {
renderable.render(canvas);
}
Any help would be appreciated.
Thanks in advance
Sam
Ok I should of looked into the my sprite class first, sorry about this I answered my own question once again and it was too obvious, that's what I get for looking at the code way to long, I should walk away then come back it always is clearer then.
Just in case others run into this issue I'll put the answer.
In my sprite class which SpaceShipOne runs from I just added this
this.getSprite().setYPos(this._blimp.gettheFreakingHeight());
This updates right away with no window already focused.
I don't know why I didn't see this last night because it is the only place it can be added and be updated right away, all I had to do was set the Y position to the preference instead.
It works like a charm.
Hope this helps someone else out
Sam
I'd previously managed to incorporate OpenStreetMaps into my application using osmdroid-android-3.0.1.jar with the great assistance of the answer to my question
Porting a Google Maps app to Osmdroid - problem with overlay
I've now upgraded to using the 3.0.3 jar and can't get my overlay to display.
My app can switch display from Google Maps to OSM and display the same overlay consisting of lines and texts on top of either. The alternative displays each run in their own activity for now, as the classes are similar but do not have absolutely identical methods, or at least they didn't have in 3.0.1. (Ultimately I'd like to use the Osmdroid wrapper jar to combine them in one activity and reduce the duplicate code, but that's a question for a later date) Right now I'd like to get the same functionality as I had with the now deprecated 3.0.1 jar using the new 3.0.3 version.
With the new jar, I still get the mapview displayed OK but the overlay has disappeared. I've had to make some changes to the code, as the 3.0.1 onDraw() method has now been replaced with draw() (just like Google) in the MapOverlay extends org.osmdroid.views.overlay.Overlay class.
All the code in the previous onDraw() (now draw) method has been copied verbatim from the answer to the question referred to above, It worked fine, although I confess to not fully understanding the concepts of worldsize, bounding boxes and the transformation described.
I notice that the method
final Point upperLeft = org.osmdroid.views.util.Mercator
.projectGeoPoint(boundingBox.getLatNorthE6(), boundingBox.getLonWestE6(),
zoomLevel + tileZoom, null);
is now deprecated, and I had to remove tileZoom and
final int tileZoom = projection.getTileMapZoom();
to get it to compile.
When I get to the code in the draw() method, I can see in the debugger that all the data necessary to draw the overlay is still present and correct. The drawing is done by lines such as canvas.drawLine(....) and canvas.drawText(....). I've not used the extra parameter to the function (boolean shadow) at all.
My redrawOverlay() method remains as:
private void redrawOverlay() {
mGpt = mMapVw.getMapCenter();
if (mmapOverlay == null)
mmapOverlay = new MapOverlay(this);
mmapOverlay.setEnabled(true);
List<Overlay> listOfOverlays = mMapVw.getOverlays();
int ovlSize = listOfOverlays.size();
if (ovlSize > 1)
listOfOverlays.remove(1);
listOfOverlays.add(mmapOverlay);
mMapVw.invalidate();
}
(The Google listofOverlays.clear() shouldn't be used as osmdroid 3.0.1 had element 0 as the map itself - hence the remove(1))
I'm wondering what I have to do to modify the existing 3.0.1 code to work with 3.0.3? I'm hoping that one of the authors of might read this question.
Update
By adapting the Minimap overaly as suggested in the answer to the question referred to above, the draw() method for drawing an overlay from top left to bottom right, now becomes:
#Override
protected void draw(Canvas pC, MapView pOsmv, boolean shadow) {
if(shadow)
return;
Paint lp3;
lp3 = new Paint();
lp3.setColor(Color.RED);
lp3.setAntiAlias(true);
lp3.setStyle(Style.STROKE);
lp3.setStrokeWidth(1);
lp3.setTextAlign(Paint.Align.LEFT);
lp3.setTextSize(12);
// Calculate the half-world size
final Rect viewportRect = new Rect();
final Projection projection = pOsmv.getProjection();
final int zoomLevel = projection.getZoomLevel();
int mWorldSize_2 = TileSystem.MapSize(zoomLevel) / 2;
// Save the Mercator coordinates of what is on the screen
viewportRect.set(projection.getScreenRect());
// DON'T set offset with either of below
//viewportRect.offset(-mWorldSize_2, -mWorldSize_2);
//viewportRect.offset(mWorldSize_2, mWorldSize_2);
// Draw a line from one corner to the other
pC.drawLine(viewportRect.left, viewportRect.top, viewportRect.right, viewportRect.bottom, lp3);
}
This works OK
Let me try to suggest a few things:
In the new jar build, calling getOverlays().clear() will no longer remove the map tile overlay. Calling remove(1) may be incorrect now since the map tile overlay is no longer in position 0.
The projection has a method that will get you the screen coordinate rectangle of what is currently on the screen. You can check the coordinates you use to draw your lines with against this rectangle to make sure they intercept it.
Take a look at the new TileSystem class. Anything that was deprecated can be recreated using these functions.