我如何显示一个随机的三角形的坐标在一个图形范围从+10到-10的XY轴在actionscript 2.0？ [英] how do i display the coordinates of a random triangle in a graph which ranges from +10 to -10 XY axis in actionscript 2.0?
问题描述
我如何显示一个随机三角形的坐标在一个图形，范围从-10到+10在XY轴与点（如A（2,1）等弧形在每个角落，在actionscript 2.0
好的，到目前为止，我们已经完成了弧三角形，在网格上的三角形，和带坐标的三角形。现在是时候将所有这些组合成一段代码。你已经要求一个-10到+10的网格大小，但它只是一点点的工作，使其适用于任何规模的网格（以及在限制范围内）。
我们需要处理在你选择的范围（-10到+10）和你的舞台的大小（以像素为单位）之间进行转换。这个技巧是创建一个movieClip（'myGraph'）来保存我们的-10到+10的网格，然后将其缩放以适合舞台的大小（我们将在边缘留下20像素的边距）。我们将计算一个矩形（'displayRect'）来表示我们希望myGraph的最大尺寸。我们也希望定位myGraph，使它的原点位于正确的位置，并垂直翻转，使Y轴随着在屏幕上向上移动而增加。
一旦我们完成了所有的工作，我们可以使用我们所需的单位（-10到+10）绘制myGraph，而不需要转换成像素 - 缩放接下来，我们在myGraph中创建一个网格剪辑，并使用drawGrid（）函数在其中绘制一个网格。然后我们在myGraph中创建一个arcTriangle剪辑，并在里面绘制我们的三角形。我们使用与先前相同的技术，绘制三角形，在每个角上绘制一个红色的圆，然后使用三角形的副本作为蒙版，只显示圆的内部圆弧。然后，我们在每个角落都创建一个textField，以显示每个点的坐标（请注意，这些点需要缩小到正常大小，否则文本太小，无法阅读！）。
最后，我们添加一个onRelease函数给myGraph，当点击的时候它会绘制一个新的随机的arcTriangle。
webfactional.com/img/so/arctriangles.jpgrel =nofollow noreferrer> alt text http://roi.webfactional.com/img/so/arctriangles.jpg这里是代码...
import flash.geom.Point;
import flash.geom.Rectangle;
var margin：Number = 20; //在图形上留下一个边距...
// ...计算我们希望显示图形的最大范围（displayRect） in：
var displayRect = new Rectangle（margin，margin，Stage.width-margin-60，Stage.height-2 * margin）;
$ b $ //创建'graph'剪辑：
var myGraph：MovieClip = this.createEmptyMovieClip（myGraph，this.getNextHighestDepth（））;
myGraph.extents = new Rectangle（-10，-10，20，20）; //你可以改变它设置不同的网格大小
//计算一个本地单位的像素长度...
myGraph.unit = Math.min（（displayRect.height）/myGraph.extents.height，（displayRect.width）/myGraph.extents.width）;
// ...并缩放图片剪辑，使其适合displayRect
myGraph._xscale = myGraph.unit * 100;
myGraph._yscale = -myGraph.unit * 100; //这个是负数，所以Y向上增加
//计算myGraph的原点...
myGraph。 origin = new Point（displayRect.left-myGraph.unit * myGraph.extents.left，displayRect.top + myGraph.unit * myGraph.extents.bottom）;
// ...并将myGraph移动到正确的位置
myGraph._x = myGraph.origin.x;
myGraph._y = myGraph.origin.y;
//绘制一个空网格
drawGrid（myGraph.createEmptyMovieClip（grid，0），myGraph.extents）;
//用弧线绘制一个随机的三角形
arcTriangle（myGraph.createEmptyMovieClip（arcTriangle，1），myGraph.extents）;
//添加一个函数在单击图形时绘制一个新的三角形：
myGraph.onRelease = function（）{
arcTriangle（myGraph.createEmptyMovieClip（arcTriangle， 1），myGraph.extents）;
}
// ----------------------------------- -
//所有函数定义如下：
函数drawGrid（mc：MovieClip，rect：Rectangle）：void {
//这是一个绘制网格和坐标轴
//绘制浅灰色背景
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（）;
//绘制一个淡蓝色的网格
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）;
//以深灰色绘制X轴和Y轴
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）;
函数randomPoint（rect：Rectangle）：Point {
//这是一个返回给定矩形内的随机点的函数
var p：Point = new Point（rect.x + Math.floor（Math.random（）* rect.width），rect.y + Math.floor（Math.random（）* rect.height））;
return p;
函数drawTriangle（mc：MovieClip，q1：Point，q2：Point，q3：Point）：Void {
//这个函数通过3个点画一个三角形
var stroke = 2; //（三角形的线宽）
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）;
函数drawCircle（mc：MovieClip，x：Number，y：Number）：void {
//绘制一个以（x，y）
//我们希望圆圈始终显示相同的大小，
//与myGraph缩放比例无关，
//所以我们需要相应地设置半径：
var radius：Number = 18 / mc._parent._parent.unit;
// AS2没有绘制圆的直接方法，
//所以我们需要构造8条贝塞尔曲线中的一条：
var k1：Number = Math.tan （Math.PI / 8）*半径;
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）;
函数arcTriangle（t：MovieClip，rect：Rectangle）：MovieClip {
//用于绘制带角落弧的三角形的主函数
//定义3个随机点（作为t的属性存储）
tp = new Array（3）;
t.p [0] = randomPoint（rect）;
t.p [1] = randomPoint（rect）;
t.p [2] = randomPoint（rect）;
//画一个三角形
t.createEmptyMovieClip（triangle，0）;
drawTriangle（t.triangle，t.p [0]，t.p [1]，t.p [2]）;
//画一个实心的三角形作为掩码
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;
//在每个角落添加一个红圈
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）;
//掩盖圆圈，只有内部弧线可见
t.arcHolder.setMask（t.mask）;
//显示每个点的坐标
var tf：TextField;
for（var i = 0; i <3; i ++）{
tf = t.createTextField（text+ i，i + 3，tp [i] .x，tp [i] y，1，1）;
tf.autoSize = true;
tf._xscale = 10000 / t._parent._xscale;
tf._yscale = 10000 / t._parent._yscale;
//使用unicode值得到A，B和C：
tf.text = String.fromCharCode（65 + i）+（+ tp [i] .x + ，+ tp [i] .y +）;
}
return t;请记住：您可以接受最喜欢的答案，每个问题都通过点击大的勾号（勾号http：//roi.webfactional .com / img / so / so_tick.png ）在左侧。谢谢。
how i display the coordinates of a random triangle in a graph which ranges from -10 to +10 in XY axis with the points like A(2,1) etc with arcs in each corner, in actionscript 2.0
解决方案 OK, so far we've done triangles with arcs, triangles on a grid, and triangles with coordinates. Now it's time to combine all these into one piece of code. You've asked for a grid size of -10 to +10, but it's only a little bit more work to make it work for any size grid (well, within limits).
We need to deal with converting between your chosen range (-10 to +10) and the size of your stage (in pixels). The trick to this is to create a movieClip ('myGraph') to hold our -10 to +10 grid, and then scale it up to fit the size of the stage (we'll leave a 20 pixel margin around the edge); we'll calculate a rectangle ('displayRect') to represent the maximum size we'd like myGraph to be. We also want to position myGraph so it's origin is in the right place, and flip it vertically so the Y-axis increases as you move upward on the screen.
Once we've done all that, we can draw inside myGraph using our desired units (-10 to +10) with no further need to convert into pixels - the scaling of myGraph takes care of that for us automatically.
Next, we make a 'grid' clip inside myGraph, and draw a grid in it using the drawGrid() function.
Then we make an 'arcTriangle' clip inside myGraph, and draw our triangle inside it. We use the same technique as previously, by drawing our triangle, drawing a red circle at each corner, then using a copy of the triangle as a mask to reveal only the internal arcs of the circles. Then we make a textField at each corner to display the coordinates of each point (note that these need to be scaled back up to normal size, otherwise the text is too small to read!).
Lastly, we add an onRelease function to myGraph, which draws a new random arcTriangle when clicked.
alt text http://roi.webfactional.com/img/so/arctriangles.jpg
Here's the code...
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;
}
Remember: you can accept a favourite answer to each of your questions by clicking the big tick-mark (tick http://roi.webfactional.com/img/so/so_tick.png) on the left-hand side. Thank you.
这篇关于我如何显示一个随机的三角形的坐标在一个图形范围从+10到-10的XY轴在actionscript 2.0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![勾号http：//roi.webfactional .com / img / so / so_tick.png](\"http://roi.webfactional.com/img/so/so_tick.png\"){kind=link}
