Develop Reference

How can I remove the path and markers from the canvas only without refreshing and changing the picture?

I draw a path and marker through certain coordinates on a canvas that shows an image on the screen.At a certain coordinate point on the picture.
Path path = new Path();
if (!isReady()) {
return;
}
else if (routeList != null && nodeList != null) {
if (!routeList.isEmpty() && !nodeList.isEmpty()) {
// draw route
for (int i = 0; i < routeList.size() - 1; i++) {
PointF goal3 = new PointF(nodeList.get(routeList.get(i)).x,
nodeList.get(routeList.get(i)).y);
PointF goal4 = new PointF(nodeList.get(routeList.get(i + 1)).x,
nodeList.get(routeList.get(i + 1)).y);
sourceToViewCoord(goal3, vPin5);
sourceToViewCoord(goal4, vPin6);
path.moveTo(vPin5.x, vPin5.y);
path.lineTo(vPin6.x, vPin6.y);
//Draw path on canvas certain coordinate points
canvas.drawPath(path, paint);
}
PointF goal1 = new PointF(nodeList.get(routeList.get(0)).x,
nodeList.get(routeList.get(0)).y);
sourceToViewCoord(goal1, vPin3);
float vX1 = vPin3.x - (location_img.getWidth() / 2);
float vY1 = vPin3.y - location_img.getHeight() / 2;
//Draw marker certain coordinate point
canvas.drawBitmap(location_img, vX1, vY1, paint);
PointF goal2 = new PointF(nodeList.get(
routeList.get(routeList.size() - 1)).x,
nodeList.get(routeList.get(routeList.size() - 1)).y
);
sourceToViewCoord(goal2, vPin4);
float vX2 = vPin4.x - (pin_red.getWidth() / 2);
float vY2 = vPin4.y - pin_red.getHeight();
// Draw bitmap on canvas certain coordinate points
canvas.drawBitmap(pin_red, vX2, vY2, paint);
}
}

You can draw your path on another canvas (Bitmap) and only draw your path Bitmap according to your wish on the image canvas. As stated by Basile Perrenoud, the important thing is not to allocate your path Bitmap during the drawing. You could e.g. create it during the class instanciation and reuse it with a clean at every redraw.

The save and restore method only store the transformation matrix and the clip area of the canvas (See the doc). You can't remove pixels from a canvas, just draw on top of it. If you added your path on top of the image, you should make a call that just draws the image.
Note that it isn't a big deal performance-wise as long as you don't reload or recreate the bitmap.

Draw on Bitmap but on specific parts of it

I have a picture of a tennis racket in my fragment like this.
I will receive X / Y coordinates from the main part of the racket lets say I will get x/y from this image:
I have no idea how can I DRAW (red dots) on the other image with the full racket after i receive the x/y coordinates.

I used the following method to overlay an image at specified x,y cords:
private Bitmap overlay(Bitmap sourceMap,Bitmap locationDrawable,int x, int y) {
Bitmap bmOverlay = Bitmap.createBitmap(sourceMap.getWidth(), sourceMap.getHeight(), sourceMap.getConfig());
Bitmap bmp2small =Bitmap.createScaledBitmap(locationDrawable, (int) Math.round(locationDrawable.getWidth() * .25), (int) Math.round(locationDrawable.getHeight() * .25), true);
int bmp2width = bmp2small.getWidth();
int bmp2height = bmp2small.getHeight();
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(sourceMap, new Matrix(), null);
canvas.drawBitmap(bmp2small, (float) x - (bmp2width / 2), (float) y - bmp2height, null);
bmp2small.recycle();
return bmOverlay;
}

Android Bitmap Transformation Math

I need to combine 2 images into one. Basically all i need to do is to overlay one of them on top of the other in the center of the image. This needs to work on all major android devices.
I have tried a number of things, but here is my code snippet as of right now (and yes I know it's messed up, we need to figure out delx and dely):
/* Rotate our original photo */
// final float scale = getResources().getDisplayMetrics().density;
canvas.drawBitmap(bmp, 0f, 0f, null);
final float overlay_scale_factor = .5f;
final int overlaywidth = (int)(overlay.getWidth() * overlay_scale_factor);
final int overlayheight = (int)(overlay.getHeight() * overlay_scale_factor);
final int delx = overlaywidth;
final int dely = overlayheight;
Matrix mat = new Matrix();
mat.postRotate(270);
mat.postScale(overlay_scale_factor, overlay_scale_factor);
//mat.postTranslate(-delx, -dely);
canvas.drawBitmap(overlay, mat, null);
/* Bottom image 'composite' is now a composite of the two. */
Any help is appreciated. I know this is just math, but I'm not good at this kind of stuff.
The first image, 'bmp' is 100% the size of the canvas.
The second image, 'overlay' is the overlay that needs to be centered after it's rotated 270 degrees.

Totally untested, but I'd expect something like this to work:
// Set the origin (0,0) in the middle of the view
canvas.translate(width/2, height/2);
// Draw the first bitmap so it is centered at (0,0)
canvas.drawBitmap(bmp, -bmp.getWidth()/2, -bmp.getHeight()/2, null);
// Rotate & scale
canvas.save();
canvas.rotate(270);
canvas.scale(.5f);
// Draw the overlay
canvas.drawBitmap(overlay, -overlay.getWidth()/2, -overlay.getHeight()/2, null);
canvas.restore();

Compass with bitmap is going everywhere in the screen

i want my compass to spin like this
but my result is that:
the compass is going everywhere in my screen...
where is my problem please?this is my compass.java code:
#Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);
int w = canvas.getWidth();
int h = canvas.getHeight();
int cw = w / 2;
int ch = h / 2;
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.compass);
canvas.translate(cw, ch);
if (mValues != null) {
canvas.rotate(-mValues[0]);
}
int cx = (mWidth - myBitmap.getWidth()) / 2;
int cy = (mHeight - myBitmap.getHeight()) / 2;
canvas.drawBitmap(myBitmap, cx, cy, null);
}
p.s.: i m sorry for the bad pictures but i really dont know how to explain my problem in english!Thanks

