I have a Canvas on which I am drawing lines bewteen points in a onTouchEvent(). When the user makes an invalid selection on where to place the line, I draw a red line instead of a black one. However I want the red line to fade away over the next 500-1000ms.
I haven't been able to figure out how to do it, and if it is even possible to animate a single line inside a Canvas.
I have split the dots, the valid black lines and the invalid red line(s) between 3 different bitmaps inside my:
public void onDraw(Canvas canvas) {
// Fade Red Line
canvas.drawBitmap(fBitmap, 0, 0, null);
// Lines
canvas.drawBitmap(mBitmap, 0, 0, null);
// Dots
canvas.drawBitmap(iBitmap, 0, 0, null);
}
and inside my onTouch function are my drawLines().
I was wondering if I can use an AlphaAnimation for this, or if I have to use a timer system to loop over the fBitmap with the red line I want to fade out over time.
Any Ideas?
EDIT: Okay here's how I eventually solved it after coming back to it a year later:
I implemented a SurfaceView and created a thread to continuously update the Canvas.
#Override
public void run() {
while (isRunning) {
if (!surfaceHolder.getSurface().isValid()) {
continue;
}
decreaseLineOpacity();
drawLinesInvalid();
/* Other things to draw*/
Canvas canvas = surfaceHolder.lockCanvas();
canvas.drawBitmap(fBitmap, centerPointWidth, centerPointHeight, null);
// mBitmap is the middleground with the line that fades away.
// and is bound to mCanvas for drawing
canvas.drawBitmap(mBitmap, centerPointWidth, centerPointHeight, null);
canvas.drawBitmap(iBitmap, centerPointWidth, centerPointHeight, null);
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
And then the methods that take care of changing the opacity and drawing the line, I store each line I draw in a Queue, until it reaches an opacity of 0, and then I remove it so only the lines that need to be animated are left:
private void drawLinesInvalid() {
Iterator<int[]> iterator = invalidLines.iterator();
// Loop through each element in the Queue, delete it from the bitmap with the porter
// duff mode to keep the transparancy of the layer. Then draw line with the given opacity
while (iterator.hasNext()) {
int[] invalidLine = iterator.next();
float[] line = {invalidLine[1], invalidLine[2], invalidLine[3], invalidLine[4]};
Xfermode originalXfermode = paint.getXfermode();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mCanvas.drawLines(line, paint);
paint.setXfermode(originalXfermode);
paint.setColor(Color.RED);
paint.setAlpha(invalidLine[0]);
mCanvas.drawLines(line, paint);
}
}
// Call this function in the onTouch method
private void addLineToInvalidList(float[] line) {
// Store each line a queue with its current opacity
int[] lineWithOpacity = new int[5];
lineWithOpacity[0] = 250;
lineWithOpacity[1] = (int) line[0];
lineWithOpacity[2] = (int) line[1];
lineWithOpacity[3] = (int) line[2];
lineWithOpacity[4] = (int) line[3];
invalidLines.add(lineWithOpacity);
}
private void decreaseLineOpacity() {
Iterator<int[]> iterator = invalidLines.iterator();
// Remove all lines that are finished animating (opacity = 0)
while (iterator.hasNext()) {
int[] line = iterator.next();
if (line[0] == 0) {
iterator.remove();
}
}
// Decrease opacity on lines that are left
iterator = invalidLines.iterator();
while (iterator.hasNext()) {
int[] line = iterator.next();
line[0] -= 10;
}
}
Considering you are drawing all three bitmaps on the same view, using an AlphaAnimation may be a bit tricky.
I would suggest spawning a thread that changes the alpha value of the invalid red line(s) bitmap over time (sleeping for set intervals with Thread.sleep). However, for this to perform well you should look into using a SurfaceView as calling postInvalidate multiple times may be quite costly (unless this is running on Android 3.0+ with hardware acceleration).
Related
I perform some drawing on a canvas every 10 sec. Unfortunately it disappears before it will be redrawn, so we have 10 sec with a blank screen. I tired to save a canvas before drawing and restore it, did not help.
This bug was appeared after I had shifted a line canvas.drawPath(linePath, linePaint); from outside of a loop into the loop.
CODE:
private void drawLine(Canvas canvas) {
yStep = (yHeight) / fullChargeLevel;
xStep = (xWidth) / timeStampBarsQuantity;
boolean check = false;
float time;
float chrg;
while (batteryUsageHistory != null && batteryUsageHistory.moveToNext()) {
int charge = batteryUsageHistory.getInt(1);
int time_stamp = batteryUsageHistory.getInt(2);
if (charge < 1) {
if(check){
canvas.drawPath(linePath, linePaint); //This line I shifted into here
linePath.reset();
}
check = false;
continue;
}
time = xPos + time_stamp * xStep;
chrg = yPos - (charge * yStep);
if (!check) {
linePath.moveTo(time, chrg);
check = true;
continue;
}
linePath.lineTo(time, chrg);
}
//canvas.drawPath(linePath, linePaint); //This line I shifted from here
}
You should implement your drawing logic in onDraw by extending some View class:
protected void onDraw(Canvas canvas) {
// here goes your custom drawing logic
}
as stated in: https://developer.android.com/training/custom-views/custom-drawing.html
it is because android redraws the component when it needs to. It is always like that you need to implement the drawing method and the GUI framework will call this method when neccessary, it is not the opposite, that the GUI framework displays your painting, it is just calling your painting method when needed.
I just moved back that line canvas.drawPath(linePath, linePaint); I was previously moved. And it works!.
I'm working on a drawing application and am pretty close to release but I'm having issues with the eraser part of the app. I have 2 main screens (fragments) one is just a blank white canvas that the user can draw on with some options and so on. The other is a note taking fragment. This note taking fragment looks like notebook paper. So for erasing on the drawing fragment, I can simply use the background of the canvas and the user wont know the difference. On the note fragment though I cannot do this beacuse I need to keep the background in tact. I have looked into PorterDuffer modes and have tried the clear version and tried to draw onto a separate bitmap but nothing has worked. If there was a way to control what gets draw ontop of what then that would be useful. I'm open to any suggestions, I can't seem to get anything to work.
Ive also played with enabling a drawing cache before erasing and that doesn't work. In addition I tried hardware enabling and that made my custom view behave oddly. Below is the relavent code. My on draw methods goes through a lot of paths because I am querying them in order to allow for some other functionallity.
#Override
protected void onDraw(Canvas canvas) {
//draw the backgroumd type
if(mDrawBackground) {
//draw the background
//if the bitmap is not null draw it as the background, otherwise we are in a note view
if(mBackgroundBitmap != null) {
canvas.drawBitmap(mBackgroundBitmap, 0, 0, backPaint);
} else {
drawBackgroundType(mBackgroundType, canvas);
}
}
for (int i = 0; i < paths.size(); i++ ) {
//Log.i("DRAW", "On draw: " + i);
//draw each previous path.
mDrawPaint.setStrokeWidth(strokeSizes.get(i));
mDrawPaint.setColor(colors.get(i));
canvas.drawPath(paths.get(i), mDrawPaint);
}
//set paint attributes to the current value
mDrawPaint.setStrokeWidth(strokeSize);
mDrawPaint.setColor(mDrawColor);
canvas.drawPath(mPath, mDrawPaint);
}
and my draw background method
/**
* Method that actually draws the notebook paper background
* #param canvas the {#code Canvas} to draw on.
*/
private void drawNoteBookPaperBackground(Canvas canvas) {
//create bitmap for the background and a temporary canvas.
mBackgroundBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBackgroundBitmap);
//set the color to white.
mBackgroundBitmap.eraseColor(Color.WHITE);
//get the height and width of the view minus padding.
int height = getHeight() - getPaddingTop() - getPaddingBottom();
int width = getWidth() - getPaddingLeft() - getPaddingRight();
//figure out how many lines we can draw given a certain line width.
int lineWidth = 50;
int numOfLines = Math.round(height / lineWidth);
Log.i("DRAWVIEW", "" + numOfLines);
//iterate through the number of lines and draw them.
for(int i = 0; i < numOfLines * lineWidth; i+=lineWidth) {
mCanvas.drawLine(0+getPaddingLeft(), i+getPaddingTop(), width, i+getPaddingTop(), mNoteBookPaperLinePaint);
}
//now we need to draw the vertical lines on the left side of the view.
float startPoint = 30;
//set the color to be red.
mNoteBookPaperLinePaint.setColor(getResources().getColor(R.color.notebook_paper_vertical_line_color));
//draw first line
mCanvas.drawLine(startPoint, 0, startPoint, getHeight(), mNoteBookPaperLinePaint);
//space the second line next to the first one.
startPoint+=20;
//draw the second line
mCanvas.drawLine(startPoint, 0, startPoint, getHeight(), mNoteBookPaperLinePaint);
//reset the paint color.
mNoteBookPaperLinePaint.setColor(getResources().getColor(R.color.notebook_paper_horizontal_line_color));
canvas.drawBitmap(mBackgroundBitmap, 0, 0, backPaint);
}
To all who see this question I thought I would add how I solved the problem. What I'm doing is creating a background bitmap in my custom view and then passing that to my hosting fragment. The fragment then sets that bitmap as its background for the containing view group so that when I use the PorterDuff.CLEAR Xfermode, the drawn paths are cleared but the background in the fragment parent remains untouched.
I've been experimenting with different ways of moving a image over a grid of tiles for a game, but I've been unable to get a working implementation.
First I tried using a grid layout to hold a bunch of Tiles that extended Canvas and drew themselves. This drew the tiles nicely, however it seems that I am unable to draw my Player object on top of them. Originally, the Player also extended Canvas and I intended to have the widget on top of the tiles. It seems like this is impossible.
I then tried to have the Tile simply extend nothing, and just hold the image. I then hold each Tile in a 2D array and draw each Tile by a nested for loop, using the int from the for loop, multiplied by the image size, to draw Tile's Image. I put this code in a PaintListener inside of my constructor for my Map class that extended Canvas and dropped my Map onto my Shell in a Fill layout, but the PaintListener never gets called (I tested with a print statement).
What implementation could I use to draw the Tiles at the start of the game, then allow me to control the movement of my Player image?
I did something similar.
Using a PaintListener I get the calls when the Widget needs to be repainted. In my paint function, I loop over a tile array (wrapped in a World class) and draw all tiles. Afterwards I use the same technique with a worldObjects array/class:
public class WorldWidget extends Canvas {
WorldWidget() {
addPaintListener(new PaintListener() {
#Override
public void paintControl(PaintEvent e) {
WorldWidget.this.paintControl(e);
}
});
}
protected void paintControl(PaintEvent e) {
GC gc = e.gc;
for (short y = 0; y < world.getHeight(); y++) {
for (short x = 0; x < world.getWidth(); x++) {
final ITile tile = world.getTile(x, y);
final Image image = ImageCache.getImage(tile);
gc.drawImage(image, x * tileSize, y * tileSize);
}
}
// Here is used a similar loop, to draw world objects
}
}
This is obviously a condensed code example, as the class is part of an editor and reacts on mouse clicks and movement amongst other things.
When I did a tile based simulation while ago I did it this way:
I had 2 layers of the tile map - one for the terrain and second for the units.
The map itself was represented by a JPanel.
So roughly you got this for the JPanel:
public void paintComponent(Graphics graphics) {
// create an offscreen buffer to render the map
if (buffer == null) {
buffer = new BufferedImage(SimulationMap.MAP_WIDTH, SimulationMap.MAP_HEIGHT, BufferedImage.TYPE_INT_ARGB);
}
Graphics g = buffer.getGraphics();
g.clearRect(0, 0, SimulationMap.MAP_WIDTH, SimulationMap.MAP_HEIGHT);
// cycle through the tiles in the map drawing the appropriate
// image for the terrain and units where appropriate
for (int x = 0; x < map.getWidthInTiles(); x++) {
for (int y = 0; y < map.getHeightInTiles(); y++) {
if (map.getTerrain(x, y) != null) {
g.drawImage(tiles[map.getTerrain(x, y).getType()], x * map.getTILE_WIDTH(), y * map.getTILE_HEIGHT(), null);
}
}
}
if (map.getSimulationUnits() != null) {
for (Unit unit : map.getSimulationUnits()) {
g.drawImage(tiles[unit.getUnitType()], (int) Math.round(unit.getActualXCor() * map.getTILE_WIDTH()), (int) Math.round(unit.getActualYCor() * map.getTILE_HEIGHT()),
null);
}
}
// ...
// draw the buffer
graphics.drawImage(buffer, 0, 0, null);
}
Logic:
private Terrain[][] terrain = new Terrain[WIDTH][HEIGHT];
/** The unit in each tile of the map */
private Unit[][] units = new Unit[WIDTH][HEIGHT];
Then you have your game loop where you update the position of the units and other things, basically render() and update() the game. Check the links I've provided below.
NOTE
Since you are making a simple game this post about making game loops will be definitely useful for you. This hopefully also answer your question about moving the object on the map.
This site will be also very helpful since you will probably need to detect collision at some point too.
I want my ListView to look like a notepad, ie with a horizontal lines background pattern. Following the Notepad sample, I can extend TextView and override its onDraw() like this:
r = new Rect();
for (int i = 0; i < getLineCount(); i++) {
int baseline = getLineBounds(i, r);
canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
}
super.onDraw(canvas);
but when there are just a few elements in the list, there won't be enough lines to fill the page (actual result on the left, desired on the right):
~~~
So I tried an alternative approach: overriding ListView.onDraw(). Unfortunately, there's no immediate way to compute the top scroll (getScrollY() always returns 0), and above all, I must disable all caching and drawing optimizations, and this will definitely kill performance, other than not being scalable for large lists.
Finally, my row widgets are not plain text views. They are complex layouts, even if the main content is -sure- a TextView. This means that inside the layout I can't call getLineBounds() (a layout is not a text view), and in the text view I can't because the TextView is smaller than the surrounding layout, so there will be gaps on the four sides.
How can I architect a solution to display my custom widgets and fill the entire window with horizontal lines? A naive approach would be to add dummy empty elements to the list as long as it fits all the available space, however this is a hack and there must be a better way of doing things. Using a background image is not an option, since the distance between lines must be customizable at runtime.
The code below is based on the simple example from your question, a custom TextView that draws a line at the bottom(and with no dividers in the list). In this case I would make a custom ListView and override the dispatchDraw method like below:
class CustomListView extends ListView {
private Paint mPaint = new Paint();
private Paint mPaintBackground = new Paint();
public CustomListView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint.setColor(Color.RED);
mPaintBackground.setColor(Color.CYAN);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
// ListView's height
final int currentHeight = getMeasuredHeight();
// this will let you know the status for the ListView, fitting/not
// fitting content
final int scrolledHeight = computeVerticalScrollRange();
if (scrolledHeight >= currentHeight || scrolledHeight == 0) {
// there is no need to draw something(for simplicity I assumed that
// if the adapter has no items i wouldn't draw something on the
// screen. If you still do want the lines then pick a decent value
// to simulate a row's height and draw them until you hit the
// ListView's getMeasuredHeight)
return;
} else {
// get the last drawn child
final View lastChild = getChildAt(getChildCount() - 1);
// values used to know where to start drawing lines
final int lastChildBottom = lastChild.getBottom();
// last child's height(use this to determine an appropriate value
// for the row height)
final int lastChildHeight = lastChild.getMeasuredHeight();
// determine the number of lines required to fill the ListView
final int nrOfLines = (currentHeight - lastChildBottom)
/ lastChildHeight;
// I used this to simulate a special color for the ListView's row background
Rect r = new Rect(0, lastChildBottom, getMeasuredWidth(),
getMeasuredHeight());
canvas.drawRect(r, mPaintBackground);
for (int i = 0; i < nrOfLines; i++) {
canvas.drawLine(0, lastChildBottom + (i + 1) * lastChildHeight,
getMeasuredWidth(), lastChildBottom + (i + 1)
* lastChildHeight, mPaint);
}
}
}
}
See if you can use the code above and adapt it to your own needs.
I have a list an element defined as such:
public List<Bullet> Bullets;
Bullet newBullet = new Bullet(0, 0, 0, 0, 0, 0, 0, 0);
When an onscreen button is pressed I run:
newBullet.setProperties((int)(CannonCenterX + CannonEndX), (int)(CannonCenterY + CannonEndY), (int)(25*scaleX), (int)(25*scaleY), CannonEndX, CannonEndY, screenWidth, screenHeight);
Bullets.add(newBullet);
That should change the properties of the newBullet element, and add a copy of it to the Bullet List. However once I do that the application crashes.
The threading part here:
// try locking the canvas for exclusive pixel editing on the surface
try {
canvas = this.surfaceHolder.lockCanvas();
synchronized (surfaceHolder) {
// update game state
this.gamePanel.update();
// draws the canvas on the panel
this.gamePanel.onDraw(canvas);
}
} finally {
// in case of an exception the surface is not left in
// an inconsistent state
if (canvas != null) {
surfaceHolder.unlockCanvasAndPost(canvas);
}
} // end finally
Generates an exception and the program closes. I have no idea why adding an already generated element to a list would crash the program. Any help is appreciated.
-Nathan
You need to create the list:
public List<Bullet> Bullets = new ArrayList<Bullet>();