Результат роботи програми ви можете побачити на рис.
Потім переміщається олівець в точку початку лінії-canvas.MoveTo (х, y). Meтод MoveTo переміщує олівець в позицію, зазначену в якості параметрів х і у. При переміщенні не відбувається ніякого малювання на полотні (canvas), х і y-це не сантиметри і не міліметри, а кількість пікселів (кількість екранних точок).
Відлік координати х йде зліва. Це означає, що ліва сторона вікна дорівнює нульовій позиції х, а права сторона вікна-це максимальне значення. Але це не означає, що х не може бути негативним або більше максимуму. Ви без проблем можете вказувати будь-які значення, тільки потрібно враховувати, що частина лінії може піти за межі вікна.
Відлік координати y йде зверху. Верхнє обрамлення вікна є нульовою точкою y. При цьому заголовок вікна (з назвою форми і системними кнопками) не входить в простір клієнтської області вікна.
Тепер ми повинні намалювати лінію за допомогою методу LineTo (х, y). Як параметри передаються кінцеві координати лінії. Відрізок буде намальований, починаючи від поточної позиції олівця, куди ми перейшли за допомогою методу MoveTo, і до координат, зазначених при виклику методу LineTo.
Після промальовування першої лінії вибираємо наступний стиль і рухаємось в позицію на 20 пікселів нижче вже намальованої лінії. Після цього малюємо наступну лінію.
Тепер додамо в нашу програму можливість зміни кольору олівця. Для цього встановимо на форму кнопку з написом "Змінити колір" і компонент coiorDialog з вкладки Dialogs. Компонент coiorDialog призначений для відображення стандартного діалогу вибору кольору. На формі він буде виглядати як простого квадратика з піктограмою і при запуску не буде видно.
для події # 111; nclick кнопки напишемо наступний код:
if ColorDialogl.Execute then
У першому рядку коду відображається вікно вибору кольору (ColorDialog1. Execute). Якщо користувач вибрав колір і не натиснув ОК (натиснув скасування або натиснув кнопку хрестика в заголовку), то вікно повертає значення false. Тому ми перевіряємо, якщо результат показу вікна дорівнює true, то змінити колір:
if ColorDialogl.Execute then Змінити колір полотна
Нагадую, що за замовчуванням конструкція if перевіряє вказаний код на рівність true, якщо не вказано інше. У зв'язку з цим цю ж конструкцію можна було б записати так:
if ColorDialogl.Execute = true then Змінити колір полотна
Результат обраного кольору записується в властивість color компонента ColorDialogl. Саме його ми і присвоюємо кольором олівця canvas.Pen.color. Після цього потрібно тільки перемалювати малюнок. Для цього явно викликається процедура-обробник події OnPaint форми. У нас обробник називається FormPaint, саме його і необхідно викликати.
Можете запустити програму і перевірити результат роботи зміни кольорів ліній.
Тепер додамо можливість вибору товщини лінії. Для цього встановимо компонент upDown з вкладки Win32. для події # 111; nclick цього компонента напишемо наступний код:
procedure TFormi.UpDownlClick (Sender: TObject; Button: TUDBtnType);
Компонент upDown складається з двох кнопок. Верхня кнопка збільшує внутрішній лічильник. Нижня - зменшує. Поточне значення лічильника можна прочитати у властивості Position. Саме це значення ми і присвоюємо в властивість ширини олівця Canvas. Pen. Width.
Після цього викликається метод головної форми Repaint. Цей метод генерує подію про те, що треба перемалювати вміст вікна. Це означає, що буде автоматично викликаний оброблювач події onPaint. Результат той же, що і просто виклик безпосередньо обробника, як це робилося після зміни кольору. Але такий спосіб вважається більш правильним.
ПОРАДА. Якщо говорити про те, який спосіб більш правильний, то обидва вони працюють без проблем, просто другий спосіб більш естетичний і красивий, хоча і вимагає додаткових витрат на генерацію повідомлення про необхідність перемалювати вікно.