绘制圆形彩虹矢量 Drawable Android答案

【问题标题】：Draw a Circular Rainbow Vector Drawable Android绘制圆形彩虹矢量 Drawable Android
【发布时间】：2021-05-26 05:13:23
【问题描述】：

以下代码以矩形方式绘制了彩虹。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="360dp"
    android:height="208dp"
    android:viewportWidth="360"
    android:viewportHeight="208">
    <path android:pathData="M0,0 L360,0 L360,208 L0,208 Z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="360"
                android:endY="208"
                android:startX="0"
                android:startY="0"
                android:type="linear"
                android:tileMode="repeat">
                <item
                    android:color="#FF0064"
                    android:offset="0.0" />
                <item
                    android:color="#FF0064"
                    android:offset="0.111111" />
                <item
                    android:color="#FF7600"
                    android:offset="0.111111" />
                <item
                    android:color="#FF7600"
                    android:offset="0.222222" />
                <item
                    android:color="#FFD500"
                    android:offset="0.222222" />
                <item
                    android:color="#FFD500"
                    android:offset="0.3333333" />
                <item
                    android:color="#8CFE00"
                    android:offset="0.3333333" />
                <item
                    android:color="#8CFE00"
                    android:offset="0.444444" />
                <item
                    android:color="#00E86C"
                    android:offset="0.444444" />
                <item
                    android:color="#00E86C"
                    android:offset="0.555555" />
                <item
                    android:color="#00F4F2"
                    android:offset="0.555555" />
                <item
                    android:color="#00F4F2"
                    android:offset="0.666666" />
                <item
                    android:color="#00CCFF"
                    android:offset="0.666666" />
                <item
                    android:color="#00CCFF"
                    android:offset="0.777777" />
                <item
                    android:color="#70A2FF"
                    android:offset="0.777777" />
                <item
                    android:color="#70A2FF"
                    android:offset="0.888888" />
                <item
                    android:color="#A96CFF"
                    android:offset="0.888888" />
                <item
                    android:color="#A96CFF"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

有人知道如何将它做成圆形时尚彩虹吗？任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： android android-drawable android-vectordrawable

【解决方案1】：

可能有点晚了，但我遇到了完全相同的挑战，并且在观看 this video 后能够成功（顺便说一句，强烈推荐）。我想出这个解决方案是通过搜索矢量pathData 来获得21dp 大小的圆形视图，就像你做的那样将渐变分成层，但关键是通过背靠背重复颜色来稍微重叠颜色这会通过将颜色泄漏到下一个来产生模糊效果。最后，我使用了渐变类型sweep，这使它们围绕给定的形状/路径移动。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="21dp"
android:height="21dp"
android:viewportWidth="21"
android:viewportHeight="21">
    <path
    android:pathData="M10.4212,10.5774m-10.4212,0a10.4212,10.4212 0,1 1,20.8424 0a10.4212,10.4212 0,1 1,-20.8424 0">
    <aapt:attr name="android:fillColor">
        <gradient
            android:centerX="10.5"
            android:centerY="10.5"
            android:type="sweep">
            <item
                android:color="#FFFFC42C"
                android:offset="0.0" />
            <item
                android:color="#FFFFC42C"
                android:offset="0.1" />
            <item
                android:color="#FFEF49DE"
                android:offset="0.2" />
            <item
                android:color="#FFEF49DE"
                android:offset="0.3" />
            <item
                android:color="#FFEF49DE"
                android:offset="0.4" />
            <item
                android:color="#FFB763DF"
                android:offset="0.5" />
            <item
                android:color="#FFB763DF"
                android:offset="0.5" />
            <item
                android:color="#FF6789DF"
                android:offset="0.6" />
            <item
                android:color="#FF6789DF"
                android:offset="0.7" />
            <item
                android:color="#FFB1E08C"
                android:offset="0.8" />
            <item
                android:color="#FFB1E08C"
                android:offset="0.9" />
            <item
                android:color="#FFFFC42C"
                android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

【讨论】：