Espruino:Справочник по API/Класс Graphics/drawImage(): различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
(Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= ==Синтакс...»)
 
Нет описания правки
Строка 3: Строка 3:
{{Myagkij-редактор}}
{{Myagkij-редактор}}


=<ref>[ www.espruino.com - ]</ref>=
=Функция Graphics.drawImage()<ref>[https://www.espruino.com/Reference#t_l_Graphics_drawImage www.espruino.com - function Graphics.drawImage]</ref>=


==Синтаксис==
==Синтаксис==


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript" enclose="div">
 
function Graphics.drawImage(image, x, y, options)
</syntaxhighlight>
</syntaxhighlight>


==Параметры==
==Параметры==


*  '''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 должен иметь следующий формат:


<syntaxhighlight lang="javascript" enclose="div">
{
  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});
</syntaxhighlight>


== Примеры ==
== Примеры ==

Версия от 20:14, 3 января 2021

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


Функция 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});

Примеры

См.также

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