Android pathdata что это

Understanding VectorDrawable pathData commands in Android

If you want to animate Vectors, you need to understand what these commands mean.

Aug 26, 2016 · 6 min read

Open any VectorDrawable XML file and you are greeted with some cryptic commands in the pathData attribute.

Those who works with Paths on a regular basis may be able to interpret this command and tell you what shape it makes. For the rest of us, it can be a bit of a mystery.

What is a VectorDrawable

A VectorDrawable is an XML representation of a V ector. Unlike popular image formats like Bitmap, JPEG, GIF and PNG, Vectors do not lose quality as they are scaled up or down. This makes bundling of images with different densities unnecessary, hence saving you a lot of APK bloat. In effect, VectorDrawables contains path commands on (how to draw lines and arcs) and just like Path commands when working with Canvas, drawing and rendering VectorDrawables is time and memory consuming process which is why VectorDrawable’s are best used for simple flat graphics.

Why bother to understand these commands? I just get them as an SVG!

If you wish to animate a VectorDrawable, as is all the rage these days, one of the requirements is that the VectorDrawable you are animating from and to should share the same number of commands. Also, it helps to know how each of these commands will cause the graphic to move/change in order to animate the image. To this end, having an understanding of what these path commands mean can help greatly.

Understanding pathData commands

Let me just start by saying that no matter how much you study path commands, unless you’re a genius, there will be a limit to what you can understand. Vector graphic programs don’t exactly have clean and human readable code as a high priority. After vector graphics files like SVGs are piped through Android Studios VectorDrawable generator, they become a lot cleaner and easier to read, however, I’ve found that a lot of the commands can still be a lot more complex that what you may need. Then to understand circles and arcs just requires you to have a lot of imagination or some serious mathematics prowess.

The basics

Basic path commands are comprised of alphabet followed by one or more numbers. The numbers are often comma separated but don’t have to be. E.g.

The alphabet can be upper or lowercase. Uppercase means absolute position, lowercase means relative position.

Commands

M or m (X,Y)+
moveto: Move cursor to position, uppercase is absolute, lowercase is relative
moveto commands are followed by X,Y coordinates. There can be more than one set of coordinates following an M command, these are treated as implicit lineto commands.

Z or z
closepath: Draws a line from the current position of the cursor to the start position of the path. Does not have any parameters.

L or l (X,Y)+
lineto: Draws a line from the current position to the position specified by X,Y. Uppercase means absolute coordinates, lowercase means relative coordinates. You can have more than one set of coordinates following a lineto command. If you want specify more than one set of coordinates, it means that you’re creating a polyline (shape consisting of multiple string lines).

H or h (X)+
Horizontal lineto draws a horizontal line from the current cursor position to the position specified by X. If there are multiple X coordinates following the command, this is treated as a polyline. The Y coordinate remains unchanged. Uppercase H is absolute coordinates, lowercase h is relative coordinates.

V or v (Y)+
Vertical lineto draws a vertical line from the current cursor position to the position specified by Y. If there are multiple Y coordinates following the command, this is treated as a polyline. The X coordinate remains unchanged. Uppercase V is absolute coordinates, lowercase v is relative coordinates.

Example

With this much in mind, lets interpret the command we had above:

M100,100: Move cursor to absolute coordinates X=100 Y=100px.
L300,100: Draw a line to X=300 Y=100 (starting position was 100,100).
L200,300: Draw a line to X=200 Y=300 (starting position was 300,100).
z: Close path, straight line from current position to 100,100. When you close the path is when the shape is filled with the fill colour specified. You can leave this out if you shape doesn’t need to close, like in a check mark or a cross.

If we sketch it out, you’ll notice that the shape is an upside down triangle!

If we put this inside a simple VectorDrawable XML we can see the result:

Источник

Урок 5. Работа с графическими ресурсами в Material Design

Содержание этого урока

См. также

Указанные ниже возможности по работе с элементами дизайна позволяют реализовать в приложении элементы Material Design:

