Espruino:Справочник по API/Класс Graphics/drawImage(): различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) (Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= ==Синтакс...») |
Myagkij (обсуждение | вклад) Нет описания правки |
||
Строка 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});
Примеры
См.также
Внешние ссылки