Since you have already translated to the center of the canvas, you may only need to offset the compass with its half width/height to center it. Try:
int cx = -myBitmap.getWidth() / 2;
int cy = -myBitmap.getHeight() / 2;
canvas.drawBitmap(myBitmap, cx, cy, null);
Also to get a good hang of transformations (translate, rotate), read The OpenGL Red book chapter 3, specifically the part Thinking about Transformations. While this is about OpenGL, you can use the knowledge for non-OpenGL transforms too.
EDIT:
Think in turtle logic. Your first translation takes your pencil to the center of your canvas. The rotation rotates your pencil. So now you could draw the compass exactly where the pencil is (no offsets), except that drawing the compass image is done starting from its top-left corner instead of its center. Therefore you need a last translation of (-compassWidth/2, -compassHeight/2). Note that this translation already occurs on the rotated x & y axes. Also note that you may pass 0/0 for cx/cy in drawBitmap if you manually apply that translation to the canvas itself.
So the full sequence is: translate to canvas center, rotate, translate negated to image center.

Don't decode the Bitmap in onDraw - do it when the view is created and reuse the Bitmap.
Make a Matrix and matrix.postRotate(mValues[0], half_width_of_bitmap, half_height_of_bitmap); and matrix.postTranslate(cw, ch);
Draw the bitmap with canvas.drawBitmap(bitmap, matrix, null);

Map overlay for osmdroid never appears

I am trying to implement my own map overlay for osmdroid (but I assume it is fairly similar to Google map overlays).
What I am trying to do is draw a plane, rotate it according to bearing and draw a speed vector (line ahead of the plane in the flight direction that shows where it will soon be).
The idea is that I draw the plane (et all) on a canvas "facing North", then rotate it according to flight direction and "merge" it with the overlay canvas (I tried drawing directly to the overlay canvas, but on rotate, it was rotating the map as well).
I have created a subclass of Overlay and overiden the onDraw method as follows:
#Override
protected void draw(Canvas c, MapView mapView, boolean shadow) {
if (location != null) {
Point locPoint = new Point();
GeoPoint locGeoPoint = new GeoPoint(location);
final Projection pj = mapView.getProjection();
pj.toMapPixels(locGeoPoint, locPoint);
this.drawPlane(c, locPoint, location.getBearing());
}
}
private void drawPlane(Canvas cs, Point ctr, float bearing) {
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setAntiAlias(true);
Bitmap planeBM = Bitmap.createBitmap(cs.getWidth(), cs.getHeight(), Bitmap.Config.ARGB_8888);
planeBM.setDensity(cs.getDensity());
Canvas c = new Canvas(planeBM);
Rect r = new Rect();
//Point center = new Point(cs.getWidth() / 2, cs.getHeight() /2);
Point center = new Point(0, 0);
// Draw fuselage
r.left = center.x - PLANE_WIDTH / 2;
r.right = r.left + PLANE_WIDTH;
r.top = center.y - PLANE_SIZE / 3;
r.bottom = r.top + PLANE_SIZE;
c.drawRect(r, paint);
// Draw wing (REMOVED)
// Draw stabilizer (REMOVED)
// TODO Draw Speed vector
// "Merging" canvas
Matrix merge = new Matrix(cs.getMatrix());
//merge.setTranslate(0, 0);
//merge.setRotate(bearing, center.x, center.y);
cs.drawBitmap(planeBM, merge, paint);
cs.save();
}
Basically my plane never shows.
I assume this has to do with the matrix in the initial canvas which has large values (I assume these are sort of geographical coordinates).
It all seems to be consistent though (the plane location has large values as well consistent with the matrix).
I have tried a number of things :
drawing from the actual plane location (large values) : did not help;
setting the matrix of my new canvas with the overlay canvas matrix : did not help;
merging with a new "empty" matrix : did not help;
-...
I know that my image contains the plane (at least if I draw from 0,0 or the new canvas center as I saved it to the SD to check...

In case this is usefull to someone, I finally found a solution.
Basicaly I was trying to do too much at the same time.
Using setPostRotate instead of setRotate on the merge matrix did solve the issue (that and goig bac to the drawing board for the correct translation parameters).
Using the below as a merge matrix worked:
// "Merging" canvas
Matrix merge = new Matrix();
merge.setTranslate(loc.x - pCenter.x, loc.y - pCenter.y);
merge.postRotate(bearing, loc.x, loc.y);