Scaling Canvas to resize SVG in Android

Fafhrd picture Fafhrd · Jan 5, 2013 · Viewed 10.2k times · Source

I'm not having much luck wrapping my head around this, so I'm hoping someone can help me out.

I'm getting a drawable from an SVG using svg-android, but the drawable isn't scaling to the view. Everything that I've been able to find says I should draw directly to canvas and rescale the canvas, but when I try that it only seems to change the bounds but not scale the image.

This is what I've tried so far:

ImageView testview = (ImageView)findViewById(R.id.testview);

//Get SVG and convert to drawable
SVG vector = SVGParser.getSVGFromResource(getResources(),R.drawable.testvector);
Drawable test = vector.createPictureDrawable();

testview.setBackground(test);  //displays fine, but won't scale to the dimensions of
                               //the View

//function that clips the image but doesn't scale:
Drawable testTwo = new CustomPictureDrawable(vector.getPicture(), 
(float)0.5, (float)0.5);

testView.setBackground(testTwo);

class CustomPictureDrawable extends PictureDrawable {
   private float scalex, scaley;

public CustomPictureDrawable(Picture picture, float scalex, float scaley) {
    super(picture);
    this.scalex = scalex;
    this.scaley = scaley;
}

@Override
public void draw(Canvas canvas) {
    Matrix original = canvas.getMatrix();
    canvas.scale(scalex, scaley);
    super.draw(canvas);
    canvas.setMatrix(original);
}
}

//doesn't display anything
Picture testThree = vector.getPicture();

Bitmap b = Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_4444);
Canvas c = new Canvas(b);

c.drawPicture(testThree, new Rect(0,0,10,10));

testview.draw(c);

I've also found a function that will create a scaled bitmap, but the image quality is significantly reduced, so I may as well just use scaled PNGs.

Obviously I'm missing something, and my lack of experience is making it really frustrating.

What I'd like to be able to do is have svg-android completely re-scale the SVG before pulling a Picture or PictureDrawable out of it, but I can't figure out how to step through the SVGParser, and running multipliers on every coordinate pair would probably be super resource intensive anyway.

[edit] Is the only way to scale and re-draw the Picture and assign that to a view to create custom Views and override OnDraw?

i.e.

Picture testThree = vector.getPicture();

Bitmap b = Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_4444);
Canvas c = new Canvas(b);

c.drawPicture(testThree, new Rect(0,0,10,10));

//CustomView extends ImageView or Button or whatever with OnDraw overridden and no
//other changes 
CustomView testview = (CustomView)findViewById(R.id.testview); 

testview.OnDraw(c);

Am I on the right track? Canvas c would overwrite the default canvas (which is what I want), wouldn't it?

Answer

Fafhrd picture Fafhrd · Jan 6, 2013

I figured it out. Or at least figured out a method that works. The answer was staring me in the face in that scaled bitmap function that I didn't like. I fundamentally misunderstood how the Picture class and Draw calls work.

Code that seems to have pulled it off:

//Get a Picture from the SVG
SVG vector = SVGParser.getSVGfromResource(getResources(), R.raw.testvector);

Picture test = vector.getPicture();

//Redraw the picture to a new size
Bitmap bitmap = Bitmap.createBitmap(desired width, desired height, config);

Canvas canvas = new Canvas(bitmap);

Picture resizePicture = new Picture();

canvas = resizePicture.beginRecording(desiredWidth, desiredGeight);

canvas.drawPicture(test, new Rect(0,0,desiredWidth, desiredHeight);

resizePicture.endRecording();

//get a drawable from resizePicture
Drawable vectorDrawing = new PictureDrawable(resizePicture);

I can size it to whatever View I want by getting desiredWidth and desiredHeight from getWidth() and getHeight() calls, and setBackground(vectorDrawing) at the end to put it on the View.