Главная > Графика, Основы > Знакомство с графическими примитивами

Знакомство с графическими примитивами

В этом уроке мы познакомимся с графическими примитивами. То есть научимся рисовать линии и делать заливки. Сразу скажу, что мои примеры далеки от канонов объектно-ориентированного стиля... просто таким образом оформленные примеры мне кажутся... более простыми в понимании основной мысли. Да простят меня взрослые и умные дяденьки. 🙂

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

Вот его содержимое:

package {
	import flash.display.Sprite;
	import flash.display.Shape;

	public class Main extends Sprite {
		public function Main() {
			var k1 = Kvadrat(100,0xFF0000); // Красный квадрат 100 на 100
	 		var k2 = Kvadrat(200,0x00FF00); // Зеленый квадрат 200 на 200

			addChild(k1); // Добавляем Красный квадрат на основную сцену
		 	k1.x=50;
	 		k1.y=50;

			addChild(k2); // Добавляем Зеленый квадрат на основную сцену
	 		k2.x=100;
		 	k2.y=100;
		 }

		private function Kvadrat(w:Number, col:uint) { // Функция, рисующая квадрат
	 		var kvadrat:Shape = new Shape();
 			var Width=w;
 			with (kvadrat.graphics) {
 				beginFill(col, 0.80); // Закрашиваем квадрат, непрозрачность  - 80%
	 			lineTo(0,Width);
 				lineTo(Width,Width);
 				lineTo(Width,0);
 				lineTo(0,0);
	 			endFill();
 			}
 			return kvadrat;
		}
	}
}

В принципе, я думаю и так все понятно... Но на всякий случай рассмотрим алгоритм выполнения этой маленькой программы:

  • Вызывается основная функция Main().
  • С помощью вызова функции Kvadrat() создаем 2 квадрата:
    • beginFill() - задать цвет заливки
    • lineTo() - рисовать линию до координат, указанных в параметрах
    • endFill() - закончить заливку (кстати, многие "взрослые" программеры часто забывают выключить заливку, что порой приводит к непредвиденным ситуациям
  • Добавляем квадраты на сцену командой AddChild()
  • Изменяем координаты с помощью параметров .x и .y

Ну вот, вроде бы и все на сегодня...'

  1. 29 сентября 2007 в 07:15 | #1

    Пи?и плиз сразу нормальные имена, а не Kvadrat) Нужно учить сразу хоро?ему )

  2. 29 сентября 2007 в 07:32 | #2

    Хоро?о, учту 🙂

  3. 30 сентября 2007 в 10:45 | #3

    Да, а мой коммент к следующему посту чего не заапрувил? 🙂
    ? почему у тебя блог работает на день вперед? 🙂

  4. Незнакомец
    30 сентября 2007 в 11:50 | #4

    var kvadrat:Shape = new Shape();
    Что означает :Shape ?

  5. 30 сентября 2007 в 15:55 | #5

    var kvadrat:Shape = new Shape();
    Что означает :Shape ?

    Это означает что переменная kvadrat — это экземпляр класса Shape.
    Класс Shape используется для создания легковесных графических элементов с помощью ActionScript.

    В отличие от класса Sprite, который тоже имеет методы рисования, класс Shape не имеет свойств и методов, присущих так называемым display object container-ам. Например экземпляры класса Shape не могут иметь дочерних объектов. А также не поддерживают события по клику мы?ки. ? вообще кроме графики ничего в себе не содержат. За то мень?е памяти занимают в сравнении с тем же Sprite.

  6. 18 ноября 2007 в 16:41 | #6

    Спасибо, действительно понятно, из много мною прочитанного по этой теме.)))

  7. 10 января 2008 в 09:29 | #7

    Спасибо добавил этот урок в свою базу буду учиться ))

  8. 22 января 2008 в 14:54 | #8

    Спасибо за урок.
    Что если в addChild задавать координаты не жестко, а брать координаты указателя мышки в момент щелчка. И именно по щелчку рисовать квадраты. Тогда можно будет выбирать, где именно его расположить.
    Еще можно добавить в функцию Kvadrat переменную, содержащую координаты указателя мыши. И в зависимости от этого рассчитывать размеры квадрата. Или менять их при перетаскивании мыши с нажатой кнопкой.

  9. 30 января 2008 в 02:18 | #9

    Ура!! Наконец то я нашел!! болье часа искал!! Спасибо за урок=) Можно сказать спас…. Пошел делать..

    З.ы. Сайт занес в закладки.. Как раз то что я сейчас учу.. Удачи автору!!

  10. 30 января 2008 в 11:57 | #10

    Ура!! Наконец то я нашел!! болье часа искал!! Спасибо за урок=) Можно сказать спас…. Пошел делать..
    З.ы. Сайт занес в закладки.. Как раз то что я сейчас учу.. Удачи автору!!

    Спасибо за отклик. Если есть какие-то вопросы, то могу написать отдельный пост, раскрывающий их…

  11. likur
    26 февраля 2008 в 01:58 | #11

    Спасибо за урок

  12. chefil
    17 сентября 2009 в 16:29 | #12

    with (kvadrat.graphics) {

    }

    данная конструкция означает что все что внутри будет применено относительно kvadrat.graphics?

  13. admin
    20 сентября 2009 в 09:39 | #13

    chefil :
    with (kvadrat.graphics) {

    }
    данная конструкция означает что все что внутри будет применено относительно kvadrat.graphics?

    именно так

  14. 4 октября 2009 в 05:04 | #14

    Спасибо за оригинальную статью, написано очень кравиво и доступно для читателей!

  15. 17 апреля 2011 в 14:18 | #15

    А зачем такие извращения для рисования квадрата? Если можно использовать
    drawRect(0,0,Width,Width)
    Или с закругленными углами
    drawRoundRect(0,0,Width,Width,10,10)

  1. 29 сентября 2007 в 06:43 | #1
  2. 5 октября 2007 в 14:48 | #2