• тонирование элементов дизайна;
• извлечение главного цвета;
• создание векторных элементов.

В этом уроке рассматривается порядок использования этих функций в приложении.

Тонирование элементов дизайна

В Android 5.0 (уровень API 21) и более поздних версий можно тонировать растровые изображения и изображения в формате NinePatch, определенные как альфа-маски. Для тонирования можно применять как цветовые ресурсы, так и атрибуты темы, которые разрешаются в цветовые ресурсы (например, ?android:attr/colorPrimary ). Обычно такие ресурсы создаются только один раз, после чего они автоматически окрашиваются для соответствия цветам темы.

Тонирование можно применить к объектам BitmapDrawable и NinePatchDrawable с помощью метода setTint() . Также можно задать цвет и способ тонирования в макетах, используя для этого атрибуты android:tint и android:tintMode .

Извлечение главных цветов на изображении

Во вспомогательной библиотеке Android r21 и более поздних версий содержится класс Palette , с помощью которого можно извлекать следующие главные цвета на изображении:

• насыщенные цвета;
• насыщенные темные цвета;
• насыщенные светлые цвета;
• приглушенные цвета;
• приглушенные темные цвета;
• приглушенные светлые цвета.

Для извлечения этих цветов передайте объект Bitmap в статический метод Palette.generate() в фоновом потоке, где загружаются изображения. Если невозможно использовать этот поток, вместо этого вызовите метод Palette.generateAsync() и укажите модуль прослушивания.

Извлечь главные цвета на изображении можно также с помощью методов getter из класса Palette , таких как Palette.getVibrantColor .

Чтобы использовать класс Palette в своем проекте, добавьте в модуль своего приложения следующую зависимость Gradle:

Источник

Русские Блоги

Извилистый путь Android Vector к совместимости

Извилистый путь Android Vector к совместимости

Когда я писал книгу два года назад, я изучал Vector, предложенный Android L, но обнаружил, что он полностью несовместим. Я считаю, что это одна из причин, по которой он не получил широкого распространения. После неустанных усилий Google теперь Vector наконец приветствует А вот и весна.

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

Vector Drawable

Когда был выпущен Android 5.0, Google предоставил поддержку Vector. По сравнению с обычным Drawable, Vector Drawable имеет следующие преимущества:

• Векторные изображения могут быть автоматически адаптированы, нет необходимости устанавливать разные изображения по разрешению
• Векторное изображение может значительно уменьшить размер изображения. Одно и то же изображение, если оно реализовано с помощью Vector, может составлять всего несколько десятых размера PNG.
• Простые в использовании, многие инструменты дизайна могут напрямую экспортировать изображения SVG и преобразовывать их в векторные изображения.
• Мощный, вы можете реализовать очень сложную анимацию без написания большого количества кода.
• Зрелый и стабильный интерфейс получил широкое распространение

Когда изображение Vector было впервые выпущено, оно поддерживало только Android 5.0+. Для системы Android pre-L его нельзя было использовать. Следовательно, можно сказать, что Vector в то время был бесполезен. Однако, начиная с AppCompat 23.2, Google также совместим с системой Android p-View, то есть Vector может использоваться во всех системах выше Android 2.1, нужно только указать com.android.support:appcompat-v7:23.2.0 Вышеупомянутая версия хороша, на данный момент Vector следует рассматривать как ее источник.

Как получить векторное изображение

концепция

Прежде всего, необходимо объяснить две концепции — SVG и вектор.

SVG, а именно векторная графика с масштабируемой векторной графикой, этот формат изображения широко используется во внешнем интерфейсе, подробности см. В WIKI:https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Вектор относится к векторной диаграмме в Android, которая является векторной диаграммой в Android, см.:https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

Таким образом, можно сказать, что Vector — это реализация SVG в Android, поскольку Vector в Android не поддерживает весь синтаксис SVG и в этом нет необходимости, потому что полный синтаксис SVG очень сложен, но уже поддерживаемого синтаксиса SVG достаточно. В частности, синтаксис Path — это почти стандартная конфигурация Vector в Android. Подробнее см.http://www.w3.org/TR/SVG/paths.html

