как добавить круглую границу в векторное рисованное изображение?

#android #xml #android-vectordrawable

#Android #xml #android-vectordrawable

Вопрос:

У меня есть одно векторное рисованное изображение ГЛАЗА, и я хочу, чтобы вокруг него была круглая рамка, но я не могу найти никакого решения.

Мои требования к изображению такие: вот мое требуемое изображение!

я использую XML-код для значка глаза, как показано ниже:

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="26.012dp"
    android:height="16dp"
    android:viewportWidth="26.012"
    android:viewportHeight="16">
  <path
      android:fillColor="#FF000000"
      android:pathData="M13.012,5.518a3.606,3.606 0,0 1,1.312 0.246,2.168 2.168,0 0,0 2.293,3.671 3.617,3.617 0,1 1,-3.6 -3.917Z"
      android:fillType="evenOdd"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M13.006,16c4.959,0 10.714,-3.655 12.552,-7.074 -2.7,0.038 -4.571,-1.213 -6.415,-2.414a5.237,5.237 0,0 1,0.659 2.536c0,3.252 -3.034,5.889 -6.777,5.889s-6.777,-2.637 -6.777,-5.889a5.235,5.235 0,0 1,0.681 -2.574c-1.864,1.212 -3.744,2.491 -6.474,2.452 1.837,3.418 7.593,7.074 12.552,7.074ZM13.006,3.149c-4.309,0 -7.693,4 -10.737,5.023 -0.585,0.2 -1.7,0.4 -2.131,0.02 -0.316,-0.278 -0.1,-0.274 0.792,-1.1 3.467,-3.192 6.4,-7.08 12.016,-7.1 5.776,-0.017 8.581,3.823 12.137,7.1 0.893,0.822 1.108,0.817 0.792,1.1 -0.433,0.38 -1.546,0.177 -2.131,-0.02C20.699,7.147 17.315,3.149 13.006,3.149Z"
      android:fillType="evenOdd"/>
</vector>  

теперь я хочу добавить границу вокруг этого изображения в соответствии с приведенным выше изображением.

помогите мне, если у кого-нибудь есть понимание этого материала.

Заранее спасибо!!

Ответ №1:

Вы можете изменить свой SVG

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="125dp"
    android:height="125dp"
    android:viewportWidth="125"
    android:viewportHeight="125">
  <path
      android:pathData="M48.7,11.5c-12,3.3 -24.1,12.2 -30.8,22.6 -13.8,21.5 -10.9,49.1 7,66.9 21.7,21.6 54.5,21.6 76.2,-0 29,-28.8 15.4,-79 -24.2,-89.5 -6.6,-1.8 -21.7,-1.8 -28.2,-0zM73.2,13.1c8.9,1.8 19,7.3 25.5,13.8 10.1,10.1 15.3,22.5 15.3,36.6 0,14.7 -5.2,26.7 -15.9,36.8 -7.6,7.1 -15.3,11.2 -24.9,13.3 -8.4,1.7 -12,1.7 -20.4,-0 -9.6,-2.1 -17.3,-6.2 -24.9,-13.3 -10.7,-10.1 -15.9,-22.1 -15.9,-36.8 0,-32.4 29.8,-56.9 61.2,-50.4z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M51.8,41.5c-5.5,2.1 -11.6,6.5 -20.5,14.9l-7.8,7.5 3.3,0.1c3.7,-0 8.1,-2 18,-8.4 8.1,-5.2 12,-6.6 18.2,-6.6 6.2,-0 10.1,1.4 18.2,6.6 10,6.4 14.3,8.4 18,8.4 3.3,-0.1 3.3,-0.1 -6.2,-9.1 -12.4,-11.7 -17.6,-14.3 -29,-14.6 -5.4,-0.2 -9.8,0.3 -12.2,1.2z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M57.4,57.9c-6,3.7 -6.6,12.1 -1.2,16.6 4,3.4 9.6,3.4 13.6,-0 3.8,-3.2 4.8,-6.3 1.8,-5.8 -3.2,0.7 -7.6,-3.3 -7.6,-6.7 0,-1.6 0.5,-3.2 1,-3.5 1.9,-1.2 1,-2.5 -1.7,-2.5 -1.6,-0 -4.2,0.9 -5.9,1.9z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M37.5,63.1c-3.3,1.6 -7.2,2.9 -8.7,2.9 -1.6,-0 -2.8,0.4 -2.8,1 0,2.5 10.6,11.2 18.7,15.2 8.4,4.2 8.9,4.3 18.3,4.3 9.4,-0 9.9,-0.1 18.3,-4.3 8.1,-4 18.7,-12.6 18.7,-15.1 0,-0.6 -1.3,-1.1 -2.9,-1.1 -1.5,-0 -5.5,-1.3 -8.7,-3 -3.2,-1.6 -6,-3 -6.1,-3 -0.1,-0 0.2,1.2 0.8,2.7 2.4,6.5 -2.2,15.3 -10.2,19.4 -5.2,2.6 -14.6,2.6 -19.8,-0.1 -7.5,-3.8 -12.1,-12.2 -10.2,-18.8 0.5,-1.8 0.9,-3.2 0.8,-3.1 -0.1,-0 -2.9,1.4 -6.2,3z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
</vector>
  

Ваш OP будет

введите описание изображения здесь

Комментарии:

1. @harshpatel Вы можете принять этот ответ. Нажмите на галочку

2. я просто хочу знать, как я могу научиться этому, чтобы создавать другие самостоятельно.?

Ответ №2:

Вы можете взять круг в качестве фона для просмотра изображения и установить его src в качестве вектора

 <ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/eye"
    android:tint="#747474"
    android:background="@drawable/circle_gray"
    android:padding="6dp"/>
  

circle_gray.xml в папке с возможностью рисования

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:width="2dp"
        android:color="#747474"/>

</shape>
  

Измените ширину и высоту в соответствии с требованиями. также лучше использовать цвет в colors.xml

Результат:-

введите описание изображения здесь

Ответ №3:

Вы можете использовать этот способ для создания круглой границы,
введите описание изображения здесь

вектор для круглой границы,
введите описание изображения здесь

И, наконец, используйте изображение вашего глаза во втором элементе списка слоев. Будет работать нормально.
Это выглядит так,
введите описание изображения здесь