вторник, 24 ноября 2009 г.

Рисование



Вот такое простое название статьи, но точно соответствующее её сути. Сегодня мне хотелось бы рассказать об осуществлении возможности рисования в программе на HiAsm.

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

Реализация рисования в программе не сложна, но нужно, опять же, понимать, какое событие какие действия должно вызывать. Пока сделаем, чтобы в программе можно было просто рисовать карандашом от руки, без всяких других действий. Обычно это делается нажатием левой кнопки мыши на холсте и ведением его в нужном направлении. Отсюда встаёт задача: сделать так, чтобы при ведении мыши с нажатой левой кнопкой отрисовывалась линия.



Самый главный здесь компонент - Img_line, который и занимается отрисовкой линии на компоненте PaintBox (он специально для этого предназначен). У PaintBox есть два важных события: onMouseDown и onMouseMove. Первое происходит при нажатии мышью на компоненте, а второе - при передвижении мыши над ним (если быть точнее, то после каждого передвижения, при этом если скорость передвижения небольшая, то регистрируется малейшее движение, а если большая, то курсор может проскочить на достаточное расстояние, прежде чем произойдёт это событие).

Также у компонента PaintBox есть точки свойств MouseX и MouseY, которые хранят положение курсора мыши после указанных выше событий. Нам эти-то положения и нужны. Ведь для построения линии компоненту Img_line нужна начальная точка и конечная. Первый раз начальную точку мы запоминаем после событие onMouseDown (индекс в канал нужен затем, чтобы позволять отрисовку только принажатой левой кнопке, ведь наши события выдают в поток индекс нажатой кнопки). Компонент PointXY формирует положение точки по её координатам.

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


В этом и состоит суть рисования. А теперь можно и поэкспериментировать.



Вы видите, что здесь можно выбирать и цвет, и толщину линии. Все эти точки находятся на вкладке "Точки". А также с помощью менеджера реализовано изменение курсора на один из курсором Windows.

Ну, что ещё нужно для счастья? Удалять нарисованное? Для этого есть точка doClear компонента PaintBox. Рисовать прямоугольник? Пожалуй, этому стоит тоже научиться. Компонент-то соответствующий есть - Img_rectangle. Самое очевидное решение выглядит так:



Первая точка всегда та, по которой щёлкнули мышью, а вторая меняется в зависимости от текущего положения курсора. Но вот беда: при нескольких передвижениях видно, что старые отрисованные прямоугольники не стираются! И выход здесь только один: запоминать изображение перед каждым рисованием и затем восстанавливать его.



Не запутайтесь в связях! При нажатии на PaintBox (событие onMouseDown) идёт не только запоминание координат первой точки, но и исходной картинки. А при движении мыши сначала отрисовывается картинка, а затем - прямоугольник. Лишние прямоугольники при этом всё равно рисуются, но моментально перекрываются исходной картинкой.

Способ, конечно, достаточно ресурсоёмкий (ведь картинка может быть и большой), но других я пока что не нашёл.

Компонентов для рисования графических примитивов ещё немало. Однако многие их них очень похожи на Img_Rectangle. В любом случае, не забывайте экспериментировать, а я как-нибудь постараюсь рассказать про рисование ещё что-нибудь интересное.






Если заболели - загляните в каталог предприятий и поищите аптеки Москвы. В аптеках можно купит нужные лекарства.

Как раскрутить сайт? Обратитесь в продвижение сайтов в Екатеринбурге. Вам проведут оптимизацию сайта, составят семантическое ядро и предоставят подробные отчёты.

ООО "Неопласт" занимается проектирование и изготовление оснастки. Опытные специалисты выполнят при необходимости доработку оснастки.

3 комментария:

  1. Как сделать так, чтобы Инструменты менялись, например по нажатию кнопки...
    В Paint есть кнопки для выбора инструмента, как это реализовать на hiasm?

    ОтветитьУдалить
    Ответы
    1. Вот пример панели:
      Add(ToolBar,12633174,210,154)
      {
      Width=392
      Height=50
      Align=2
      Buttons=['+!Заливка'=[],'-!Перо'=[],'-!Карандаш'=[],'-'=[],'+!Лассо'=[],'-!Выделение'=[]]
      }

      Обратите внимание на спецсимволы "+!" и "-!", которые делают группу переключателей. Просто знак "-" делает разделитель.

      Удалить
    2. Вот оно что! Спасибо!

      Удалить