Введение в векторную грамматику

Android совместим с SVG в упрощенном виде. Этот способ заключается в использовании его тега Path. С помощью тега Path можно реализовать почти все другие теги в SVG. Хотя это может быть немного сложнее, все это возможно. Это делается с помощью инструментов, поэтому не беспокойтесь о том, что это будет сложно написать.

Анализ инструкций по пути выглядит следующим образом:

• M = moveto (M X, Y): переместить перо в указанную координату
• L = lineto (L X, Y): провести прямую линию до указанной координатной позиции
• H = горизонтальная линия (H X): провести горизонтальную линию в указанном положении координаты X
• V = вертикальная линия (V Y): проведите вертикальную линию до указанной позиции координаты Y
• C = curveto (C X1, Y1, X2, Y2, ENDX, ENDY): кубическая кривая Бессе
• S = smooth curveto(S X2,Y2,ENDX,ENDY)
• Q = квадратичная кривая Бельзера (Q X, Y, ENDX, ENDY): квадратичная кривая Бельзера
• T = гладкая квадратичная кривая Бельзераto (T ENDX, ENDY): отображение
• A = эллиптическая дуга (A RX, RY, XROTATION, FLAG1, FLAG2, X, Y): дуга
• Z = closepath (): закрыть путь

• Ось координат центрируется в точке (0,0), ось X расположена горизонтально вправо, а ось Y — горизонтально вниз.
• Все инструкции в верхнем и нижнем регистре. Абсолютное позиционирование в верхнем регистре относится к глобальной системе координат; относительное позиционирование в нижнем регистре относится к системе координат родительского контейнера
• Пробел между командой и данными можно не указывать.
• Только одну и ту же инструкцию можно использовать несколько раз.

Обратите внимание, что во время обработки «M» перемещалась только кисть, и ничего не рисовалось. Он также может одновременно рисовать прерывистые линии на заднице.

Что касается этих грамматик, разработчикам не нужно разбираться во всем, но нужно понимать их, а все остальное можно реализовать с помощью инструментов.

Из PNG в SVG

Дизайнерам не составляет труда преобразовать часто используемые изображения PNG в изображения SVG, поскольку большинство инструментов дизайна (PS, Illustrator и т. Д.) Поддерживают экспорт изображений в различных форматах, таких как PNG, JPG. Конечно, он также включает в себя SVG.Поэтому дизайнер может проектировать в точности оригинальным способом, но при окончательном экспорте выберите SVG.

Разработчикам не обязательно учиться использовать эти инструменты дизайна. Разработчики могут использовать некоторые инструменты для самостоятельного преобразования некоторых базовых изображений.http://inloop.github.io/svg2android/ Это такой замечательный веб-сайт, который может конвертировать обычные изображения в Android Vector Drawable онлайн. как показано на картинке:

Или вы также можете использовать редактор SVG для написания изображений SVG, напримерhttp://editor.method.ac/

Используйте Android Studio

Используя Vector Asset в Android Studio, вы можете легко создавать векторные изображения и даже создавать векторные изображения непосредственно из локальных SVG-изображений, как показано на рисунке:

После ввода вы можете сгенерировать векторное изображение, как показано на рисунке:

Путь Google к совместимости

Совместимо только с L +

Вектор — это новая концепция, предложенная в Android L, поэтому вначале она была совместима только с L +.

Совместим с плагином Gradle 1.5

Начиная с Gradle Plugin 1.5, Google поддерживает совместимый метод, то есть на Android L используйте Vector, а в L используйте Gradle для создания изображений PNG из Vector.

