Игра с графикой во Flex

Question

Я просто просматривал один код, используемый для рисования одного графика. Этот код записан в функции updateDisplayList ItemRenderer из ColumnChart. Я не очень хорош в графической части Flex. Кто-нибудь может объяснить мне, что делает этот код? Я вижу конечный результат, но не уверен, как это достигается.

var rc:Rectangle = new Rectangle(0, 0, width , height);
var g:Graphics = graphics;

g.clear();        
g.moveTo(rc.left,rc.top);
g.beginFill(fill);
g.lineTo(rc.right,rc.top);
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
g.endFill();

С уважением, ПК

Answer 1

Этот код рисует прямоугольник, хотя и немного окольным путем. Рисование API в Flash использует «рисовать голову». Я не вижу никакой причины для использования g вместо graphics, кроме как для сохранения набора текста. g.clear() стирает все, что было нарисовано ранее. g.moveTo(rc.left, rc.top) перемещает это в положение, в этом случае верхний левый угол прямоугольника (0,0). g.beginFill(fill) начинает заполнение, ничего удивительного. Вызовы g.lineTo(x, y) перемещают вытяжную головку к четырем углам прямоугольника и, наконец, g.endFill() завершает заливку.

Вы можете получить тот же результат, выполнив это:

graphics.clear();
graphics.beginFill(fill);
graphics.drawRect(0, 0, width , height);
// this last call is only needed if you're going to draw even more, 
// if not you can omit that too
graphics.endFill(); 

Answer 2

Деграфа делает подобные вещи намного проще.

Answer 3

Он в основном рисует прямоугольник.

//clear any existing drawings
g.clear();

Установить текущую позицию рисования в верхний левый угол прямоугольника, который равен 0, 0

g.moveTo(rc.left,rc.top);

//start filling with the color specified by `fill`
g.beginFill(fill);

Нарисуйте линию в верхнем правом углу прямоугольника от текущего местоположения (то есть верхнего левого угла). Метод lineTo обновляет текущее местоположение, чтобы последующие чертежи начинались с новой точки.

g.lineTo(rc.right,rc.top);

Нарисуйте остальные стороны прямоугольника:

g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);

//end the fill.
g.endFill();

Посетите страницу liveocs для Graphics class для получения дополнительной информации.

---

Все визуальные компоненты в Flex наследуются прямо / косвенно от класса UIComponent. Метод updateDisplayList для UIComponent рисует объект и / или размеры и размещает его дочерние элементы. Это расширенный метод, который вы можете переопределить при создании подкласса UIComponent. Когда вы переопределяете его в своем дочернем классе, вы должны вызывать super.updateDisplayList с правильными параметрами, чтобы убедиться, что компоненты базового класса правильно обновлены.