Android中的矢量图形

时间:2010-10-25 14:44:06

标签: android vector-graphics

我正在开发一个显示其他人的图像数据库的应用程序。他们拥有的图像都是矢量图形,可以转换成任何格式,但是将它们保存为矢量格式是好的,因为用户可能想要放大。

问题是,是否有内置的方式在Android中显示矢量图形?格式无关紧要 - 我们可以转换。我们正在考虑的当前格式是PDF,但鉴于没有本机PDF支持,我必须做一些非常复杂的工作才能使其正常工作(例如,通过NDK将poppler集成到我的应用程序中) 。另一种方法是将矢量图形转换为更简单的格式(JPG,GIF),但我宁愿避免这种情况。

5 个答案:

答案 0 :(得分:21)

查看svg-android - 它是一个相对较新的库,它只支持SVG Basic,但它是用于绘制Androidify的库。主页上有一些关于如何从SVG获取Drawable的例子,它们正是您所寻找的。

答案 1 :(得分:7)

<强> Creating Vector Drawables.


我知道这个问题很老,但我遇到了同样的要求,我很高兴得知Android 5.0现在支持矢量绘图。您可以使用<vector>标记和路径数据来创建矢量绘图,它就像API-21上的魅力一样。这是一个生成心脏形状的矢量图像的例子。

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="256dp"
    android:viewportWidth="32"
    android:viewportHeight="32">

    <!-- draw a path -->
    <path android:fillColor="#8fff"
        android:pathData="M20.5,9.5
                    c-1.955,0,-3.83,1.268,-4.5,3
                    c-0.67,-1.732,-2.547,-3,-4.5,-3
                    C8.957,9.5,7,11.432,7,14
                    c0,3.53,3.793,6.257,9,11.5
                    c5.207,-5.242,9,-7.97,9,-11.5
                    C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

到目前为止我遇到的唯一问题是,它不包含在支持库中,因此您无法在较低的API中使用它们。美妙的是,你现在甚至可以为矢量绘图制作动画。这是一个例子。

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

详细了解矢量绘制动画here

答案 2 :(得分:4)

TinyLive SVG为Android提供了一个SVG查看器。我没有尝试过,所以我不知道它是否有任何好处。

Reading this bug request似乎可以在浏览器中启用SVG - 大概也是WebView - 在Gingerbread中。但是,由于这是未来版本中的一个可能功能,现在可能对你没什么帮助。

答案 3 :(得分:0)

一个无耻的自我插件,但也许你对ribbon-vg感兴趣?它是基本的,纯Java和快速的;依靠尖端技术在渲染过程中减轻CPU负担。

答案 4 :(得分:0)

这个问题很老了。但希望我的回答可以帮助未来的访客。

我们将VectorDrawable文件放在drawable文件夹中。 AnimatedVectorDrawable也是一个drawable。因此,我们将这些文件也放在drawable文件夹中。以下是两者的例子:

vd_omega.xml

    <vector 

        xmlns:android="http://schemas.android.com/apk/res/android"
                android:width="1536dp"
                android:height="864dp"
                android:viewportWidth="1536.0"
                android:viewportHeight="864.0">

            <path
                android:name="my_vector"
                android:pathData="M  162   8
                q    -07    00   -41    26
                q    -34    27   -50    64
                q    -25    59   -19   117
                q     07    70    53   121
                q     57    63   151    62
                q     87   -01   140   -66
                q     46   -55    48  -142
                q     01   -56   -34  -105
                q    -38   -52   -77   -70
                l    -29   -11
                q     16   -01    31   -02
                q     59   -01   119   -02 "

                android:strokeLineCap="round"
                android:strokeColor="#f00f"
                android:fillColor="#00000000"
                android:strokeWidth="32"
                android:trimPathEnd="0"/>



        </vector>

avd_omega_animator.xml

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/vd_number8">

    <target
        android:name="my_vector"
        android:animation="@animator/trimpath_animator"/>       



</animated-vector>

然后你可以使用如下的动画文件进行动画制作:

trimpath_animator.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

<objectAnimator
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:repeatCount="0"
android:repeatMode="reverse"/>
</set>

您可以在同一文件中为更多属性设置更多动画制作者。

在您的布局文件中

activity_main.xml中

<RelativeLayout
    xmlna:android="http://schemasandroid.com/apk/res/android"
    xmlna:app="http://schemasandroid.com/apk/res-auto"
    xmls:tools="http:schemas.android.com/tools"
    android:id="@+some_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <ImageView
    android:id="@+id/my_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/avd_omega_animator"/>

</RelativeLayout>

在您的活动中,在onCreate中编写以下代码:

导入... 导入......

public class MyActivity extends Activity{

ImageView myImage;


...
...
setContentView(R.layout.activity_main);
myImage = (ImageView)findViewById(R.id.my_image);
Drawable d = myImage.getDrawable():
if(d instance of Animatable){
d.start;
}

看到有趣的事。

就像我上面使用getDrawable一样,你也可以使用其他方法在drawView中放置drawables,如setImageDrawable(“d”)等。

您还可以参考Alex Lockwood先生的“图标动画技术简介”:

https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

以获得好的例子。

希望我能给你一个有用的答案。

我上面给出的所有示例代码都有效。它也很简单直接。