После выпуска Android gradle plugin 1.5 была добавлена ​​новая функция, связанная с VectorDrawable. Инструменты сборки Android предоставляют другое решение для обеспечения совместимости. Если скомпилированная версия является версией до 5.0, то инструменты сборки будут генерировать соответствующее изображение PNG из VectorDrawable, так что версия ниже 5.0 использует сгенерированное изображение PNG. , А VectorDrawable используется в версиях выше 5.0. Добавьте конфигурацию generatedDensities в build.gradle, чтобы настроить плотность сгенерированного изображения PNG.

Совместимость AppCompat23.2

Начиная с AppCompat23.2, Google начал поддерживать использование Vector в более ранних версиях.

Статическое векторное изображение

У нас есть много способов получить эти векторы, поэтому, как их использовать, использование Android 5.0 и более поздних версий не рассматривается, это не очень репрезентативно, мы начинаем с совместимости с версией до L.

совместимость с версией pre-L

VectorDrawableCompat полагается на некоторые функции AAPT, которые могут сохранять добавленные идентификаторы атрибутов, используемые последней векторной графикой, чтобы на них можно было ссылаться в версии до L.

Для использования Vector до Android 5.0 требуется aapt для обработки некоторых ресурсов. Этот процесс можно задать в конфигурации aapt. Если такой флаг не включен, android.content будет появляться при работе на устройствах ниже 5.0. res.Resources $ NotFoundException.

Во-первых, вам нужно добавить поддержку совместимости с векторами в скрипт build.gradle проекта. Код выглядит следующим образом:

Используйте плагин Gradle 2.0 или выше:

Используйте Gradle Plugin 2.0 или ниже, Gradle Plugin 1.5 или более:

Как упоминалось ранее, этот метод совместимости фактически закрывает компромисс AAPT с использованием Vector для версии до L, то есть для версии L и выше используйте Vector, а для версии до L используйте Gradle для создания соответствующего изображения PNG. , Массив generatedDensities на самом деле представляет собой массив разрешений изображений PNG, которые необходимо сгенерировать. Это не требуется после использования appcompat.

Конечно, самое главное — добавить поддержку appcompat:

В то же время убедитесь, что вы используете AppCompatActivity вместо обычного Activity.

Векторное изображение

Базовое векторное изображение на самом деле является файлом xml, как показано ниже:

Отобразите как показано:

Здесь нужно объяснить несколько тегов:

• android: width \ android: height: определяет ширину и высоту изображения
• android: viewportHeight \ android: viewportWidth: определяет масштаб разделяемого изображения, например 500 в этом примере, то есть изображение размером 200 dp разделено на 500 частей, а координаты в теге Path позади, все здесь используют координаты после деления система.

Это дает очень хороший эффект, заключающийся в отделении размера изображения от изображения, а затем вы можете изменять размер изображения по своему желанию, не изменяя координаты в PathData.

• Эти атрибуты в android: fillColor: PathData не будут подробно обсуждаться и в основном аналогичны атрибутам рисования Canvas.

Использование в элементах управления

Со статическим векторным изображением его можно использовать в элементе управления.

Можно обнаружить, что мы используем здесь обычный ImageView, который, похоже, не является AppcomatImageView, потому что после использования Appcomat система автоматически преобразует ImageView в AppcomatImageView.

ImageView\ImageButton

Для таких элементов управления, как ImageView, чтобы быть совместимыми с векторными изображениями, вам нужно только заменить предыдущий атрибут android: src на app: srcCompat. Пример кода выглядит следующим образом:

Если задано в коде, код будет следующим:

setBackgroundResource также является API, который может устанавливать Vector

Button

Button не может напрямую использовать app: srcCompat для использования векторного изображения, его нужно использовать через Selector. Сначала создайте два изображения для двух состояний Selector. Код выглядит следующим образом:

Очень просто, просто замените изображение в обычном селекторе на векторное изображение. Затем используйте этот селектор в кнопке:

Тогда запускайте. Если думаете, что он может работать, это слишком наивно. Все говорили, что он совместим. Как тут может быть ямы? Вот яма .

Эта яма на самом деле имеет историческое происхождение. Разработчик Google написал в своем блоге:

