Flash与数学： 旋轮线(3)

  

 

 

 

 

 

 

  对公式改造之后，显然它已经不太符合原有的公式所在含义。不过在无意之中发现，这里改造会产生了别有一番的味道，正因为如此，这种曲线产生的图案是变得如此美丽。

 

原有的公式为：

  //创建外旋轮线
 //x=(a+b)cosθ-bcos[(a+b)θ/b]; 　　
 //y=(a+b)sinθ-bsin[(a+b)θ/b];

 

变化为

 //x=(a+b)cosθ-acos[(a+b)θ/b]; 　　
 //y=(a+b)sinθ-asin[(a+b)θ/b];

 

 

无意之中发现，偷换了一个值之后，效果出现另外一种图案。我们知道曲线会产生很多神奇的效果，这也是无法我估计的。传统与破旧立新之间就是一场较量。无论如何，他带给我们是震撼的感觉。

 

 

这次，我会导入一些组件来控制这种图形变化，和玫瑰线一样，传统的和后来经过发现后，由于角度的制度的不同产生的图案是又是不一样的。这也引起一个话题，究竟这个公式还是不是原有的数学含义呢？这真的是一种较量。但无论如何也好，公式会带我们帮助。同样这种工具帮助到我们。

 

 

在运行之前，需要导入kp作者的 类库包：

 

import com.bit101.components.Slider;

import com.bit101.components.Label;//标签工具

这样我们就可以利用他的功能了。

 

 

