Android canvas scale image

Класс Canvas

Класс android.graphics.Canvas (Холст) предоставляет методы для рисования, которые отображают графические примитивы на исходном растровом изображении. При этом надо сначала подготовить кисть (класс Paint), который позволяет указывать, как именно графические примитивы должны отображаться на растровом изображении (цвет, обводка, стиль, сглаживание шрифта и т.д.).

Android поддерживает полупрозрачность, градиентные заливки, округлённые прямоугольники и сглаживание. Из-за ограниченных ресурсов векторная графика пока что не поддерживается, вместо этого используется традиционная растровая перерисовка.

Canvas работает с пикселями, поэтому следует заботиться о конвертации единиц dp в px и наоборот при необходимости. Начало координат находится в левом верхнем углу.

Получить доступ к холсту можно через объект Bitmap или компонент View. Очень часто разработчики создают свой собственный компонент, наследуясь от View, и рисуют на его холсте для реализации своих замыслов.

Методы

Ниже представлены некоторые методы класса Canvas, которые что-то рисуют.

• drawARGB()/drawRGB()/drawColor(). Заполняет холст сплошным цветом.
• drawArc(). Рисует дугу между двумя углами внутри заданной прямоугольной области.
• drawBitmap(). Рисует растровое изображение на холсте. Вы можете изменять внешний вид целевой картинки, указывая итоговый размер или используя матрицу для преобразования.
• drawBitmapMesh(). Рисует изображение с использованием сетки, с помощью которой можно управлять отображением итоговой картинки, перемещая точки внутри неё.
• drawCircle(). Рисует круг/окружность с определённым радиусом вокруг заданной точки.
• drawLine(s)(). Рисует линию (или последовательность линий) между двумя точками.
• drawOval(). Рисует овал на основе прямоугольной области.
• drawPaint(). Закрашивает весь холст с помощью заданного объекта Paint.
• drawPath(). Рисует указанный контур, используется для хранения набора графических примитивов в виде единого объекта.
• drawPicture(). Рисует объект Picture внутри заданного прямоугольника.
• drawPoint(). Рисует точку в заданном месте.
• drawPosText(). Рисует текстовую строку, учитывая смещение для каждого символа.
• drawRect(). Рисует прямоугольник.
• drawRoundRect(). Рисует прямоугольник с закруглёнными углами.
• drawText(). Рисует текстовую строку на холсте. Шрифт, размер, цвет и свойства отображения текста задаются в соответствующем объекте Paint.
• drawTextOnPath(). Рисует текст, который отображается вокруг определённого контура.
• drawVertices(). Рисует набор треугольников в виде совокупности вершинных (вертексных) точек.
• rotate() и restore(). Вращение холста
• Методы scale() и translate(). Изменение и перемещение координатной системы

Мы уже изучали основы рисования в первом месяце обучения (Работаем с графикой. Основы). Можно вернуться к этому проекту, закомментировать код вывода графики и продолжить изучение рисования при помощи методов класса Canvas.

Метод drawArc()

В API 21 появилась перегруженная версия метода, в котором можно указать координаты двух точек вместо RectF.

Метод drawArc() позволяет рисовать дуги и сектора. Ниже приводится код для трёх вариантов: сектор с заливкой (похож на PacMan), сектор без заливки (контур) и часть дуги:

Метод drawBitmap()

Вывести готовое изображение просто.

Метод drawCircle()

Первые два аргумента определяют координаты центра окружности/круга, следующий аргумент — её радиус в пикселах, последний — объект Paint. В зависимости от выбранного стиля кисти можно нарисовать закрашенный круг или только окружность.

Нарисуем зелёный круг.

drawLine(s)()

Простой метод — указываем начальные и конечные координаты отрезка.

Метод drawOval()

Метод drawOval() рисует овалы. Естественно, если вы зададите одинаковые размеры ширины и высоты, то получите круг/окружность.

Если вам нужно наклонить овал в ту или иную сторону, то поверните холст на требуемый угол с помощью метода rotate(). Не забудьте потом повернуть холст обратно, что следующие фигуры выводились нормально.

Повернём синий овал из предыдущего примера:

В API 21 появилась перегруженная версия метода, в котором можно указать координаты двух точек вместо RectF:

Метод drawPaint()

Метод позволяет закрасить весь холст одним цветом.

Метод drawRect()

У метода существует три перегруженные версии для рисования прямоугольника. Рассмотрим один из них:

Метод drawRoundRect()

Для рисования прямоугольников с закруглёнными углами используется метод drawRoundRect (RectF rect, float rx, float ry, Paint paint).

В параметрах указываются ограничивающий прямоугольник, радиусы овалов для скругления углов и кисть.

Реализуем три разных способа:

В API 21 появилась перегруженная версия метода, в котором можно указать координаты двух точек вместо RectF.

Метод drawPath()

Для рисования соединённых отрезков можно использовать метод drawPath(), указав в параметрах настройки для рисования и массив координат точек. Для удобства добавим в класс Draw2D новый класс Pt, который позволит быстро создать массив точек с заданными координатами. Далее настраиваем объекты для рисования и формируем путь через созданный массив. В результате получим кошкин дом.

Путь можно составлять не только из точек, но и из фигур, например, дуг. Сначала формируем дугу, добавляем её в путь при помощи метода Path.addArc(), повторяем операцию снова несколько раз, а в конце выводим окончательный вариант:

Можно нарисовать символ парашюта:

Метод drawPoint()

Простой метод для рисования точки в нужно месте указанной кистью. Для координат используются значения типа float.

Метод drawText()

С помощью метода drawText() можно выводить текст в заданной позиции. Добавим сначала несколько эффектов, чтобы казалось, что текст парит над поверхностью:

Центрируем текст

Есть небольшая тонкость, если вам захочется вывести текст в центре холста. Проблем с вычислением центра холста и размером текста нет. Центр можно найти, разделив пополам значения ширины и высоты холста. А ширину и высоту текста можно узнать через метод кисти getTextBounds(), который возвращает ограничивающий прямоугольник.

Но вычисление ширины текста через textBounds.width(); приводит к небольшому смещению. Лучше воспользоваться методом кисти measureText(). Тогда текст отцентрируется точнее.

Пример на Kotlin с дополнительной информацией.

Методы rotate() и restore()

Холст во время рисования можно вращать. Во многих ситуациях такой приём менее затратный по ресурсам, чем рисование самого объекта под углом. Суть в следующем: вы поворачиваете холст на нужный градус, рисуете фигуру, а затем возвращаете холст на место при помощи метода restore(), чтобы следующие фигуры рисовались в ожидаемых местах. Иначе остальные фигуры будут рисоваться уже относительно поворота.

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

Вращение происходит вокруг начальной точки холста (0, 0). Но можно также использовать перегруженную версию метода rotate(float degrees, float px, float py), в которой можно указать координаты точки поворота.

Методы scale() и translate()

Стандартная система координат начинает свой отсчёт с верхнего левого угла. Иногда, для рисования сложных фигур удобнее назначить свою систему координат. Например, для рисования циферблата часов удобнее рисовать относительно центра экрана в диапазоне от -1 до 1.

Чтобы установить свою систему координат, нужно произвести трансформацию. В следующем примере мы установим координаты в диапазоне от 0 до 10 и нарисуем график в стандартном виде из точки 0,0 в левом нижнем углу в точку 10,10 в верхнем правом углу.

Для наглядности я добавил на оси несколько точек. Следует обратить внимание, что мы задали диапазон от 0 до 10 и все размеры должны масштабироваться в новых величинах, в том числе и ширина обводки в методе setStrokeWidth(). Поэтому значения должны быть достаточно маленькими, иначе толщина обводки может просто оказаться больше самой фигуры. Кстати, в некоторых случаях с текстом и другими методами рисование масштабирование может сыграть злую шутку и дробные значения не позволят увидеть текст и некоторые линии. В этих случаях приходиться создавать цепочку преобразований, когда временно масштаб увеличивается до нормальных размеров, рисуется текст с подходящим размером шрифта, затем опять всё уменьшается и т.д. Это долгая история.

Источник

Canvas – масштабирование, изменение и масштабирование на Android

