Android自定义矢量图形的投影效果

Question

我希望能够在我的drawable文件夹中添加矢量图的阴影效果。目前，当我将带有阴影的SVG导入到Android Studio中时，转换为XML后阴影就被移除了。

如何在Android Studio中为矢量图创建阴影效果？

这是我想要添加阴影效果的矢量图示例：

- user3331142

---

你需要自己绘制它，创建一个自定义的Drawable类并在draw方法中进行绘制，首先绘制阴影，然后再绘制原始的Drawable。 - pskink

最差？你是什么意思？ - pskink

听起来比它值得的工作还要多，但我得深入研究一下。 - user3331142

这个简单的实现链接有什么难的？ - pskink

当然，你可以更加逼真地实现这个效果，而不是使用平面阴影。你可以使用ScriptIntrinsicBlur来模糊边缘。顺便说一下，如果你想要使用不同分辨率的阴影PNG文件，为什么还要使用向量呢？ - pskink

Answer 1

您可以创建没有边缘模糊的阴影： * 打开“可绘制xml”文件； * 在每个路径之前添加一个组，包含阴影的平移（取决于矢量分辨率），并用深色透明颜色填充，例如：

  <group
      android:translateX="150"
      android:translateY="150"
      >
    <path
        android:pathData="..."
        android:fillColor="#40000000"
        />
  </group>

- Style-7

---

你能否分享一段示例代码？这个片段有点令人困惑。我不确定在哪里添加它。你能帮我解决一下吗？谢谢。 - Arjun

不错，它可以工作。 我的资产示例：https://gist.github.com/ktiniatros/c9969ff3bfef9015b09e197fe3e2a633 我在原始路径上方添加了组。 请注意，这是一个小图标（24x24），因此我使用了一些缩放。 - giorgos.nl

Answer 2

您可以尝试以下简单的方法：需要使用相同的pathData复制路径标签，并添加必要的参数（strokeWidth、strokeColor、strokeLineJoin、strokeLineCap）。

为了实现更平滑的阴影过渡，可以使用较大的strokeWidth多次复制路径标签。标签的顺序也很重要。示例代码如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="20"
    android:viewportHeight="20">

<path
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
    android:strokeWidth="1"
    android:strokeColor="#FFEB3B"
    android:strokeLineJoin="round" />
<path
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
    android:strokeWidth=".5"
    android:strokeColor="#2196F3"
    android:strokeLineJoin="round" />
<path
    android:fillColor="#FFFFFF"
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/></vector>

最后的向量

- dima

Answer 3

如果您有像Sketch这样的SVG编辑工具，我建议通过该工具添加阴影并保存SVG文件。然后使用以下工具将其转换为Android可绘制矢量图。 http://a-student.github.io/SvgToVectorDrawableConverter.Web/

最后，下载XML文件到您的drawable文件夹中，或选择复制内容并手动创建新的drawable资源，并将内容复制到其中即可。十分简单 : )。让我知道您的实际操作效果如何。

- Mikel Sulanjaku

---

当从Sketch转换为.xml时，阴影未被传递。您将获得没有阴影的图像向量。 - Blue Bot

那个工具的链接没什么用，它把颜色都去掉了。 - lini sax