Рисование API

Функция drawSquare

Представленные средства рисования очень полезны, но вам наверняка потребуется создание функций, которые будут комбинировать их возможности. Например, если нужно нарисовать квадрат, вовсе не обязательно выполнять каждый раз одну и ту же процедуру, заключающуюся в установке цвета заливки и lineStyle, перемещении точки рисования, рисовании линий и заливки. Проще создать функцию, которой будут передаваться все параметры для рисования квадрата, после чего мы будем получать уже готовый результат.

При создании таких функций первое, что нужно сделать - это выделить все параметры, которые нам могут понадобиться. Нам нужны координаты X и Y, ширина, высота, цвет заливки или ее интенсивность, цвет линий, ширина и интенсивность.

MovieClip.prototype.drawSquare = function(x, y, w, h, fillCol,
                fillAlpha, lineCol, lineWeight, lineAlpha) {

};

Порядок расположения параметров в функции очень важен. Например, нам нужно просто отобразить квадрат без линии вокруг его края. Вместо создания отдельной функции для рисования квадрата без рамки мы можем передать все параметры нового стиля в конце определения нашей функции и пропускать их при вызове функции. В этом случае значения lineCol, lineWeight и lineAlpha будут отображаться как "undefined", и рамка не будет прорисовываться.

Внутри функции мы, во-первых, должны установить lineStyle и цвет заливки, а также переместить точку рисования на позицию (X, Y), которую мы указали.

MovieClip.prototype.drawSquare = function(x, y, w, h, fillCol,
 fillAlpha, lineCol, lineWeight, lineAlpha) {
  this.moveTo(x, y);
  // check if a line colour has been specified
  if (lineCol) {
    this.lineStyle(lineWeight, lineCol, lineAlpha);
  } else {
    this.lineStyle();
  }
  this.beginFill(fillCol, fillAlpha);
};

Мы проверяем, был ли передан аргумент lineCol. Если это так, то настраиваем lineStyle соответствующим образом. Если нет, вызываем lineStyle без параметров для очистки lineStyle, которая уже может быть настроена для данного фильма.

Другим моментом, на котором основывается наше решение, является то, передает ли пользователь аргумент lineAlpha (будет ли lineAlpha по умолчанию нулем или нет). Мы, конечно, мы могли бы оградиться от этого и изменить функцию по умолчанию на 100, если lineCol передается, а lineAlpha - нет. Осталось проверить, определена ли lineAlpha, и предпринять соответствующие действия.

MovieClip.prototype.drawSquare = function(x, y, w, h, fillCol,
КfillAlpha, lineCol, lineWeight, lineAlpha) {
  this.moveTo(x, y) ;
  if (lineCol != undefined){
    if (lineAlpha == undefined) {
      lineAlpha = 100;
    }
    this.lineStyle(lineWeight, lineCol, lineAlpha);
  } else {
    this.lineStyle ();
  }
  this.beginFill(fillCol, fillAlpha);
};

Теперь нам нужно прорисовать линии, чтобы отгородить область для заливки. Мы начнем с левого верхнего угла и будем двигаться вокруг квадрата по часовой стрелке, прорисовывая линию каждого угла по очереди. Полезно разобраться в том, как здесь указываются координаты.

• Левая верхняя: (X, Y)
• Правая верхняя: (X + ширина, Y)
• Правая нижняя: (X + ширина, Y + высота)
• Левая нижняя: (X, Y + высота)

Теперь нам просто нужно нарисовать линию для каждой из этих точек по очереди и затем завершить заполнение.

MovieClip.prototype.drawSquare = function(x, y, w, h, fillCol,
КfillAlpha, lineCol, lineWeight, lineAlpha) {
  this.moveTo(x, y);
  if (lineCol != undefined) {
    if (lineAlpha == undefined) {
      lineAlpha = 100;
    }
    this.lineStyle(lineWeight, lineCol, lineAlpha);
  } else {
    this.lineStyle();
  }
  this.beginFill(fillCol, fillAlpha);
  // top right
  this.lineTo(x+w, y);
  // bottom right
  this.lineTo(x+w, y+h);
  // bottom left
  this.lineTo(x, y+h);
  // top left.
  this.lineTo(x, y);
  // end the fill
  this.endFill();
};

Наконец, нам нужно вызвать

_root.drawSquare (100, 100, 200, 100, 0xFF0000, 100, 0xdddddd, 20, 50) ;

Вы заметите, что рамка, созданная с помощью lineTo, выровнена по центру края квадрата, и если бы у нашей рамки была толщина в 20 пикселей, квадрат был бы на десять пикселей шире с каждой стороны. Углы рамки закруглены, что может быть излишним. Чтобы избежать этого, можно изменить метод так, чтобы сначала прорисовывался квадрат для рамки, а затем уже квадрат поверх него для заливки.

В конечном счете, настройка метода определяется тем, как вы собираетесь его использовать. Например, вы можете указывать значения для левого, правого, нижнего и верхнего краев вместо X, Y, ширины и высоты (если бы нужно было использовать его со значениями, возвращаемыми функцией Movieclip.getBounds ). Это несложно.

MovieClip.prototype.drawSquare = function(left, right, top, bottom,
КfillCol, fillAlpha, lineCol, lineWeight, lineAlpha) {
  this.moveTo(left, top);
  if (lineCol != undefined) {
    if (lineAlpha == undefined) {
      lineAlpha = 100;
    }
    this.lineStyle(lineWeight, lineCol, lineAlpha);
  } else {
    this.lineStyle();
  }
  this.beginFill(fillCol, fillAlpha);
  this.lineTo(right, top);
  // top right
  this.lineTo(right, bottom);
  // bottom right
  this.lineTo(left, bottom);
  // bottom left
  this.lineTo(left, top);
  // top left
  this.endFill();
};

И далее вызов.

// a square with left edge at 100, right edge at 200, top at
// 200 and bottom at 300:
this.drawSquare(100,200,200,300,0xff0000,100)

Можно применять другие цвета, интенсивность заполнения и т.д. - все зависит от того, как вы планируете использовать данный метод. Здесь нет правильного или неправильного пути, вы просто конструируете его под ваши нужды.