В настоящее время я реализую функцию рисования на изображении webview (слон ниже). У меня нет проблем с этим, но функция масштабирования делает некоторые фанки (второе изображение ниже) на чертеже. Когда я увеличиваю масштаб, рисунок не масштабируется, а скорее сдвигается. Рисование при увеличении также не работает. Мой код ниже:

Изменить : мне удалось получить холст для перерисовки с масштабированием с использованием масштабного коэффициента GestureDetector. Кроме того, у меня есть переключатель, который переключается с управления чертежом на масштабирование / веб-просмотр. Проблема, с которой я сталкиваюсь, заключается в том, что двойное нажатие на WebView не вызывает жест onScale. Это означает, что холст не перерисовывается и не переключается на масштаб.

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

Я реализовал это поведение, но несколько иначе. Я использовал матрицу для обработки всех масштабирования и прокрутки (и вращения в моем случае). Он обеспечивает аккуратный код и работает как часы. Однако я не знаю, что вызывает ваше фанковое поведение.

Храните матрицу и другой путь в качестве участников:

В onDraw; Пропустите сохранение холста, вместо этого:

Хороший способ выполнить все различные эффекты, которые вы пытаетесь сделать очень простым способом, – использовать метод холста

Canvas.drawBitmap (растровое изображение Bitmap, Rect src, Rect dst, Paint paint);

Этот метод позволяет вам взять все исходное растровое изображение или только небольшой образец его (Rect src) и спроектировать его по своему желанию (Rect dst), выполняющего масштабирование / перевод матричных вычислений автоматически для вас, как показано в примере ниже :

Этот пример просто масштабирует / масштабирует все изображение …

И этот пример отображает только образец изображения и показывает его «эффект внутреннего масштабирования»,

Используя эти объекты src / dst, вы можете сделать практически любой эффект, который вы хотите на Android, – это простой и действительно мощный инструмент

Надеюсь это поможет.

Можете ли вы попытаться нарисовать дорожки только один раз и сохранить масштабирование ответственности самого холста

Источник

Android ImageView ScaleType: A Visual Guide

If you’re anything like me, you are really, really, ridiculously good looking. But you’re also probably a tad forgetful. So when it comes time to scale an image in an ImageView , you cannot for the life of you remember what all the different ScaleType s actually look like on the screen. So, you spend the next 10-15 minutes building and rebuilding your app with each and every scale type to see what they all look like. Then you inevitably forget the difference between two of them and start the whole process all over again. As the kids say, “I gotchu fam”.

Below are screenshots of all the different ScaleType s placed side-by-side. And below that are all the ScaleType definitions copy and pasted directly from the official Android docs. And even further below those is a helpful tip for those brave souls who make it to the end of this post 🙂

Scale Types

The full descriptions of each ScaleType from the official Android documentation.

CENTER

Center the image in the view, but perform no scaling.

CENTER_CROP

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

CENTER_INSIDE

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

FIT_CENTER

Scale the image using Matrix.ScaleToFit.CENTER

Matrix.ScaleToFit.CENTER : Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.

FIT_END

Scale the image using Matrix.ScaleToFit.END

Matrix.ScaleToFit.END : Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.

FIT_START

Scale the image using Matrix.ScaleToFit.START

Matrix.ScaleToFit.START : Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.

FIT_XY

Scale the image using Matrix.ScaleToFit.FILL

Matrix.ScaleToFit.FILL : Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.

MATRIX

Scale using the image matrix when drawing.

Adjust View Bounds

While not technically an ImageView.ScaleType this will come in handy. If you notice with CENTER_INSIDE , FIT_CENTER , FIT_END and FIT_START the actual bounds of the ImageView are much larger than the scaled image. To set the bounds of the ImageView to the height of the image inside, use android:adjustViewBounds=»true” in your XML. It looks like this:

If you enjoyed this post, you might also like:

Mobile design and development services for every stage of your app

We design and build iOS, Android, and cross-platform React Native apps for startups and established businesses.

© 2021 thoughtbot, inc. The design of a robot and thoughtbot are registered trademarks of thoughtbot, inc. Privacy Policy

Источник