Android中的矢量图形答案

【问题标题】：Vector graphics in AndroidAndroid中的矢量图形
【发布时间】：2011-04-30 06:19:36
【问题描述】：

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

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

【问题讨论】：

如果你转换成JPG/GIF，你不会失去矢量能力吗？
这正是问题所在，也是我想避免这种情况的原因。

标签： android vector-graphics

【解决方案1】：

查看svg-android - 这是一个相对较新的库，仅支持 SVG Basic，但它是用于绘制 Androidify 的库。主页上有关于如何从 SVG 获取 Drawable 的示例，这似乎是您正在寻找的。p>

【讨论】：

【解决方案2】：

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。

【讨论】：

【解决方案3】：

TinyLive SVG 为 Android 提供 SVG 查看器。没试过，不知道好不好用。

Reading this bug request 似乎 SVG 可能可以在浏览器中启用 - 所以大概 WebView 也在 Gingerbread 中。但由于这可能是未来版本中的一项功能，因此现在可能对您没有太大帮助。

【讨论】：

【解决方案4】：

查看BetterVectorDrawable 库和SVG to VectorDrawable Converter。

BetterVectorDrawable 是适用于 Android 4.0+ 的 VectorDrawable 实现，在 Android 5.0+ 上具有可配置的回退行为。

SVG 到 VectorDrawable 转换器 是 SVG 图像到 Android VectorDrawable XML 资源文件的批量转换器。在线版是here。

链接指向自述文件，其中提供了有关如何使用 lib 和转换器的足够信息。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

这个问题很老了。但希望我的回答对这里的未来访客有所帮助。

我们将 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 一样，您也可以使用其他方法在 ImageView 中放置可绘制对象，例如 setImageDrawable("d") 等。

您也可以参考 Alex Lockwood 先生的“Icon 动画技术介绍”：

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

举个例子。

希望我给了你有用的答案。

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

【讨论】：