First up, this functionality was originally released in 23.2.0, but then we found some memory usage and Configuration updating issues so we it removed in 23.3.0. In 23.4.0 (technically a fix release) we’ve re-added the same functionality but behind a flag which you need to manually enable.

Фактически, их изменение затрагивает такие классы, как DrawableContainers (DrawableContainers, которые ссылаются на другие ресурсы drawables, которые содержат только векторный ресурс), типичным примером которых является Selector (также StateListDrawable). Флаг, упомянутый разработчиком в статье, представляет собой следующий код, который можно разместить перед Activity:

После включения этого флага вы можете нормально использовать DrawableContainers, например Selector. В то же время вы также включаете разрешение на использование составных чертежей, таких как android: drawableLeft, разрешение на использование RadioButton и атрибут src ImageView.

RadioButton

Кнопка RadioButton также может быть определена, код выглядит следующим образом:

Основы динамического вектора

Динамический вектор — это суть Android Vector Drawable

Динамический вектор должен быть реализован с помощью тега animated-vector. Он похож на клей, который склеивает элемент управления и векторное изображение. Базовый код анимированного вектора выглядит следующим образом:

Фактически, есть только два важных момента, на которые нужно обратить внимание: XXXXX1 и XXXXX2. Конкретный пример показан ниже:

Здесь это означает, что целевое изображение доступно для рисования / ic_arrow, а анимации anim_left и anim_right используются для левого и правого соответственно. Атрибут name здесь является атрибутом имени группы или тега пути в статическом векторном изображении.

Тег animated-vector фактически сообщает об ошибке в текущей Android Studio, но это не влияет на компиляцию и запуск.Это ошибка Android Studio.

Целевое изображение

XXXXX1 — это целевое векторное изображение, которое является статическим векторным изображением, например:

Можно обнаружить, что у векторного изображения здесь на один групповой тег больше, чем у того, что мы видели раньше. Групповой тег выполняет две функции:

• Сгруппируйте Путь. Поскольку нам нужно будет анимировать Путь позже, мы можем создать Путь с тем же эффектом анимации в той же Группе.
• Чтобы расширить эффект анимации, один тег пути не имеет атрибутов translateX и translateY, поэтому анимация атрибутов не может использоваться для управления translateY пути, а тег группы присутствует, поэтому нам нужно обернуть связанные элементы тега пути в каждый тег группы. в.

Эффект анимации

XXXXX2 — это фактически анимация, которая будет реализована шаблоном, а эффект анимации — это фактически анимация основного атрибута, например:

Использовать в коде

Проблемы совместимости с динамическим вектором

Проблемы обратной совместимости

Когда дело доходит до совместимости, вы должны упомянуть ямы. Почти все изменения, внесенные для совместимости, оставляют некоторые ямы, которые невозможно заполнить. Динамическая векторная анимация не является исключением, хотя Google использовал Android 2.1 или выше для векторных изображений. Совместима, но есть еще много ограничений для динамической векторной анимации, например:

• Path Morphing, анимация преобразования пути, не может использоваться в версии Android до L.
• Интерполяция пути, интерполятор пути, может использовать системный интерполятор только в версии Android до L и не может быть настроена.
• Анимация пути, то есть анимация пути, обычно заменяется кривыми Безье, поэтому особого воздействия не наблюдается.

Проблемы обратной совместимости

В дополнение к проблемам совместимости в более низких версиях, есть также проблемы совместимости над L-версией, то есть интерфейс AppCompatActivity наследуется. Если srcCompat ImageView установлен напрямую, анимация Path Morphing не может вступить в силу, потому что AppCompatActivity по умолчанию уже используется по умолчанию Используйте ImageViewCompat для преобразования, но AnimatedVectorDrawableCompat не поддерживает анимацию Path Morphing, поэтому она недопустима в интерфейсе AppCompatActivity.

Решение простое, то есть используйте код для добавления анимации в ImageView:

