Android Canvas Coordinate System

Question

I'm trying to find information on how to change the coordinate system for the canvas. I have some vector data I'd like to draw to a canvas using things like circles and lines, but the data's coordinate system doesn't match the canvas coordinate system.

Is there a way to map the units I'm using to the screen's units?

I'm drawing to an ImageView which isn't taking up the entire display.

If I have to do my own calculations prior to each drawing call, how to I find the width and height of my ImageView?

The getWidth() and getHeight() calls I tried seem to be returning the entire canvas size and not the size of the ImageView which isn't helpful.

I see some matrix stuff, is that something that will work for me?

I tried to use the "public void scale(float sx, float sy)", but that works more like a pixel level zoom rather than a vector scale function by expanding each pixel. This means if the dimensions are increased to fit the screen, the line thickness is also increased.

---

Update:

After some research I'm starting to think there's no way to change coordinate systems to something else. I'll need to map all my coordinates to the screen's pixel coordinates and do so by modifying each vector. The getWidth() and getHeight() seem to be working better for me now. I can say what was wrong, but I suspect I can't use these methods inside the constructor.

Answer 1

The only way I know of to do custom vector graphics on the fly in Android is to draw everything into an image file and then put that into an ImageView. I'm not sure I understand exactly what you are asking, but if the only issue is scaling, the ImageView will scale whatever image it is given to its own size using android:scaleType="center" as a property of the ImageView.

As far as changing the coordinate system, I doubt that is possible (although I haven't researched it). It might be fairly trivial to write a function that would map your data's system to the standard Android coordinate system, though.

Answer 2

Thanks for the reply. I have pretty much given up on getting this to work in the way I think it should. Of course how I think things should happen isn't how they do happen. :)

Here's basically how it works, but it seems to be off by a pixel in some cases and the circles seem to be missing sections when things land on some boundary conditions I have yet to figure out. Personally I think this is unacceptable to be inside application code and should be in the Anroid libraries... wink wink, nudge nudge if you work for Google. :)

private class LinearMapCanvas { private final Canvas canvas_; // hold a wrapper to the actual canvas.

// scaling and translating values:
private double scale_;

private int translateX_;
private int translateY_;

// linear mapping from my coordinate system to the display's: private double mapX(final double x) { final double result = translateX_ + scale_*x; return result; }

private double mapY(final double y)
{
    final double result = translateY_ - scale_*y;
    return result;
}

public LinearMapCanvas(final Canvas canvas)
{
    canvas_ = canvas;

// Find the extents of your drawing coordinates: final double minX = extentArray_[0]; final double minY = extentArray_[1]; final double maxX = extentArray_[2]; final double maxY = extentArray_[3];

// deltas: final double dx = maxX - minX; final double dy = maxY - minY;

// The display's available pixels, accounting for margins and pen stroke width: final int width = width_ - strokeWidth_ - 2*margin_; final int height = height_ - strokeWidth_ - 2*margin_;

final double scaleX = width / dx;
final double scaleY = height / dy;

scale_ = Math.min(scaleX , scaleY); // Pick the worst case, so the drawing fits

// Translate so the image is centered: translateX_ = (int)((width_ - (int)(scale_*dx))/2.0 - scale_*minX); translateY_ = (int)((height_ - (int)(scale_*dy))/2.0 + scale_*maxY); }

// wrappers around the canvas functions you use. These are only two of many that would need to be wrapped. Annoying and error prone, but beats any alternative I can find. public void drawCircle(final float cx, final float cy, final float radius, final Paint paint) { canvas_.drawCircle((float)mapX(cx), (float)mapY(cy), (float)(scale_*radius), paint); }

public void drawLine(final float startX, final float startY, final float stopX, final float stopY, final Paint paint)
{
canvas_.drawLine((float)mapX(startX), (float)mapY(startY), (float)mapX(stopX), (float)mapY(stopY), paint);
}

... }