Espruino:Справочник по API/Класс Graphics/drawImage()

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Функция Graphics.drawImage()[1]

Синтаксис

function Graphics.drawImage(image, x, y, options)

Параметры

  • image – изображение, которое надо нарисовать: строка или объект (см. ниже)
  • x – смещение по оси X для отрисовки изображения
  • y – смещение по оси Y для отрисовки изображения
  • options – объект с настройками вращения, масштабирования и пр. (см. ниже)

Возвращаемое значение

Объект Graphics, на котором была вызвана эта функция, чтобы сделать цепочку вызовов.

Описание

Рисует изображение на заданной позиции.

Изображением может быть:

  • Объект в формате { width : int, height : int, bpp : optional int, buffer : ArrayBuffer/String, transparent: optional int, palette : optional Uint16Array(2/4/16) }
    • bpp – количество битов на пиксель (по умолчанию – 1)
    • transparent – цвет, который будет считаться прозрачным (если задан)
    • palette – цветовая палитра, которую каждый пиксель будет искать в первую очередь
  • Строка, где первые несколько байт – это width,height,bpp,[transparent,]image_bytes.... Если задан прозрачный цвет, самый старший бит bpp должен быть «1».

О цветовом разрешении:

  • Если изображение 1-битное, будут использованы основной/фоновый цвета объекта Graphics.
  • Если в img.palette задан Uint16Array или 2/4/16 элементов, цветовые данные будут искаться в заданной палитре.
  • На Bangle.js 2-битные изображения будут сочетанием фонового (0) и основного (1) цветов.
  • На Bangle.js 4-битные изображения используют 16-цветовую палитру Apple Mac.
  • На Bangle.js 8-битные изображения используют 216-цветовую палитру Web Safe.
  • В противном случае цветовые данные будут скопированы как есть. Bitmap-изображения рендерятся по принципу «первый – самый старший бит».

Если задан аргумент options, функция drawImage() позволит рендерить изображения любого масштаба и под любым углом. Если задана настройка options.rotate, она отцентрирует изображение по x,y. Объект options должен иметь следующий формат:

{
  rotate : float, // то, насколько нужно повернуть изображение
                  // (в радианах; по умолчанию – 0)
  scale : float,  // то, насколько нужно отмасштабировать изображение 
                  // (по умолчанию – 1)
}

Например:

// в верхней левой части экрана:
g.drawImage(img,0,0);
// в верхней левой части экрана, увеличено в 2 раза:
g.drawImage(img,0,0,{scale:2});
// в центре экрана, увеличено в 2 раза, поворот 45 градусов:
g.drawImage(img, g.getWidth()/2, g.getHeight()/2,
            {scale:2, rotate:Math.PI/4});

Примеры

См.также

Внешние ссылки