Будьте осторожны, чтобы не использовать AnimatedVectorDrawableCompat.

Извлечь проблемы совместимости строк

Иногда разработчики помещают pathData из векторного изображения в string.xml для краткости кода, а затем ссылаются на строку в векторном изображении.

Однако, если этот метод совместим с моделями ниже 5.0 за счет создания png, будет сообщено об ошибке pathData. Компилятор не будет читать string.xml и может только записать pathData в векторное изображение. То же самое верно и для файла анимации. Жертва совместимости неизвестна.

Другие проблемы совместимости

Другие очень странные, странные и непонятные проблемы совместимости могут быть решены только с помощью папок версий, таких как drawable-v21 и drawable. Создайте два ресурса с одинаковым именем файла в двух папках соответственно, чтобы В версии 21 и выше будут использоваться ресурсы drawable-v21, в то время как другие будут использовать ресурсы drawable.

Расширенный динамический вектор

Хорошо используйте ObjectAnimator

Так называемая расширенная векторная анимация фактически использует некоторые свойства ObjectAnimator, особенно trimPathStart и trimPathEnd для вектора (обратите внимание, что свойство pathData несовместимо с pre-L).

Официальная документация для этих двух атрибутов выглядит следующим образом:

На самом деле, это очень просто. Это перехват изображения. Просто установите масштаб, то есть какая часть изображения рисуется в данный момент, а остальное не прорисовывается. Начало и конец рассчитываются на основе данных начала и конца пути соответственно. Вы можете сослаться на несколько примеров. Понятно.

Понимание морфинга пути

Анимация Path Morph — это продвинутое использование векторной анимации. В конечном итоге это преобразование двух PathData, но это преобразование не является произвольным. Для двух PathData они могут выполнять Path Morph при условии, что они имеют одинаковые номера. Ключевой момент, то есть преобразование двух путей, — это просто изменение координат ключевой точки.После усвоения этого базового принципа очень легко реализовать Path Morph.

Вектор обучения

Я открыл исходный код демонстрационной библиотеки векторной анимации на Github, адрес следующий:

Эта демонстрация разделена на две части: одна часть совместима с версией Android pre-L и векторной анимацией версии L +, другая часть (переключается кнопкой на панели действий) совместима только с анимацией L + Vector.

Каждая векторная анимация в основном состоит из четырех частей, а именно:

• Вектор: ресурс изображения
• Animated-vector: Анимация, связыватель изображений
• ObjectAnimator: Анимационные ресурсы
• Код: запуск анимации

Каждая векторная анимация анализируется через эти четыре части, и это очень понятно.

Вот рендеринг демонстрации:

Проблемы с производительностью вектора

Некоторые читатели оставили сообщение в конце статьи с вопросом о производительности VectorDrawable Вот объяснение.

1. Эффективность рисования растрового изображения не обязательно выше, чем у вектора. У них есть определенный баланс. Когда вектор относительно прост, его эффективность должна быть выше, чем у растрового изображения. Следовательно, чтобы обеспечить высокую эффективность вектора, вектор должен быть проще, а PathData еще больше. Стандартные и оптимизированные. Когда векторные изображения становятся очень сложными, требуется растровое изображение.
2. Vector подходит для небольших ICON, таких как ICON, Button, ImageView, или требуемых эффектов анимации. Поскольку Bitmap имеет функцию кеширования в графическом процессоре, а Vector — нет, векторные изображения нельзя часто перерисовывать.
3. Когда векторное изображение слишком сложное, следует обращать внимание не только на эффективность рисования, но и на эффективность инициализации, которая также является важным фактором.
4. Скорость загрузки SVG будет выше, чем у PNG, но скорость рендеринга будет ниже, чем у PNG. В конце концов, PNG имеет аппаратное ускорение, но в среднем увеличение скорости загрузки компенсирует недостаток скорости рисования.

В этом видео Google объясняется эффективность Vector, вы можете ссылаться на следующее:

Источник