问题
I have .svg a file with some elements in it. Is there any way to draw them step by step on the canvas?
I'm using com.caverock:androidsvg library, but it seems like there is no way to extract individual element.
回答1:
Here is my test example video. I copied one Path from 250 (the white outline in the middle of the image, that does not pan or scroll). It was the first Path in the SVG document, and the first element in the List of Path's
"I have
.svgfile with some elements in it. Is there any way to draw them step by step on the canvas?"
Yes you can do this (at least for the important Path data), see Android path tracing tutorial, and the source code in the github here. The demo (road-trip) extracts (actually it intercepts) the Path's and also animates these
android.graphics.Path's (with android.animation.ObjectAnimator). You Tube.
The library I picked,
androidsvg, is easy to use but does not give access to the paths contained in theSVGdocument. I worked around this issue by creating a custom Canvas that interceptsdrawPath()calls:
//list of Path's
private final List<VecPath> mPaths = new ArrayList<VecPath>();
Canvas canvas = new Canvas() {
private final Matrix mMatrix = new Matrix();
@Override
public void drawPath(Path path, Paint paint) {
Path dst = new Path();
// Get the current transform matrix
getMatrix(mMatrix);
// Apply the matrix to the path
path.transform(mMatrix, dst);
// Store the transformed path
mPaths.add(new SvgPath(dst, new Paint(mSourcePaint)));
}
};
// Load an SVG document
SVG svg = SVG.getFromResource(context, R.raw.map_usa);
// Capture the paths
svg.renderToCanvas(canvas);
Note
Remember the .SVG format is a document file, not just a simple vector image type.
You possibly could modify the viewBox to select different images from your .SVG document, using the code above.
<svg
width="650"
height="1000"
viewBox="40 350 900 1050"
id="svg1">
来源:https://stackoverflow.com/questions/50469319/android-how-to-draw-svg-files-elements-separetly