Эта статья о ActionScript изначально была опубликована в моем личном блоге 6 лет назад.

Полагаю, большинство из вас уже знают, что такое функция graphics.curveTo. Как следует из названия, он позволяет рисовать изогнутую линию, которая начинается в определенной точке, изгибается в сторону контрольной точки и заканчивается точкой привязки. Начальную точку кривой можно определить тремя способами:

  • undefined: начальная точка по умолчанию будет (0,0)
  • последняя точка привязки: это будет начальная точка по умолчанию, когда вы уже нарисовали кривую. это отменяет точку по умолчанию, указанную выше.
  • используя метод moveTo: вы устанавливаете начальную точку с помощью graphics.moveTo (x, y). этот метод отменяет все вышеперечисленное.

После выхода из начальной точки кривая продвинется до контрольной точки, а затем изогнется до точки привязки. Это в основном то, что делает curveTo ().

Так зачем рисовать круг с помощью функции curveTo, если можно просто использовать drawCircle? Один ответ на этот вопрос заключается в том, что экспериментировать с этими вещами во флэш-памяти просто весело, другой ответ заключается в том, что когда вы динамически рисуете круг с помощью этого метода, вы можете анимировать различные точки, составляющие круг, и создавать еще более странные формы.

Первое, что нам нужно сделать, это определить все наши точки привязки. Поскольку мы рисуем круг, было бы полезно, если бы точки привязки были аккуратно выровнены по кругу. Один из способов выровнять почти все в круговом порядке - это работать с синусом и косинусом, но сейчас я хотел бы попробовать другой способ, а именно с помощью метода Point.polar (). (не беспокойтесь, нам позже понадобятся наши тригонометрические друзья).

Функция polar () работает с полярными координатами, в отличие от декартовых координат, которые используются во Flash. Основная идея полярной системы координат заключается в том, что вместо работы с положением X и Y для определения точки вы работаете с углом и расстоянием. Расстояние говорит вам, как далеко эта точка удалена от полюса (фиксированной точки в системе), а угол указывает угол точки относительно горизонтальной линии, проходящей через полюс.

Итак, если вы хотите нарисовать 100 точек, которые все находятся на краю идеального круга с радиусом 10, полярные координаты для первых пяти точек будут:

метод Point.polar () имеет 2 параметра, первый - это расстояние до полюса, второй - угол (в радианах). Затем метод возвращает объект Point с соответствующими декартовыми координатами, что позволяет рисовать эту точку на экране во Flash. Итак, рисование всех наших точек (в данном случае круга с радиусом 1) будет происходить следующим образом:

this.graphics.beginFill(0);
for (var i:int = 0; i < numberOfPoints; i++)
{
    var p:Point = Point.polar(10,2*Math.PI * i/numberOfPoints);
    this.graphics.drawCircle(p.x,p.y,1);
}
this.graphics.endFill();

Теперь, когда я объяснил, как рисовать опорные точки круговым методом, осталось только нарисовать контрольные точки. Контрольные точки будут гарантировать, что кривые между опорными точками образуют красивый круг. Мы воспользуемся тригонометрией из школьных времен, чтобы найти их координаты. Поскольку мы также будем использовать метод Point.polar (), все, что нам нужно сделать, чтобы найти координаты, - это расстояние от контрольных точек до центра. Затем мы можем повторно использовать цикл for выше, с отрегулированным расстоянием до полюса.

Мы можем установить, что COS (delta / 2) = r / | AB |. Благодаря этому мы можем вычислить | AB |. линия AB является биссектрисой угла Дельты (то есть AB делит угол Дельта на 2 равномерно разделенные части). Точка B - это место, где две перпендикулярные линии пересекаются друг с другом и с биссектрисой. Мы не будем вдаваться в подробности того, почему это так, но не стесняйтесь доказать это сами :).

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

public class APC extends MovieClip {
	private var ControlPoints:Array = [];
	private var AttachPoints:Array = [];
	private var diameter:int = 100;
	private var Points:int = 10;
	public function APC() {
		var xx:int = stage.stageWidth/2;
		var yy:int = stage.stageHeight / 2;
			var outerDiameter:Number = diameter / Math.cos(Math.PI / Points);
		for (var i:int = 0; i < Points; i++)
			{
				var Ap:Point = Point.polar(diameter, i * 2 * Math.PI / Points);
				var Cp:Point = Point.polar(outerDiameter, i * 2 * Math.PI / Points + (Math.PI / Points ));
				Ap.x += xx;
				Ap.y += yy;
				Cp.x += xx;
				Cp.y += yy;
				AttachPoints.push(Ap);
				ControlPoints.push(Cp);
			}
		drawStuff();
	}
	private function drawStuff():void
	{
		this.graphics.beginFill(0);
		this.graphics.moveTo(AttachPoints[0].x, AttachPoints[0].y);
		for (var i:int = 0; i < Points-1; i++)
		{
			this.graphics.curveTo(ControlPoints[i].x, ControlPoints[i].y, AttachPoints[i+1].x, AttachPoints[i+1].y);
		}
		this.graphics.curveTo(ControlPoints[Points-1].x, ControlPoints[Points-1].y, AttachPoints[0].x, AttachPoints[0].y);
		this.graphics.endFill();
	}
}

Нравится этот пост? "Подпишись на меня в Твиттере !