Эта первая статья, которая открывает цикл статей о работе с графическим редактором Corel Draw. Думаю, они помогут всем желающим обучится работать с векторной графикой. Раскрыть для себя все возможности вектора.
Попробуем нарисовать время, а верней его оболочку в виде песочных часов.
Corel Draw. Рисуем часы.
Эта первая статья, которая открывает цикл статей о работе с графическим редактором Corel Draw. Думаю, они помогут всем желающим обучится работать с векторной графикой. Раскрыть для себя все возможности вектора.
Попробуем нарисовать время, а верней его оболочку в виде песочных часов.
1. Инструментом Ellipse Tool (F7) рисуем круг, для ровного круга зажимаем Ctrl, затем конвертируем круг в кривую Arrange-Convert to curves(Ctrl+Q)
взяв нижнюю точку, приспустим её вниз, как на рисунке!
2. Копируем этот овал (Shift+ тащим Pick Tool к середине объекта) и немного дорабатываем его форму, сделаем его немного тупее (кстати, скопируйте этот внутренний овал и положите его в уголок, он нам еще пригодится!).
3. выделим первые два объекта и скопируем их вниз (выделяем Pick tool, зажимаем Ctrl и тащим)
полученные объекты немного вытянем из верхней точки, как рисунке. На нём, кстати, не очень видно у вас должно быть поострее! Делаем мы это специально потому, что на наши будущие часы мы будем смотреть немного сверху!
4. Теперь инструментом Elipse Tool (F7) нарисуем овал, скопируем его и расположим как на рисунке, сверху инструментом Rectangle Tool рисуем прямоугольник!
5. Обрезаем кружками квадрат, для этого сначала выделяем круг, затем квадрат (зажав Shift) и щелкаем по кнопке Trim.
Повторяем это всё со вторым кругом.
6. Теперь выделим два больших овала и нажмем Weld! Смотрим, что получилось!
кстати, на этом этапе при объединении могут получиться лишние точки их надо удалить, и если надо поменять тип точки
7. Такой же трюк проделываем с внутренними овалами.
У нас уже есть колба для песка она конечно одна но будем называть её двумя объектами большой колбой и малой (внутренней).
Возьмите внутреннюю "колбу" и вырежьте отверстие. Но её не удаляйте!
8. Теперь берем опять инструмент Elise Tool (F7), рисуем овал, затем копируем его и размещаем две копии наверху,
чем выше круг тем он должен быть уже! Дорисуем два прямоугольника, как на рисунке!
9. Выделим пять последних фигур, скопируем и утащим вниз объекта ( отзеркалив их) и забудем о них на некоторое время!
10. Сосредоточим внимание на верхней части!
Объединим нижний овал с большим прямоугольником. Как объединять объекты вы уже знаете.
Теперь объединим средний овал и небольшой прямоугольник. Если вы зальёте эти объекты, получится как на рисунке.
11. Заливаем объекты инструментом Fountain Fill Dialog (F11) или кликаем по палитре сбоку левой кнопкой мыши.
Если вдруг у вас объекты будут расположены в другой последовательности, то для того что бы верхний овал был самым верхним, жмем Shift+Page Up (самым нижним Shift+Page Down) если надо сместить только на один слой Ctrl+Page Up (Down)
Не уделяйте сейчас внимание заливке, о ней поговорим потом.
12. Теперь пошли вниз. Почему мы просто не копируем верхнюю часть? Потому что линия горизонта над предметом низ нам видно больше и вид там будет совершенно другой.
Рисуем заново все объекты или используете то, что вначале утащили вниз в запасник!
Берем овал, обратите внимание, как он расположен и растяните его по высоте, теперь мы видим его больше. Смело копируйте его в середину!
Вырежьте меньшим дырку в большем. Он обозначен желтым цветом! Меньший положим сбоку, потом еще попользуем!
13. Скопируем колечко и уменьшим его немного, смотрите как на рисунке. Для того, что бы было понятнее, назовём колечки 1(большее) и 2(меньшее).
Берем колечко 1-нарисуйте любую форму и обрежьте им колечко, можно обрезать тем овалом, что мы отложили. Обратите внимание на уголки!
14. Берем запасное кольцо 2, располагаем, как на рисунке затем рисуем овал и обрезаем им колечко, с помощью Intersectin. Полученная форма выделена зеленым. Теперь совместим их.
Это будет наше преломление стеклом. Если бы у нас был фон с узорами, он бы тоже должен был преломиться!
15. Дальше уже известным нам методом объединения и обрезки, получаем из прямоугольника и овала, нижнюю часть подставки. Помним что овал у нас теперь очень широкий.
16. Дорисовываем основание подставки тем же методом, что и верх. Здесь используется объединение готовых форм потому что нам важно сделать симметричный объект. Возьмем отложенный овал и подложим его в самый низ!
17. Вот почти всё готово! Меньшую "колбу" заливаем и делаем ей прозрачность инструментом Interactive transparenci Tool
Заливаем все, чтоб нам было понятно, что это у нас такое! А это часы без песка!
18. Теперь рисуем сам песок. Сначала рисуем овал, наклоняем его, на рисунке песок сыплется немного наклонно.
Затем рисуем прямоугольник. Сначала выделяем малую ”колбу”, затем новоиспеченный прямоугольник и жмем Intersect!
Подгоняем точки по узкой форме и заливаем цветом песка. Можно продлить этот объект вниз и нарисовать как бы падающую струйку песка. Добавим несколько песчинок для декоративности.
19.На самом верхнем овале песка нарисуем поменьше, зальем более темным цветом и применим интерактивное перетекание Interactive Blend Tool.
Ниже нарисуем небольшую горку упавшего песка. И заливаем просто градиентной заливкой.
20. А теперь самое важное - рисуем блики. Чем больше бликов, тем лучше! Мы можем скопировать меньшую колбу и деформируя её по нескольким точкам также добавить блики. Очень удобно брать её как основу, потому что блики должны идти именно по её форме. Здесь нам пригодится отложенный в начале овал, его тоже удобней подгонять по форме колбы.
Рисуем мелкие блики, деформируя круги по точкам! Затем заливаем и применяем прозрачность.
21. Теперь дорабатываем заливку.
Добавим тени!
Рисуем овал, добавляем тень инструментом Interactive Droр Shadow Tool. Отделим тень от объекта Ctrl+K, удалим овал.
Таким же способом нарисуем тень на верхней подставке.
Еще можно добавить опорные ножки. Рисуют их так же как всё, объединяя квадрат и овал.
В этом уроке изложен принцип рисования подобной формы вы можете усложнить или облегчить саму форму, добавить красивых деталей, прорисовать блики, инкрустировать корпус камушками... В общем, фантазируйте!
В этом разделе речь пойдет о растеризации двумерных графических примитивов, таких как отрезки, окружности, эллипсы. Мы попробуем разобраться, в чем отличие идеальных математических объектов от реальных отрезков и окружностей, рисуемых на экране.
При этом рассматриваются реальные задачи отрисовки графики, поэтому предложенные алгоритмы должны работать с приемлемой скоростью и использовать различные оптимизации.
Далее, на базе рассмотренных методов, будут построенны алгоритмы заливки фигур.
Связность
Идеальная математическая линия представляет собой бесконечное количество точек, удовлетворяющих определенному уравнению, или задана другим образом. Реальный экран это всегда конечное количество точек. Изображение представляет из себя прямоугольную сетку, узлы которой имеет целочисленные координаты. Появляется законный вопрос: как определить связность линии на экране?
Традиционно вводятся два понятия связности.
4-связность: пикселы p1(x1, y1) и p2(x2, y2) называются соседними, если либо разность их координат по оси x, либо разность их координат по оси y равна 1 (либо исключающее):
|x2 – x1| + |y2 – y1| <= 1
8-связность: пикселы p1(x1, y1) и p2(x2, y2) называются соседними, если разность их координат по оси x и разность их координат по оси y не больше 1:
|x2 – x1| <= 1, |y2 – y1| <= 1
8-связность(рис 1.) и 4-связность (рис 2.)
Линией на растровой сетке будем считать последовательность пикселов {P1, …, Pn}, таких, что любые два пиксела Pi, Pi+1 являются соседними в смысле заданной связности.
Прим. Отметим, что любая четырехсвязная линия одновременно является восьмисвязной, но не наоборот. Таким образом 4-связность является более сильным понятием.
Отсечение
Понятие связности, введенное выше, позволяет обойти требование на целочисленность координат всех точек. С помощью этого понятия можно судить о связности дискретной линии. Другая проблема состоит в том, что область вывода всегда имеет ограниченные размеры. Область формы, на которую делался вывод в предыдущих разделах, имеет форму прямоугольника. Таким образом появляется задача отсечения выводимых геометрических примитивов по границе некоторой области. Алгоритмы отчесения будут рассмотрены ниже.
Переход к оконным координатам
В предыдущем разделе не акцентировалось внимание, где именно стоит перейти из логических координат в оконные. Дискретность сетки, на которую выводится изображение, имеет определенные преимущества. А именно, за счет целочисленности коорднат пикселей можно создать алгоритмы, которые будут также работать только с целыми числами. Более того, во многих случаях основной цикл из числа арифметических операций содержит только сложения!
Становится ясно, что переход к оконным коодинатам нужно осуществить до начала работы основного алгоритма. В общем случае схема работы будет выглядеть следующим образом:
Это то, что касается базовых понятий. В последующих статьях будут рассмотрены математические основы задания графических примитивов и алгоритмы их построения (растеризации).
Вопрос создания непрямоугольных окон часто интересует начинающих программистов и время от времени обсуждается на форумах разработчиков в среде Delphi. А вообще, нужно ли это кому-нибудь? Ответ - да! Это уже было нужно таким известным фирмам, как Symantec (Norton Utilities, Norton CrashGuard), Microsoft (Приложение "
Часы" в Windows NT4 может принимать круглую форму, Deluxe CD Player из MS Plus! 98 имеет вид прямоугольника со скругленными краями). У Borland Jbuilder 2 в окне начальной загрузки стрела крана "выскочила" за пределы прямоугольника. Программы для видеокарт TV Capture фирмы AverMedia имитируют пульт управления. Окно переводчика Magic Goody принимает вид гуся, разгуливающего по экрану.
Список можно продолжить, а вывод такой: окно "хитрой" формы – это "изюминка" оформления Вашей программы, нечто запоминающееся, дополнительный плюс в борьбе за потенциального покупателя. Главное в этом – не переборщить. Вряд ли будет удобно работать с текстовым редактором в треугольном окне. Окна произвольной формы неплохо смотрятся при начальной загрузке (Splash) и, возможно, в качестве окна "О программе … ".
Как это делается? Средствами Delphi – достаточно просто. Приведенные ниже примеры можно также перевести в C++ Builder или Visual C++.
При создании окна непрямоугольной формы используются API функции
Переопределение функции WMNCHitTest позволит перетаскивать окно, захватив его мышкой.
До сих пор в примерах мы рассматривали регионы с абсолютными значениями линейных величин. Пример непрямоугольного окна, которое масштабирует свою форму в зависимости от его размера. Искодный код, приведенный ниже, создает окно в виде бабочки, причем бабочка исполльзует максимально высоту и ширину исходной формы.
Если грамотно разложить фигуру на элементарные составляющие, то Вам вполне по силам создать окно абсолютно любой формы. Это похоже на детскую игру "конструктор", только Ваши "кубики" намного разнообразнее.
Для завершения проекта необходимо создать фоновую картинку, которая подчеркнет границы нового окна. И обязательно установить свойство формы Scaled = False, иначе фоновая картинка и форма могут "разъехаться" при использовании нестандартных видеорежимов или стилей оформления Windows.
В заключение следует сказать, что существуют готовые компоненты и библиотеки компонент для решения подобных задач, например, CoolForm, TPlasmaForm. Однако при использовании компонент от сторонних производителей могут возникнуть проблемы лицензионности их использования и проблемы перехода на новую версию компилятора. А приведенные в данной статье примеры компилируются без изменений в исходном коде на Borland Delphi 3.0 - 7.0 и, вероятно, будут совместимы с последующими версиями.
Регионы нужны не только для того, чтобы резать дырки в формах. Иногда они могут оказаться довольно полезным инструментом именно в своём "родном" качестве, т.е. для отрисовки на экране достаточно сложных геометрических фигур. Например, для вывода карт, представляющих собой совокупность ломанных линий, построенных по массивам точек. Создать такую линию нам уже не составит труда, пора разобраться, как её показать юзеру.
Из функций отрисовки две первые нам уже смутно знакомы: они делают тоже, что делает параметр FillMode (ALTERNATE/WINDING) для функций CreatePolygonRgn и CreatePolyPolygonRgn. GetPolyFillMode получает заданный для указанного контекста режим заливки, а SetPolyFillMode устанавливает его. Просто на этот раз речь идёт не о создании региона, а всего лишь о его отрисовке. Установленное значение будет иметь смысл для всех функций, заливающих регион, т.е. PaintRgn и FillRgn, при этом сам регион останется таким, каким он и был создан, а вот раскрашен будет по разному, в том случае, если он состоит из нескольких пересекающихся регионов. Для простых регионов типа прямоугольника или элипса установка данного значения ничего не меняет.
Итак. Давайте срочно что-нить создадим и нарисуем. Можно, конечно, сделать это в одной функции, например в OnCreate, но тогда изображение будет весьма недолговечным - до первой перерисовки формы. Поэтому поступим иначе: объявим private property fRgn, в OnCreate его инициализируем, в OnPaint будем его отображать, а в OnDestroy - уничтожим. Код методов представлен ниже:
Следует помнить, что Функции отрисовки регионов всегда работают с цветом,
указанным в Canvas.Brush.Color. Даже рисуя бордюр (frame) использоваться будет не цвет Canvas.Pen, что, в общем-то, представляется более логичным, а цвет Canvas.Brush.
Ничего такой получился кружочек. Погребального вида. Давайте сделаем его более жизнерадостным, и заодно разберёмся, как работает FrameRgn:
У меня получилась такая вот картинка:
Насколько я могу судить, функции FillRgn и PaintRgn отличаются друг от друга только тем, что первая позволяет указать дескриптор кисти, не связанной с текущим canvas'ом. Сомнительная фича с точки зрения дельфей, т.к. манипулировать с текущим цветом кисти канваса всяко легче, чем создавать отдельный экземпляр класса TBrush. Вот, собственно, и всё об отрисовке. Примечательно то, что для того, чтобы нарисовать регион нам не нужно знать, что он из себя представляет. Мы просто передаём дескриптор одной и той же процедуре, а она отобразит на экране круг, овал, треугольник, звезду Давида - всё, что угодно.
Функции, представленные в разделе прочее ничего особенно интересного из себя не представляют, и, в общем-то, интуитивно понятны. поэтому рассотрим лишь некоторые из них.
Прежде чем работать с графикой, необходимо понять, как именно в Windows реализован принцип перерисовки изображений. Не инструменты рисования являются предметом этого материала, а общий механизм перерисовки окон.
Данный материал посвящен системному сообщению WM_PAINT.
Основной принцип перерисовки: Save and Paint - сохраняй и прорисовывай.
Windows не хранит в памяти нарисованное изображение в виде растрового рисунка. Система перерисовывает ту часть окна , которая в какждый конкретный момент в этом нуждается.
Когда Windows ( или другое приложение) посылает запрос на перерисовку окна или его части, этому окну посылается сообщение WM_PAINT.
Посылка сообщения WM_PAINT окну может быть вызвана как явным обращением к методам Window или RedrawWindow, так и полученим запроса на перерисовку от системы, которое поступает при перемещении окна, изменении его размеров и так далее. Windows посылает это сообщение, когда не имеется никаких других сообщений в очереди сообщений приложения.
Сообщение WM_PAINT относится к сообщениям с низким приоритетом, поэтому оно будет обработано в самую последнюю очередь.
Если будут посланы подряд несколько сообщений WM_PAINT, то обработано будет только одно, так как система не регистрирует следующие сообщения WM_PAINT. Таким образом достигается минимизация затрат на исполнение очень длительной операции - перерисовки окна.
В соответствии с общим подходом, принятым в Windows, перерисовываться будет не все окно, а только та часть, которая в этом нуждается. Так называемая область модификации - Region. К области модификации добавляется только некорректно отображаемая часть - Invalid Area , именна та часть окна, которая нуждается в перерисовке.
Область окна установливается как некорректная (Invalid area) методами Invalidate, InvalidateRect, или InvalidateRgn, а так же после того, как окно передвигают, изменяют его размеры или выполняют любою другою операцию, которая воздействует на клиентскую область окна.
Метод Invalidate объявляет некорректной всю клиентскую область окна.
Метод InvalidateRect ( и InvalidateRgn ) объявляет некорректной клиентскую область внутри данного прямоугольника, добавляя этот прямоугольник к текущей области модификации ( Region).
Удалить некоторую область из Region можно методами ValidateRect или ValidateRgn.
Таким образом, некорректные области накапливаются в Region, пока эта область не будет обработана при следующем сообщении WM_PAINT , или пока она не будет объявлена корректной принудительно, методом ValidateRect или ValidateRgn.
Как уже отмечалось выше, установка непустой области модификации Region не заставляет приложение немедленно перерисоваться. Вместо этого, приложение продолжает получать сообщения из очереди, пока все сообщения не будут обработаны. Затем Windows проверяет область модификации, и если область не пустая, посылает сообщение WM_PAINT окну. При проверке области модификации могут быть посланы так же сообщения WM_NCPAINT и WM_ERASEBKGND, если требуется перерисовать рамку ( неклиентскую часть) окна или необходимо очистить окно.
Например, при увеличении размера окна будут посланы все три сообщения : WM_NCPAINT , WM_ERASEBKGND и WM_PAINT. При уменьшении размеров, окну придет только два сообщения из этой группы, сообщение WM_NCPAINT и WM_ERASEBKGND. По смыслу ситуации это резонно - при уменьшении окна клиентская часть его только урезается, следовательно стереть ее надо, а рисовать, вообще говоря, нечего...
[pagebreak]
Метод Window требует немедленной перерисовки клиентской области в обход общей очереди. Предварительно проверяется состояние области модификации: если область модификации не пустая, окну будет послано сообщение WM_PAINT. Если область модификации пуста сообщение WM_PAINT, наоборот, не будет послано.
Если эта область была помечена для стирания, то окну предварительно будет послано сообщение WM_ERASEBKGND.
Для получения более подробной информации смотрите Help WinAPI по темам:
Все вышеперечисленные методы являются методами класса CWnd, доступного через WinAPI.
Для перерисовки окон в Delphi применяются два метода :
Метод RePaint заключается в объявлении всей области окна как некорректной и немедленного запроса на перерисовавание окна. Достаточно привести реализацию этого метода из модуля Controls.pas, чтобы это увидеть:
Метод Refresh является модификацией метода RePaint. Для класса TWinControl метод Refresh повторяет вызов RePaint.
Таким образом, если Вам необходимо немедленно обновить окно, воспользуйтесь методом RePaint, если в этом нет необходимости и перерисовку нужно запросить, но в порядке общей очереди, лучше использовать метод Invalidate;
Для получения более подробной информации смотрите реализацию методов:
* TWinControl.Invalidate
* TWinControl.
* метод Refresh для разных компонент, наследников от TWinControl.