package {//创建外旋轮线//x=(a+b)cosθ-bcos[(a+b)θ/b]; 　　//y=(a+b)sinθ-bsin[(a+b)θ/b]; import flash.display.Sprite;import flash.events.*;import flash.display.Shape;import com.bit101.components.Slider;import flash.filters.GlowFilter;import com.bit101.components.Label;public class Main2 extends Sprite{private var pen:Shape=new Shape();//创建画笔用于绘图private var startX:Number = 250;//绘制图形的开始点x坐标private var startY:Number = 200;//绘制图形开始点的y坐标private var a_radius:Number = 100;//大圆半径 private var b_radius:Number = 10;//小圆半径private var sliderA:Slider; //调节组件private var sliderB:Slider; //调节组件public function Main2(){addChild(pen);pen.filters = [ new GlowFilter(0x00CCCC)];init();}private function init():void{sliderA = new Slider(Slider.HORIZONTAL,this,480,20,onChangeA);sliderB = new Slider(Slider.HORIZONTAL,this,480,40,onChangeB);var labelA:Label = new Label(this,440,16,"radiusA");var labelB:Label = new Label(this,440,34,"radiusB");}private function onChangeA(event:Event):void{a_radius = sliderA.value;trace(sliderA.value);CreatCycloid();}private function onChangeB(event:Event):void{b_radius = sliderB.value+1;CreatCycloid();}//创建外旋轮线private function CreatCycloid():void{pen.graphics.clear();pen.graphics.lineStyle(0,0xffffff);for (var i:int=0; i<360; i++){var rad:Number = i * Math.PI / 180;var x1:Number=startX+(a_radius+b_radius)*Math.cos(rad)-a_radius*Math.cos((a_radius+b_radius)*rad/b_radius);var y1:Number=startY+(a_radius+b_radius)*Math.sin(rad)-a_radius*Math.sin((a_radius+b_radius)*rad/b_radius);if (i == 0){pen.graphics.moveTo(x1,y1);}pen.graphics.lineTo(x1,y1);}}}}

 

 

 

 更改之后，我们依旧可以对滤镜颜色加以选择，提供一个组合框选择提供的颜色。这时候，引入一个ComboBox组件

import com.bit101.components.ComboBox; 

 

使用方法如下：

var labels:Array=["Red","Blue","Green"];
var  combox:ComboBox=new ComboBox(this,480,60,"Green",labels);

 

参数如下：

 

 public function ComboBox(parent:DisplayObjectContainer=null, xpos:Number=0, ypos:Number=0, defaultLabel:String="", items:Array = null)

 

依次是对应容器，x位置坐标，y位置坐标，默认的开始项标签，选择项数组

 

调用这函数后，使用选择框的里面函数进行对滤镜进行选择。你将会看到如下图案。如同烈火的系列般感觉。

 

package {//创建外旋轮线//x=(a+b)cosθ-bcos[(a+b)θ/b]; 　　//y=(a+b)sinθ-bsin[(a+b)θ/b]; import flash.display.Sprite;import flash.events.*;import flash.display.Shape;import flash.filters.GlowFilter;import com.bit101.components.Slider;import com.bit101.components.ComboBox;import com.bit101.components.Label;public class Main2 extends Sprite{private var pen:Shape=new Shape();//创建画笔用于绘图private var startX:Number = 250;//绘制图形的开始点x坐标private var startY:Number = 200;//绘制图形开始点的y坐标private var a_radius:Number = 100;//大圆半径 private var b_radius:Number = 10;//小圆半径private var sliderA:Slider; //调节组件private var sliderB:Slider; //调节组件private var combox:ComboBox; //组合选择框public function Main2(){addChild(pen);pen.filters = [ new GlowFilter(0x00CCCC)];//添加发光滤镜init();}//初始化组件private function init():void{sliderA = new Slider(Slider.HORIZONTAL,this,480,20,onChangeA);sliderB = new Slider(Slider.HORIZONTAL,this,480,40,onChangeB);var labelA:Label = new Label(this,440,16,"radiusA");//标签var labelB:Label = new Label(this,440,34,"radiusB");var labels:Array=["Red","Blue","Green"];combox=new ComboBox(this,480,60,"Green",labels); combox.addEventListener(Event.SELECT,onSelect);}private function onChangeA(event:Event):void{a_radius = sliderA.value;CreatCycloid();}private function onChangeB(event:Event):void{b_radius = sliderB.value+1;CreatCycloid();} //选择不同颜色的滤镜private function onSelect(event:Event):void{ switch(combox.selectedItem){case "Red":pen.filters = [ new GlowFilter(0xff0000)];break;case "Blue":pen.filters = [ new GlowFilter(0x0000ff)];break;case "Green":pen.filters = [ new GlowFilter(0x00CCCC)];break;}} //创建外旋轮线private function CreatCycloid():void{pen.graphics.clear();pen.graphics.lineStyle(0,0xffffff);for (var i:int=0; i<360; i++){var rad:Number = i * Math.PI / 180;var x1:Number=startX+(a_radius+b_radius)*Math.cos(rad)-a_radius*Math.cos((a_radius+b_radius)*rad/b_radius);var y1:Number=startY+(a_radius+b_radius)*Math.sin(rad)-a_radius*Math.sin((a_radius+b_radius)*rad/b_radius);if (i == 0){pen.graphics.moveTo(x1,y1);}pen.graphics.lineTo(x1,y1);}}}}

 

 

 

 为了更加好玩一些，引入rotationX ，rotationY，rotationZ的参数调节。

 做法是多创建几个Slider组件，对三个参数进行调节。

 

同样修改增加几个对象。用于调节使用。

 

private var contain:Sprite=new Sprite();//容器

contain.addChild(pen);

将画笔放入到容器当中。

旋转的时候，则采用对容器的旋转的方式进行处理。

 

contain.rotationX = sliderX.value;

contain.rotationY = sliderY.value;

contain.rotationZ = sliderZ.value;

 

   sliderX，sliderY，sliderZ 调节控件值调节为（0-360）之间

   sliderX.setSliderParams(0,360,0);
   sliderY.setSliderParams(0,360,0);
   sliderZ.setSliderParams(0,360,0);

 

这样基本上调节就完成了。

 

 

 

 package {//创建外旋轮线//x=(a+b)cosθ-bcos[(a+b)θ/b]; 　　//y=(a+b)sinθ-bsin[(a+b)θ/b]; import flash.display.Sprite;import flash.events.*;import flash.display.Shape;import flash.filters.GlowFilter;import com.bit101.components.Slider;import com.bit101.components.ComboBox;import com.bit101.components.Label;public class Main2 extends Sprite{private var pen:Shape=new Shape();//创建画笔用于绘图private var startX:Number = 250;//绘制图形的开始点x坐标private var startY:Number = 200;//绘制图形开始点的y坐标private var a_radius:Number = 100;//大圆半径 private var b_radius:Number = 10;//小圆半径private var sliderA:Slider;//调节组件private var sliderB:Slider;//调节组件private var sliderX:Slider;private var sliderY:Slider;private var sliderZ:Slider;private var combox:ComboBox;//组合选择框private var contain:Sprite=new Sprite();//容器public function Main2(){addChild(contain);contain.x=startX;contain.y=startY;contain.addChild(pen);pen.filters = [new GlowFilter(0x00CCCC)];//添加发光滤镜init();}//初始化组件private function init():void{sliderA = new Slider(Slider.HORIZONTAL,this,480,20,onChangeA);sliderB = new Slider(Slider.HORIZONTAL,this,480,40,onChangeB);sliderX = new Slider(Slider.HORIZONTAL,this,480,60,onChangeX);sliderY = new Slider(Slider.HORIZONTAL,this,480,80,onChangeY);sliderZ = new Slider(Slider.HORIZONTAL,this,480,100,onChangeZ);sliderX.setSliderParams(0,360,0);sliderY.setSliderParams(0,360,0);sliderZ.setSliderParams(0,360,0);var labelA:Label = new Label(this,436,16,"radiusA");//标签var labelB:Label = new Label(this,436,34,"radiusB");var labelX:Label = new Label(this,436,54,"rotationX");//标签var labelY:Label = new Label(this,436,74,"rotationY");var labelZ:Label = new Label(this,436,94,"rotationZ");//标签//ComboBox选择框内容var labels:Array = ["Red","Blue","Green"];combox = new ComboBox(this,480,120,"Green",labels);combox.addEventListener(Event.SELECT,onSelect);}private function onChangeA(event:Event):void{a_radius = sliderA.value;CreatCycloid();}private function onChangeB(event:Event):void{b_radius = sliderB.value + 1;CreatCycloid();}private function onChangeX(event:Event):void{contain.rotationX = sliderX.value;}private function onChangeY(event:Event):void{contain.rotationY = sliderY.value;}private function onChangeZ(event:Event):void{contain.rotationZ = sliderZ.value;}//选择不同颜色的滤镜private function onSelect(event:Event):void{switch (combox.selectedItem){case "Red" :pen.filters = [new GlowFilter(0xff0000)];break;case "Blue" :pen.filters = [new GlowFilter(0x0000ff)];break;case "Green" :pen.filters = [new GlowFilter(0x00CCCC)];break;}}//创建外旋轮线private function CreatCycloid():void{pen.graphics.clear();pen.graphics.lineStyle(0,0xffffff);for (var i:int=0; i<360; i++){var rad:Number = i * Math.PI / 180;var x1:Number=(a_radius+b_radius)*Math.cos(rad)-a_radius*Math.cos((a_radius+b_radius)*rad/b_radius);var y1:Number=(a_radius+b_radius)*Math.sin(rad)-a_radius*Math.sin((a_radius+b_radius)*rad/b_radius);if (i == 0){pen.graphics.moveTo(x1,y1);}pen.graphics.lineTo(x1,y1);}}}}

 

 

 

 最后，增加一个本地图片保存的功能。需要导入JPGEncoder类用于保存图片使用的类

 

 

 import com.bit101.components.PushButton;

 import com.adobe.images.JPGEncoder;
 import flash.utils.ByteArray;
 import flash.geom.Matrix;

 import  flash.net.FileReference;

 import flash.display.BitmapData;

等的类。

 

在10.0 flash cs4 新增的保存功能FileReference.save(参数一，参数二);

保存之前，进行编码操作，保存为ByteArray对象，适合系统的二进制编码。

 

 

问题是。我所保存的图片为什么清晰度不好，而且没有滤镜那种漂亮的效果，这是为什么？这里在设计的时候发现到问题。

具体不知道为什么？还有待去看看为什么

 

 

package {//创建外旋轮线//x=(a+b)cosθ-bcos[(a+b)θ/b]; 　　//y=(a+b)sinθ-bsin[(a+b)θ/b]; import flash.display.Sprite;import flash.events.*;import flash.display.Shape;import flash.filters.GlowFilter;import flash.display.Bitmap;import flash.display.BitmapData;import flash.net.*;import com.bit101.components.Slider;import com.bit101.components.ComboBox;import com.bit101.components.Label;import com.bit101.components.PushButton;import com.adobe.images.JPGEncoder;import flash.utils.ByteArray;import flash.geom.Matrix;public class Main2 extends Sprite{private var pen:Shape=new Shape();//创建画笔用于绘图private var startX:Number = 250;//绘制图形的开始点x坐标private var startY:Number = 200;//绘制图形开始点的y坐标private var a_radius:Number = 100;//大圆半径 private var b_radius:Number = 10;//小圆半径private var sliderA:Slider;//调节组件private var sliderB:Slider;//调节组件private var sliderX:Slider;private var sliderY:Slider;private var sliderZ:Slider;private var combox:ComboBox;//组合选择框private var button:PushButton;private var contain:Sprite=new Sprite();//容器public function Main2(){addChild(contain);contain.x = startX;contain.y = startY;contain.addChild(pen);pen.filters = [new GlowFilter(0x00CCCC)];//添加发光滤镜init();}//初始化组件private function init():void{sliderA = new Slider(Slider.HORIZONTAL,this,480,20,onChangeA);sliderB = new Slider(Slider.HORIZONTAL,this,480,40,onChangeB);sliderX = new Slider(Slider.HORIZONTAL,this,480,60,onChangeX);sliderY = new Slider(Slider.HORIZONTAL,this,480,80,onChangeY);sliderZ = new Slider(Slider.HORIZONTAL,this,480,100,onChangeZ);sliderX.setSliderParams(0,360,0);sliderY.setSliderParams(0,360,0);sliderZ.setSliderParams(0,360,0);var labelA:Label = new Label(this,436,16,"radiusA");//标签var labelB:Label = new Label(this,436,34,"radiusB");var labelX:Label = new Label(this,436,54,"rotationX");//标签var labelY:Label = new Label(this,436,74,"rotationY");var labelZ:Label = new Label(this,436,94,"rotationZ");//标签//ComboBox选择框内容var labels:Array = ["Red","Blue","Green"];combox = new ComboBox(this,480,120,"Green",labels);combox.addEventListener(Event.SELECT,onSelect);button = new PushButton(this,480,150,"PHOTO",onSaveHandler);}private function onChangeA(event:Event):void{a_radius = sliderA.value;CreatCycloid();}private function onChangeB(event:Event):void{b_radius = sliderB.value + 1;CreatCycloid();}private function onChangeX(event:Event):void{contain.rotationX = sliderX.value;}private function onChangeY(event:Event):void{contain.rotationY = sliderY.value;}private function onChangeZ(event:Event):void{contain.rotationZ = sliderZ.value;}//选择不同颜色的滤镜private function onSelect(event:Event):void{switch (combox.selectedItem){case "Red" :pen.filters = [new GlowFilter(0xff0000)];break;case "Blue" :pen.filters = [new GlowFilter(0x0000ff)];break;case "Green" :pen.filters = [new GlowFilter(0x00CCCC)];break;}} //保存图案private function onSaveHandler(event:MouseEvent):void{var bitmapdata:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0);var mt:Matrix=new Matrix();mt.tx = startX;mt.ty = startY;contain.transform.matrix = mt;bitmapdata.draw(contain,contain.transform.matrix);var jpg:JPGEncoder = new JPGEncoder(100);var byte:ByteArray = jpg.encode(bitmapdata);var save:FileReference=new FileReference();save.save(byte,"PHOTO.jpg");byte.clear();}//创建外旋轮线private function CreatCycloid():void{pen.graphics.clear();pen.graphics.lineStyle(0,0xffffff);for (var i:int=0; i<360; i++){var rad:Number = i * Math.PI / 180;var x1:Number=(a_radius+b_radius)*Math.cos(rad)-a_radius*Math.cos((a_radius+b_radius)*rad/b_radius);var y1:Number=(a_radius+b_radius)*Math.sin(rad)-a_radius*Math.sin((a_radius+b_radius)*rad/b_radius);if (i == 0){pen.graphics.moveTo(x1,y1);}pen.graphics.lineTo(x1,y1);}}}}