flash 绘图API：贝塞尔曲线

 

 

 今天有点累，不多想写东西，就是当练习。

贝塞尔曲线，也不用多介绍，不过这个东西还有很多没加入去的。今天允许我懒一点。不想解释了。

测试玩玩。具体的没有什么功能，其实还有很多种情况没加入去。等待完善

 

package { //贝塞尔曲线 import flash.display.Sprite; import flash.events.*; import flash.geom.*; public class Main extends Sprite { private var pen:Sprite=new Sprite(); private var circleA:CirclePoint; private var circleB:CirclePoint; private var circleC:CirclePoint; public function Main() { init(); } //初始化 private function init():void { drawGrid(20,30,16,16);//绘制网格 addChild(pen); pen.graphics.lineStyle(1,0xff0000); pen.graphics.moveTo(100,300); pen.graphics.curveTo(100,100,400,10); circleA=new CirclePoint(); circleA.addEventListener(MouseEvent.MOUSE_DOWN,circle_DragHandler); addChild(circleA); circleA.x=100; circleA.y=300; circleB=circleA.clone(); circleB.addEventListener(MouseEvent.MOUSE_DOWN,circle_DragHandler); addChild(circleB); circleB.x=400; circleB.y=10; circleC=circleA.clone(); circleC.addEventListener(MouseEvent.MOUSE_DOWN,circle_DragHandler); addChild(circleC); circleC.x=100; circleC.y=100; pen.graphics.moveTo(circleA.x,circleA.y); pen.graphics.lineTo(circleC.x,circleC.y); pen.graphics.moveTo(circleB.x,circleB.y); pen.graphics.lineTo(circleC.x,circleC.y); stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler); } private function circle_DragHandler(event:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); event.currentTarget.startDrag(false,new Rectangle(10,10,460,300));//控制拖动区间 } private function onMouseMoveHandler(event:MouseEvent):void { redraw(); } private function onMouseUpHandler(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler); circleA.stopDrag(); circleB.stopDrag(); } //重绘 private function redraw():void { pen.graphics.clear(); pen.graphics.lineStyle(1,0xff0000); pen.graphics.moveTo(circleA.x,circleA.y); pen.graphics.curveTo(circleC.x,circleC.y,circleB.x,circleB.y); pen.graphics.moveTo(circleA.x,circleA.y); pen.graphics.lineTo(circleC.x,circleC.y); pen.graphics.moveTo(circleB.x,circleB.y); pen.graphics.lineTo(circleC.x,circleC.y); } //绘制网格 private function drawGrid(rows :int,cols:int,titleW:int,titleH:int):void { this.graphics.lineStyle(1,0xffffff,0.2); for (var i:int=0; i<rows; i++) { for (var j:int=0; j<cols ; j++) { this.graphics.drawRect(j*titleW,i*titleH,titleW,titleH);//绘制矩形 } } } } } //创建点类 import flash.display.Sprite; internal class CirclePoint extends Sprite { public function CirclePoint(R:int=8) { this.graphics.lineStyle(0); this.graphics.beginFill(0xffffff); this.graphics.drawCircle(0,0,R); this.graphics.endFill(); } public function clone():CirclePoint { return new CirclePoint(); } public function move(x:Number,y:Number):void { this.x=x; this.y=y; } }

 

 

 

 随后，我们添加一个输出代码的功能。看看效果如何？通过记录我们三个点的位置，从而看到更改坐标后，就可以得到我们所想的图形

 

 

 

添加一个输出代码的功能

 

//输出文本 private function Printf():String { var codeMsg:String; codeMsg="this.graphics.lineStyle(1,0xff0000);"+"/n" +"this.graphics.moveTo("+circleA.x+","+circleA.y+");"+"/n" +"this.graphics.curveTo("+circleC.x+","+circleC.y+","+circleB.x+","+circleB.y+");"; return codeMsg; }

 

初始化文本。并看看输出的情况如何。

 

在init()函数里面添加里面的函数。则可以看到输出的面板

并且初始化文本，指定他们的坐标，背景，宽度高度等

//输出文本 private function initTextArea():void { textArea=new TextField(); textArea.textColor=0x000000; addChild(textArea); textArea.border=true; textArea.background=true; textArea.x=0; textArea.y=330; textArea.width=480; textArea.height=100; textArea.wordWrap=true; textArea.text=Printf(); }

 

 

 

 

扩展，贝塞尔曲线有两次，三次和四次等，而现在这种曲线应用很广泛了。对于flash而言使用了它一部分的已经可以扩展很多话题。有兴趣可以到wonderfl 哪里观看，这方面使用，相信精彩会在后面。