圆圈中可绘制的矢量

问题描述 投票:0回答:5

有没有一种简单的方法来生成矢量可绘制对象,即现有矢量可绘制对象中带有图标的圆圈?

示例:

android svg android-vectordrawable
5个回答
22
投票

我会建议这样的事情:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:gravity="fill"
    android:drawable="@drawable/ic_brightness_1_black_24dp"

    />
    <item
        android:gravity="center"
        android:drawable="@drawable/ic_call_black_24dp"
        android:top="20dp"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        />

</layer-list>

ID 为 ic_brightness_1_black_24dp 和 ic_call_black_24dp 的资源是导入的矢量绘图。

ic_brightness_1_black_24dp:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>

和 ic_call_black_24dp:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>

8
投票

因为没有人提到如何使用矢量绘图来做到这一点,因为问题说这里是做到这一点的方法。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="144dp"
    android:height="144dp"
    android:viewportWidth="144"
    android:viewportHeight="144">
  
  <path
      android:pathData="M72,72m-50,0a50,50 0,1 1,100 0a50,50 0,1 1,-100 0"
      android:strokeWidth="9"
      android:fillColor="#00000000"
      android:strokeColor="#fff"/>

 </vector>




M72,72m -> circle's center coordinates
50` -> the circle's radius
100` -> circle's diameter
strokeWidth -> the ring's thickness
  • 要将其制成光盘而不是戒指,请更改

    fillColor

  • 要使圆圈大小减半,请将所有出现的 50 更改为 25,将所有出现的 100 更改为 50。对于其他尺寸,请相应更改。

  • 要在视口内移动圆圈,请更改圆圈的坐标(

    72
    数字)

这些数字显然与视口大小有关。 72 是 144 的中心,在本例中是定义的视口尺寸。要将其置于 200 视口大小的中心,您需要使用 100


6
投票

实际上非常简单,您只需将两个路径包含在一个向量中,因此您的路径将如下所示:

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

    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>

    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>

</vector>

结果显然取决于彼此相关的路径大小,并且由于在没有图形工具的情况下缩放它们是一件痛苦的事情,因此带有 layer-list

DimDim 解决方案
更容易实现。


0
投票

添加到上面调整圆圈大小的答案中,您可以使用下面的代码

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<group
    android:scaleX="1.2"
    android:scaleY="1.2"
    android:pivotX="12"
    android:pivotY="12">
    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</group>
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>

</vector>

-1
投票

用这个方法,
enter image description here
我自己尝试了一下,效果很好。看起来像这样。 enter image description here

对于按钮_圆形:
enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.