SVG到位图到ImageView [英] SVG to Bitmap to ImageView
本文介绍了SVG到位图到ImageView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的Android应用中，我尝试从SVG文件获取位图对象并将其存储在缓存中.然后，应从该位图中将其显示在ImageView对象中.我无法正常工作，或者ImageView的密度错误，图片太小或太大.有人可以告诉我该代码有什么问题吗?为了我的目的，我使用了AndroidSVG库(链接).图片的宽度和高度应为30dp.
In my android app I try to get a Bitmap-Object from a SVG-File and store it in the cache. Then it should be displayed from this bitmap in an ImageView Object. I don't get it working, either the ImageView gets a wrong density, the Picture is too small or too large. May anybody tell me whats wrong with that code? For my purposes I use the AndroidSVG library (link). The Image should has 30dp width and height.
ImageView img = (ImageView)getView().findViewById(R.id.testingImage);
try {
int size = convertDPtoPixels(30);
SVG svg = SVG.getFromResource(mGlob.mContext,R.raw.vectorimage);
svg.setDocumentHeight(size);
svg.setDocumentWidth(size);
PictureDrawable pictureDrawable = new PictureDrawable(svg.renderToPicture());
Bitmap mutableBitmap = Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mutableBitmap);
pictureDrawable.setBounds(0,0,size,size);
pictureDrawable.draw(canvas);
img.setImageBitmap(mutableBitmap);
} catch (SVGParseException e) {
e.printStackTrace();
}
编辑30.3.2015
如果我尝试用这样的像素大小创建位图，则会得到一个太小的图像(但它很锐利):
If I try to create the Bitmap with the Pixel-size like this, I get a too small Image (but it is sharp):
Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
附加信息:
蓝色是我的ImageView中的背景色.我用它来查看它的起点和终点，因为我的SVG具有透明的表面. SVG应该填充蓝色区域...
The Blue Color is the background color, from my ImageView. I use it to see where it starts and end, because my SVG has transparent surfaces. The SVG should fill the blue area...
这是我的SVG文件:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="30"
id="svg15733"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="vectorimage.svg">
<defs
id="defs15735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.1"
inkscape:cx="21.063016"
inkscape:cy="17.702822"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata15738">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3622)">
<path
style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
id="Auswahl"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<flowRoot
xml:space="preserve"
id="flowRoot16280"
style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
id="flowRegion16282"><rect
id="rect16284"
width="123.23861"
height="98.994949"
x="171.72594"
y="179.65981" /></flowRegion><flowPara
id="flowPara16286" /></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="6.8066916"
y="1049.5211"
id="text16288"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan16290"
x="6.8066916"
y="1049.5211"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
id="path16293"
inkscape:connector-curvature="0" />
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
id="path16295"
inkscape:connector-curvature="0" />
</g>
</svg>
推荐答案
您似乎正在将SVG渲染为30x30的位图，然后将其缩放为(大小x大小).
You appear to be rendering the SVG to a 30x30 bitmap then scaling it up to (size x size).
尝试将位图创建更改为:
Try changing the bitmap creation to:
Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
更新:
问题在于Inkscape不会自动为其SVG文件赋予viewBox.
The problem is that Inkscape doesn't automatically give it's SVG files a viewBox.
阅读有关如何处理Inkscape文件的AndroidSVG常见问题. https://code.google.com/p/androidsvg/wiki/FAQ#Dealing_with_Inkscape_files
Read this AndroidSVG FAQ question on how to deal with Inkscape files. https://code.google.com/p/androidsvg/wiki/FAQ#Dealing_with_Inkscape_files
您可以按照那里的建议进行操作(在运行时以编程方式更新SVG).或者，可以手动更改SVG.进行以下更改:
You can either follow the advice there (which updates the SVG programmatically at runtime). Or alternatively, alter the SVG by hand. Make the following changes:
width="100%"
height="100%"
viewBox="0 0 30 30"
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
id="svg15733"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="vectorimage.svg"
viewBox="0 0 30 30">
<defs
id="defs15735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.1"
inkscape:cx="21.063016"
inkscape:cy="17.702822"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata15738">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3622)">
<path
style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
id="Auswahl"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<flowRoot
xml:space="preserve"
id="flowRoot16280"
style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
id="flowRegion16282"><rect
id="rect16284"
width="123.23861"
height="98.994949"
x="171.72594"
y="179.65981" /></flowRegion><flowPara
id="flowPara16286" /></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="6.8066916"
y="1049.5211"
id="text16288"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan16290"
x="6.8066916"
y="1049.5211"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
id="path16293"
inkscape:connector-curvature="0" />
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
id="path16295"
inkscape:connector-curvature="0" />
</g>
</svg>
这篇关于SVG到位图到ImageView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
