ОК, пока что мы сделали треугольники с дугами , треугольники на сетке и треугольники с координатами . Теперь пришло время объединить все это в один кусок кода. Вы просили размер сетки от -10 до +10, но это всего лишь немного больше работы, чтобы заставить его работать для сетки любого размера (ну, в определенных пределах).
Нам нужно иметь дело с конвертацией между выбранным диапазоном (от -10 до +10) и размером вашей сцены (в пикселях). Хитрость заключается в том, чтобы создать мувиклип («myGraph») для хранения сетки от -10 до +10, а затем увеличить его до размера сцены (оставим 20-пиксельное поле по краям); мы вычислим прямоугольник ('displayRect'), чтобы представить максимальный размер, которым мы хотели бы, чтобы myGraph был. Мы также хотим расположить myGraph так, чтобы его источник находился в нужном месте, и перевернуть его вертикально, чтобы ось Y увеличивалась при перемещении вверх по экрану.
Как только мы все это сделаем, мы можем рисовать внутри myGraph, используя желаемые единицы измерения (от -10 до +10), без необходимости в преобразовании в пиксели - масштабирование myGraph позаботится об этом автоматически для нас.
Затем мы создаем клип «grid» внутри myGraph и рисуем в нем сетку, используя функцию drawGrid ().
Затем мы делаем клип «arcTriangle» внутри myGraph и рисуем внутри него наш треугольник. Мы используем ту же технику, что и раньше, рисуя наш треугольник, рисуя красный круг в каждом углу, а затем используя копию треугольника в качестве маски, чтобы показать только внутренние дуги окружностей. Затем мы создаем textField в каждом углу, чтобы отобразить координаты каждой точки (обратите внимание, что их необходимо уменьшить до нормального размера, в противном случае текст слишком мал для чтения!).
Наконец, мы добавляем функцию onRelease в myGraph, которая рисует новый случайный arcTriangle при нажатии.
альтернативный текст http://roi.webfactional.com/img/so/arctriangles.jpg
Вот код ...
import flash.geom.Point;
import flash.geom.Rectangle;
var margin:Number = 20;//leave a margin around the graph...
//...calculate the largest extent (displayRect) that we want our graph to be displayed in:
var displayRect = new Rectangle(margin, margin, Stage.width-margin-60, Stage.height-2*margin);
//make the 'graph' clip:
var myGraph:MovieClip = this.createEmptyMovieClip("myGraph", this.getNextHighestDepth());
myGraph.extents = new Rectangle(-10, -10, 20, 20);//you can change this to set a different size of grid
//calculate the length of one local unit in pixels...
myGraph.unit = Math.min((displayRect.height)/myGraph.extents.height, (displayRect.width)/myGraph.extents.width);
//... and scale the graph clip so it fits inside the displayRect
myGraph._xscale = myGraph.unit*100;
myGraph._yscale = -myGraph.unit*100;// this one is negative, so Y increases upwards
//calculate the origin of myGraph...
myGraph.origin = new Point(displayRect.left-myGraph.unit*myGraph.extents.left, displayRect.top+myGraph.unit*myGraph.extents.bottom);
//... and move myGraph into the correct position
myGraph._x = myGraph.origin.x;
myGraph._y = myGraph.origin.y;
//draw a blank grid
drawGrid(myGraph.createEmptyMovieClip("grid", 0), myGraph.extents);
//draw a random triangle with arcs
arcTriangle(myGraph.createEmptyMovieClip("arcTriangle", 1), myGraph.extents);
//add a function to draw a new triangle when the graph is clicked:
myGraph.onRelease = function() {
arcTriangle(myGraph.createEmptyMovieClip("arcTriangle", 1), myGraph.extents);
}
//-------------------------------------
// All the functions are defined below:
function drawGrid(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the grid and axes
//draw a light-grey background
mc.beginFill(0xF8F8F8);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.lineTo(rect.right, rect.top);
mc.lineTo(rect.right, rect.bottom);
mc.lineTo(rect.left, rect.bottom);
mc.endFill();
//draw a light-blue grid
var unit:Number = 1;
mc.lineStyle(1, 0x0000FF, 20, true, "none", "round", "round");
var i:Number = rect.x;
do {
i = i+unit;
mc.moveTo(i, rect.bottom);
mc.lineTo(i, rect.top);
} while (i<rect.right);
i = rect.bottom;
do {
i = i-unit;
mc.moveTo(rect.left, i);
mc.lineTo(rect.right, i);
} while (i>rect.top);
//draw the X-axis and Y-axis in dark grey
mc.lineStyle(2, 0x808080, 100, true, "none", "round", "round");
mc.moveTo(rect.left, 0);
mc.lineTo(rect.right, 0);
mc.moveTo(0, rect.bottom);
mc.lineTo(0, rect.top);
}
function randomPoint(rect:Rectangle):Point {
//this is a function which returns a random point within a given rectangle
var p:Point = new Point(rect.x+Math.floor(Math.random()*rect.width), rect.y+Math.floor(Math.random()*rect.height));
return p;
}
function drawTriangle(mc:MovieClip, q1:Point, q2:Point, q3:Point):Void {
//this function draws a triangle through 3 points
var stroke = 2; //(line weight of triangle)
mc.lineStyle(stroke, 0x000000, 100, true, "none", "round", "round");
mc.moveTo(q1.x, q1.y);
mc.lineTo(q2.x, q2.y);
mc.lineTo(q3.x, q3.y);
mc.lineTo(q1.x, q1.y);
}
function drawCircle(mc:MovieClip, x:Number, y:Number):Void {
//this draws a red circle, centred on (x,y)
//we want the circle to always appear the same size,
//independently of our scaling of myGraph,
//so we need to set the radius accordingly:
var radius:Number = 18/mc._parent._parent.unit;
//AS2 has no direct way of drawing a circle,
//so we need to construct one out of 8 bezier curves:
var k1:Number = Math.tan(Math.PI/8)*radius;
var k2:Number = Math.sin(Math.PI/4)*radius;
with (mc) {
lineStyle(2, 0xFF0000, 100, true, "none", "round", "round");
moveTo(x+radius, y);
curveTo(radius+x, k1+y, k2+x, k2+y);
curveTo(k1+x, radius+y, x, radius+y);
curveTo(-k1+x, radius+y, -k2+x, k2+y);
curveTo(-radius+x, k1+y, -radius+x, y);
curveTo(-radius+x, -k1+y, -k2+x, -k2+y);
curveTo(-k1+x, -radius+y, x, -radius+y);
curveTo(k1+x, -radius+y, k2+x, -k2+y);
curveTo(radius+x, -k1+y, radius+x, y);
}
}
function arcTriangle(t:MovieClip, rect:Rectangle):MovieClip {
//main function to draw a triangle with corner arcs
//define 3 random points (stored as properties of t)
t.p=new Array(3);
t.p[0] = randomPoint(rect);
t.p[1] = randomPoint(rect);
t.p[2] = randomPoint(rect);
//draw a triangle
t.createEmptyMovieClip("triangle", 0);
drawTriangle(t.triangle, t.p[0], t.p[1], t.p[2]);
//draw a filled triangle to use as a mask
t.createEmptyMovieClip("mask", 1);
t.mask.beginFill(0xF0F0F0);
drawTriangle(t.mask, t.p[0], t.p[1], t.p[2]);
t.mask.endFill();
t.mask._alpha = 0;
//add a red circle to each corner
t.createEmptyMovieClip("arcHolder", 2);
drawCircle(t.arcHolder, t.p[0].x, t.p[0].y);
drawCircle(t.arcHolder, t.p[1].x, t.p[1].y);
drawCircle(t.arcHolder, t.p[2].x, t.p[2].y);
//mask the circles so only the interior arcs are visible
t.arcHolder.setMask(t.mask);
//show the coordinates for each point
var tf:TextField;
for (var i = 0; i<3; i++) {
tf = t.createTextField("text"+i, i+3, t.p[i].x, t.p[i].y, 1, 1);
tf.autoSize = true;
tf._xscale = 10000/t._parent._xscale;
tf._yscale = 10000/t._parent._yscale;
//use unicode values to get "A", "B" and "C":
tf.text = String.fromCharCode(65+i)+"("+t.p[i].x+", "+t.p[i].y+")";
}
return t;
}
Помните: вы можете принять любимый ответ на каждый из ваших вопросов, щелкнув большую галочку ( галочка http://roi.webfactional.com/img/so/so_tick.png) слева. Спасибо.