<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Рисование - Helianthus</title>
</head>
<body>
<div class="navigation">
<p><a href="index.html">Helianthus</a></p>
<p><a href="common.html">Запуск и общие функции</a></p>
<p><a href="input.html">Клавиатура и мышь</a></p>
<p><a href="drawing.html">Рисование</a></p>
<p><a href="sprites.html">Спрайты</a></p>
<p><a href="groups.html">Группы спрайтов</a></p>
<p><a href="camera.html">Камера</a></p>
<p><a href="sound.html">Звук</a></p>
<hr />
<p><a href="functions.html">Все функции</a></p>
</div>
<div class="content">
<h1>Рисование</h1>
<p>Перечисленные ниже функцию позволяют рисовать на экране различные фигуры и текст.</p>
<p>Для указания цвета используется его текстовое наименование.<br />
Вот список наименований:<br />
<i> "transparent",</i><br />
<i> "black",</i><br />
<i> "white",</i><br />
<i> "gray",</i><br />
<i> "red",</i><br />
<i> "green",</i><br />
<i> "blue",</i><br />
<i> "yellow",</i><br />
<i> "magenta",</i><br />
<i> "cyan",</i><br />
<i> "yellow",</i><br />
<i> "magenta",</i><br />
<i> "cyan",</i><br />
<i> "brown".</i></p>
<p>Также поддерживаются цвета в кодировка #RRGGBBAA:<br />
#000000 — чёрный;<br />
#ff0000 — красный;<br />
#0000ff — синий;<br />
#00ff00aa — зелёный полупрозрачный.</p>
<p>Вы можете сгенерировать текстовое наименования для любого цвета по его числовым составляющим при помощи функций <a href="drawing.html#rgb">rgb</a> и <a href="drawing.html#rgba">rgba</a>.</p>
<p>Для рисования линий и многоугольников используются функции <a href="drawing.html#moveTo">moveTo</a>, <a href="drawing.html#lineTo">lineTo</a>, <a href="drawing.html#closePath">closePath</a>, <a href="drawing.html#strokePath">strokePath</a>. При этом функции <a href="drawing.html#stroke">stroke</a> и <a href="drawing.html#fill">fill</a> задают цвет линий и заливки. Функция <a href="drawing.html#strokeWeight">strokeWeight</a> задаёт толщину линий. Вот пример рисования красного треугольника с чёрным контуром:</p>
<pre>
fill("red");
stroke("black");
strokeWeight(10);
moveTo(100, 300);
lineTo(300, 300);
lineTo(50, 200);
closePath();
</pre>
<p>Также существуют отдельные функции для рисования прямоугольников, линий, эллипсов и дуг окружности, смотрите описания функций ниже.</p>
<p>Для вывода текста используются функции <a href="drawing.html#text">text</a>, <a href="drawing.html#textAlign">textAlign</a>, <a href="drawing.html#textFont">textFont</a> и <a href="drawing.html#textSize">textSize</a>. Смотрите их описание ниже.</p>
<h2>Функции:</h2>
<h3 id="background">void background(const char *color);</h3>
<p>Установить цвет фона. Начиная со следующего все кадры будут рисоваться на выбранном фоне.</p>
<h4>Параметры:</h4>
<p><i>color</i> — текстовое наименование цвета.</p>
<h3 id="fill">void fill(const char *color);</h3>
<p>Установить цвет заливки. После вызова этой функции все фигуры будут заполняться выбранным цветом. См. также <a href="drawing.html#noFill">noFill</a>.</p>
<h4>Параметры:</h4>
<p><i>color</i> — текстовое наименование цвета.</p>
<h3 id="noFill">void noFill();</h3>
<p>Отключить заливку фигур. После вызова этой функции все фигуры будут рисоваться без заполнения. См. также <a href="drawing.html#fill">fill</a>.</p>
<h3 id="stroke">void stroke(const char *color);</h3>
<p>Установить цвет контура. После вызова этой функции все фигуры будут рисоваться с контуром выбранного цвета. Также эта функция задаёт цвет рисования текста См. также <a href="drawing.html#noStroke">noStroke</a>.</p>
<h4>Параметры:</h4>
<p><i>color</i> — текстовое наименование цвета.</p>
<h3 id="noStroke">void noStroke();</h3>
<p>Отключить рисование контура. После вызова этой функции все фигуры будут рисоваться без прорисовки контура. См. также <a href="drawing.html#stroke">stroke</a>.</p>
<p><b>Важно: </b>Так как текст рисуется цветом контура, эта функция полностью отключает вывод текста.</p>
<h3 id="strokeWeight">void strokeWeight(double weight);</h3>
<p>Установить толщину линий и контуров. После вызова этой функции все линии и контуры будут рисоваться с заданной толщиной.</p>
<h4>Параметры:</h4>
<p><i>weight</i> — толщина линии.</p>
<h3 id="rgb">char* rgb(double r, double g, double b);</h3>
<p>Функция возвращает текстовое наименование цвета для заданных числовых значений яркости красной, зелёной и синей составляющих.</p>
<p>Параметры:</p>
<p><i>r</i> — яркость красной составляющей цвета, дробное число от 0 до 1;<br />
<i>g</i> — яркость зелёной составляющей цвета, дробное число от 0 до 1;<br />
<i>b</i> — яркость синей составляющей цвета, дробное число от 0 до 1.</p>
<h3 id="rgba">char* rgba(double r, double g, double b, double a);</h3>
<p>Функция возвращает текстовое наименование цвета для заданных числовых значений яркости красной, зелёной и синей составляющих, а также прозрачности.</p>
<h4>Параметры:</h4>
<p><i>r</i> — яркость красной составляющей цвета, дробное число от 0 до 1;<br />
<i>g</i> — яркость зелёной составляющей цвета, дробное число от 0 до 1;<br />
<i>b</i> — яркость синей составляющей цвета, дробное число от 0 до 1;<br />
<i>a</i> — прозрачность, дробное число от 0 до 1, при этом 0 — цвет полностью прозрачный, 1 — цвет непрозрачный.</p>
<h3 id="moveTo">void moveTo(double x, double y);</h3>
<p>Начать рисование новой фигуры, и задать начальное положение пера. Перед запуском этой функции убедитесь что вы завершили рисование предыдущей фигуры функцией <a href="drawing.html#closePath">closePath</a> или <a href="drawing.html#strokePath">strokePath</a>.</p>
<h4>Параметры:</h4>
<p><i>x</i>, <i>y</i> — координаты в которые будет помещено перо.</p>
<h3 id="lineTo">void lineTo(double x, double y);</h3>
<p>Наметить линию от текущих координат пера до заданной точки, а также перевести перо в указанною точку. Настоящая линия будет нарисована позже при помощи функции <a href="drawing.html#closePath">closePath</a> или <a href="drawing.html#strokePath">strokePath</a>. См. также функцию <a href="drawing.html#moveTo">moveTo</a>.</p>
<p><b>Важно:</b> если положение пера не было задано, то линия не намечается, вместо этого просто задаётся начальное положение пера.</p>
<h3 id="resetPath">void resetPath();</h3>
<p>Убрать все намеченные функцией <a href="drawing.html#lineTo">lineTo</a> или <a href="drawing.html#arcPath">arcPath</a> линии и отменить их рисование. Положение пера также забывается.</p>
<h3 id="closePath">void closePath();</h3>
<p>Завершить контур соединив начальную и конечную точки линией и нарисовать заполненную фигуру с контуром. Цвета заполнения и контура задаются функциями <a href="drawing.html#fill">fill</a> и <a href="drawing.html#stroke">stroke</a>. См. также функции <a href="drawing.html#moveTo">moveTo</a> и <a href="drawing.html#lineTo">lineTo</a>. После вывода фигуры на экран положение пера и все намеченные линии забываются.</p>
<h3 id="strokePath">void strokePath();</h3>
<p>Нарисовать ранее намеченные линии. В отличии от функции <a href="drawing.html#closePath">closePath</a>, данная функция не соединяет начальную и конечную точки, а просто рисует только те линии которые были намечены. Цвет контура задаётся функцией <a href="drawing.html#stroke">stroke</a>, а вот заполнение цветом не производится. После вывода намеченных линий на экран, их расположение и позиция пера забываются.</p>
<h3 id="rect">void rect(double x, double y, double width, double height);</h3>
<p>Нарисовать прямоугольник. Цвета заполнения и контура задаются заранее функциями <a href="drawing.html#fill">fill</a> и <a href="drawing.html#stroke">stroke</a>.</p>
<h4>Параметры:</h4>
<p><i>x</i>, <i>y</i> — координаты левого верхнего угла прямоугольника;<br />
<i>width</i> — ширина прямоугольника;<br />
<i>height</i> — высота прямоугольника.</p>
<h3 id="ellipse">void ellipse(double x, double y, double width, double height);</h3>
<p>Нарисовать эллипс. Эллипс рисуется таким чтобы от вписался в ограничивающий прямоугольник (см. функцию <a href="drawing.html#rect">rect</a>). Следовательно для того чтобы нарисовать окружность нужно передать одинаковую ширину и высоту ограничивающего прямоугольника. Цвета заполнения и контура задаются заранее функциями <a href="drawing.html#fill">fill</a> и <a href="drawing.html#stroke">stroke</a>.</p>
<h4>Параметры:</h4>
<p><i>x</i>, <i>y</i> — координаты левого верхнего угла ограничивающего прямоугольника;<br />
<i>width</i> — ширина ограничивающего прямоугольника;<br />
<i>height</i> — высота ограничивающего прямоугольника.</p>
<h3 id="arc">void arc(double x, double y, double w, double h, double start, double stop);</h3>
<p>Нарисовать дугу эллипса заданного ограничивающим прямоугольником. Дуга задаётся значением начального и конечного угла. Цвет линии задаётся функцией <a href="drawing.html#stroke">stroke</a>.</p>
<p>Параметры:</p>
<p><i>x</i>, <i>y</i> — координаты левого верхнего угла ограничивающего прямоугольника;<br />
<i>width</i> — ширина ограничивающего прямоугольника;<br />
<i>height</i> — высота ограничивающего прямоугольника;<br />
<i>start</i> — начальный угол в градусах;<br />
<i>end</i> — конечный угол в градусах.</p>
<h3 id="arcPath">void arcPath(double x, double y, double w, double h, double start, double stop);</h3>
<p>Наметить дугу эллипса заданного ограничивающим прямоугольником так как если бы она рисовалась функциями <a href="drawing.html#moveTo">moveTo</a> и <a href="drawing.html#lineTo">lineTo</a>. Дуга задаётся значением начального и конечного угла. Окончательное рисование будет выполнено после вызова функции <a href="drawing.html#closePath">closePath</a> или <a href="drawing.html#strokePath">strokePath</a>.</p>
<h4>Параметры:</h4>
<p><i>x</i>, <i>y</i> — координаты левого верхнего угла ограничивающего прямоугольника;<br />
<i>width</i> — ширина ограничивающего прямоугольника;<br />
<i>height</i> — высота ограничивающего прямоугольника;<br />
<i>start</i> — начальный угол в градусах;<br />
<i>end</i> — конечный угол в градусах.</p>
<h3 id="line">void line(double x1, double y1, double x2, double y2);</h3>
<p>Провести прямую линию от первой указанной точки до второй. Цвет линии задаётся функцией <a href="drawing.html#stroke">stroke</a>.</p>
<p>Параметры:</p>
<p><i>x</i><i>1</i>, <i>y</i><i>1</i> — координаты первой точки;<br />
<i>x</i><i>2</i>, <i>y</i><i>2</i> — координаты второй точки.</p>
<h3 id="point">void point(double x, double y);</h3>
<p>Нарисовать точку в указанных координатах. Цвет задаётся функцией <a href="drawing.html#stroke">stroke</a>. Диаметр точки задаётся функцией <a href="drawing.html#strokeWeight">strokeWeight</a>.</p>
<h4>Параметры:</h4>
<p><i>x</i>, <i>y</i> — координаты точки.</p>
<h3 id="regularPolygon">void regularPolygon(double x, double y, int sides, double size);</h3>
<p>Нарисовать правильный многоугольник заданного размера с центром в указанной точке. Цвета заполнения и контура задаются функциями <a href="drawing.html#fill">fill</a> и <a href="drawing.html#stroke">stroke</a>.</p>
<p>Параметры:</p>
<p><i>x</i>, <i>y</i> — координаты центра многоугольника;<br />
<i>sides</i> — количество сторон;<br />
<i>size</i> — размер многоугольника — диаметр описанной окружности.</p>
<h3 id="text">void text(const char *text, double x, double y);</h3>
<p>Вывести текст в заданной точке. Расположение текста относительно указанной точки задаётся функцией <a href="drawing.html#textAlign">textAlign</a>. Шрифи и размер задаются функциями <a href="drawing.html#textFont">textFont</a> и <a href="drawing.html#textSize">textSize</a>. Цвет текста задаётся функцией <a href="drawing.html#stroke">stroke</a>.</p>
<h4>Параметры:</h4>
<p><a href="drawing.html#text">text</a> — текст для вывода;<br />
<i>x</i>, <i>y</i> — координаты начальной точки.</p>
<h3 id="textAlign">void textAlign(HAlign hor, VAlign vert);</h3>
<p>Установить расположение текста относительно начальной точки (см. функцию <a href="drawing.html#text">text</a>)</p>
<h4>Параметры:</h4>
<p><i>hor</i> — горизонтальное расположение начальной точки текста, может принимать значения:<br />
<i>HALIGN_LEFT</i> — начальная точка находится по левому краю текста;<br />
<i>HALIGN_CENTER</i> — начальная точка находится в середине текста;<br />
<i>HALIGN_RIGHT</i> — начальная точка находится по правому краю текста.<br />
<i>vert</i> — вертикальное расположение начальной точки текста, может принимать значения:<br />
<i>VALIGN_TOP</i> — начальная точка находится по верхнему краю текста;<br />
<i>VALIGN_CENTER</i> — начальная точка находится в середине текста;<br />
<i>VALIGN_BOTTOM</i> — начальная точка находится по нижнему краю текста.</p>
<h3 id="textFont">void textFont(const char *font);</h3>
<p>Установить шрифт для текста (см. функцию <a href="drawing.html#text">text</a>). Указанный шрифт должен быть установлен в системе. Можете посмотреть списки шрифтов в любом установленном на вашем компьютере текстовом редакторе.</p>
<h4>Параметры:</h4>
<p><i>font</i> — текстовое наименование шрифта.</p>
<h3 id="textSize">void textSize(double size);</h3>
<p>Установить размер текста (см. функцию <a href="drawing.html#text">text</a>).</p>
<h4>Параметры:</h4>
<p><i>size</i> — размер текста в пикселях.</p>
</div>
</body>
</html>