Skip to content

Отрисовка картинки для кнопки "Поделиться"

MikelDementyev edited this page Nov 24, 2018 · 4 revisions

Создание картинки происходит по следующему алгоритму:

  • Во-первых, необходимо создать конечный Bitmap финального размера, на который мы будем размещать блоки с необходимой нам информацией. В нашем примере таким bitmap-ом является finishBmp, с помощью которого мы создаем переменную типа Canvas и объявляем функцию Paint(), которая необходима для рисования.

finishBmp = Bitmap.createBitmap(nWidth, nHeight + 290, Bitmap.Config.ARGB_8888)

NWidth и NHeight - ширина и высота первого слайда.

290 - добавка к высоте, в которой будут лежать блоки информации, которую на необходимо отобразить на картинке.

val canvas = Canvas(finishBmp)

val paint = Paint()

  • Во-вторых, так как в верхней части картинки должно быть изображение первого слайда, добавим её, используя объявленные выше переменную canvas и функцию Paint():

canvas.drawBitmap(bmpBase, 0f, 0f, paint)

bmpBase - Bitmap, в котором хранится изображения первого слайда презентации.

0f и 0f - координаты относительно верхнего левого угла finishBmp, с которого начнется отрисовка картинки.

  • В-третьих, начнем создание блоков с информацией, которую необходимо разместить под изображением первого слайда.

Создадим блок, содержащий название данной презентации. Для этого, объявим новый Bitmap (nameBmp) и новую переменную типа Canvas (nameC).

val nameBmp = Bitmap.createBitmap(nWidth, 40, Bitmap.Config.ARGB_8888)

nWidth - стандартная ширина, которая является постоянной, так как соответствует ширине изображения первого слайда, размещенного выше, от размеров которого мы отталкиваемся.

40 - высота, на которой будет размещена необходимая нам информация о названии презентации.

val nameC = Canvas(nameBmp)

Следующим шагом будет создание функции типа Paint() (whitePaint), с помощью которой мы будем закрашивать белым цветом блоки, на которых в будущем будет размещена необходимая нам информация.

val whitePaint = Paint()

whitePaint.style = Paint.Style.FILL

Присваиваем переменной типа Paint() стиль закрашивания: заполнение.

whitePaint.color = Color.WHITE

Выбираем цвет заполнения: белый.

Затем нам необходимо закрасить белым цветом наш новый блок, который в будущем будет содержать название данной презентации. Для этого применим функцию drawPaint() к созданной выше переменной типа Canvas (nameC), которая в качестве аргумента принимаю переменную типа Paint (whitePaint):

nameC.drawPaint(whitePaint)

Одним из последних этапов будет создание новой новой переменной типа Paint (namePaint) для рисования текста, который будет содержать название презентации, и присвоение ей необходимых нам свойств:

val namePaint = Paint()

namePaint.style = Paint.Style.FILL

Стиль закрашивания: заполнение.

namePaint.color = Color.BLACK

Цвет закрашивания: черный.

namePaint.isAntiAlias = true

Теперь весь текст, который мы в будущем нарисуем, будет подчеркнутый.

namePaint.textSize = 24f

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

Наконец, мы рисуем на созданном в самом начале блоке название презентации:

nameC.drawText(presName, 20f, 30f, namePaint)

presName - название презентации, которое берется из базы данных.

Замечание: Создание остальных блоков с другой необходимой нам информацией происходит в аналогичном формате, поэтому опущу их подробное описание.

  • В-четвёртых, добавим блок с информацией на финальный Bmp-файл:

canvas.drawBitmap(nameBmp, 0f, nHeight.toFloat(), paint)

nHeight.toFloat() - смещение относительно верха финальной картинки. Оно именно такое, потому что до значения равного nHeight располагается изображение первого слайда презентации. Соответственно после него (еще ниже) будет добавлен следующий созданный нами блок.

  • Наконец, преобразуем картинку из формата Bitmap и сохраним на устройстве:

url = MediaStore.Images.Media.insertImage(this.contentResolver, finishBmp, "title", null)

url - путь к данной картинке.


Теперь рассмотрим шаги, которые необходимо выполнить для того, чтобы добавить еще один блок к уже существующей картинке:

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

  • Затем, на полученное на предыдущем шаге значение увеличим высоту финального bmp-файла (finishBmp).

  • Наконец, создадим блок с необходимой нам информацией и дорисуем его под уже имеющимися в finishBmp. Как это сделать - описано на предыдущих шагах.

Clone this wiki locally