绘制圆形彩虹矢量 Drawable Android

Question

下面的一段代码以矩形方式绘制了彩虹。

<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>

有谁知道怎么把这个做成圆形的时尚彩虹吗？任何帮助将不胜感激。提前致谢。

Answer 1

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

<?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>

绘制圆形彩虹矢量 Drawable Android

Draw a Circular Rainbow Vector Drawable Android

android

android-drawable

android-vectordrawable