周末在家研究了下用Flex实现神奇的贝塞尔曲线,这曲线主要采用的是FLex线程技术来实现,实现后,我一看运行效果,呵呵太神了…效果截图如下:
图片1
图2
代码如下:
CurveDemo.as
package org.luosijin.curve
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.TimerEvent;
import flash.filters.GlowFilter;
import flash.geom.Point;
import flash.utils.Timer;
[SWF(width="730", height="300", backgroundColor="0x000000", frameRate="24")]
public class CurveDemo extends Sprite
{
private var _radius:int = 100; //定义半径
private var _numPoints:Number = 30; //定义点数量
private var _points:Array = new Array();
private var _pre_r:Number = Math.PI * 0.0001;
private var _centX:Number = stage.stageWidth * 0.5;
private var _centY:Number = stage.stageHeight * 0.5;
private var _myTimer:Timer = new Timer(10, 0);
private var _color:Number = 0xACD8A4; //初始化颜色
private var _radians:Number = 0; //初始弧度值
private var _gf:GlowFilter = new GlowFilter();
public function CurveDemo()
{
_myTimer.addEventListener(TimerEvent.TIMER,onTimerHandler);
_myTimer.start();
//定义滤镜参数
_gf.blurX = _gf.blurY = 32;
_gf.color = 0xCBDAFF;
this.filters = [_gf];
stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown);
}
private function onTimerHandler(evt:Event):void
{
run();
}
private function run():void
{
graphics.clear();
_points = [];
_radians += _pre_r;
for(var i:int=1;i<_numPoints;i+=1)
{
var p:Point = new Point();
//重点部分正余弦作用
p.x = _centX + Math.cos(_radians*i)*i*5;
p.y = _centY + Math.sin(_radians*i)*i*5;
_points.push(p);
}
graphics.beginFill(_color,0.2);
graphics.lineStyle(1,_color,0.8);
graphics.moveTo(_centX,_centY);
for(i=2;i<_numPoints-2;i+=1)
{
graphics.curveTo(_points[i-1].x,_points[i-1].y,_points[i].x,_points[i].y);
graphics.curveTo(_points[i+1].x,_points[i+1].y,_centX,_centY);
}
graphics.endFill();
}
private function onKeyDown(evt:KeyboardEvent):void
{
switch (evt.keyCode)
{
case 97:
_color = 0x71CA65;
break;
case 98:
_color = -0xFF3300;
break;
case 99:
_color = 0xB5B0F3;
break;
case 100:
_color = 0xFA04C9;
break;
case 101:
_color = 0x62F6E5;
break;
case 102:
_color = 0xC07168;
break;
case 103:
_color = 0x75DE32;
break;
case 104:
_color = 0x32C1F0;
break;
case 105:
_color = 0x0285FF;
break;
}
}
}
}
CurveDemo.as2
package org.luosijin.curve
{
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.geom.*;
import flash.utils.*;
[SWF(width="730", height="500", backgroundColor="0x000000", frameRate="24")]
public class CurveDemo2 extends Sprite
{
private var _radius:int = 100;
private var _numPoints:Number = 30;
private var _points:Array;
private var _pre_r:Number = 0.000314159;
private var _centX:Number;
private var _centY:Number;
private var _myTimer:Timer;
private var _color:Number = 165375;
private var _radians:Number = 0;
private var _gf:GlowFilter;
public function CurveDemo2()
{
_points = new Array();
_centX =900* 0.5;
_centY =600* 0.5;
_myTimer = new Timer(10, 0);
_gf = new GlowFilter();
_myTimer.addEventListener(TimerEvent.TIMER,onTimerHandler);
_myTimer.start();
var _loc_1:int;
_gf.blurY = 32;
_gf.blurX = _loc_1;
_gf.color = 165375;
filters = [_gf];
}// end function
private function onTimerHandler(param1:Event) : void
{
run();
}// end function
private function run() : void
{
var _loc_2:Point;
graphics.clear();
_points = [];
_radians = _radians + _pre_r;
var _loc_1:Number=0;
while (_loc_1 < _numPoints)
{
// label
_loc_2 = new Point();
_loc_2.x = _centX + Math.cos(_radians * _loc_1) * 140;
_loc_2.y = _centY + Math.sin(_radians * _loc_1) * 140;
_points.push(_loc_2);
_loc_1 = _loc_1 + 1;
}// end while
graphics.beginFill(_color, 0.2);
graphics.lineStyle(1, _color, 0.8);
graphics.moveTo(_centX, _centY);
_loc_1 = 2;
while(_loc_1 < _numPoints-2){
graphics.curveTo(_points[_loc_1-1].x, _points[_loc_1-1].y, _points[_loc_1].x, _points[_loc_1].y);
graphics.curveTo(_points[_loc_1 + 1].x, _points[_loc_1 + 1].y, _centX, _centY);
_loc_1 = _loc_1 + 1;
}
graphics.endFill();
}// end function
}
}
分享到:
相关推荐
HTML实现贝塞尔曲线
用as代码实现的贝塞尔曲线。两个例子,都是非常好看的效果!
实现贝塞尔曲线的绘制,并可以移动控制点来改变曲线形状
一个用Android实现的贝塞尔曲线,包括二阶、三阶贝塞尔曲线。
这是一份C语言版本的bezier曲线(贝塞尔曲线)绘制代码,实现了二次和三次bezier曲线的绘制,可用于一系列给定的离散点的曲线平滑。此代码封装成函数,可以直接调用。脚本里边有参数和代码的注释,可供使用者学习和...
Qt 中有相当方便的绘制接口 ( 由 QPainter 提供 ) 。 例如贝塞尔曲线的 API: QPainterPath 的 quadTo() 和 ...因此,我想到利用贝塞尔的公式生成曲线点,然后用直线来连接,即可实现「 N阶贝塞尔曲线绘制 」。
此资源为利用unity制作的贝塞尔曲线实现的多种曲线,只需要拖拽自己创建的transform和定义点的个数实现多种曲线
python实现的贝塞尔曲线拟合,有测试数据
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们...
MFC实现贝塞尔曲线的绘制与鼠标交互
贝塞尔曲线实现直播点赞效果
用TC生存二次贝塞尔曲线,其实稍微改一下就可以实现三次贝塞尔曲线的了。
用于学习贝塞尔曲线原理,观察贝塞尔曲线。并初步了解曲线绘制方法。
python绘制贝塞尔曲线
手写opencv2实现贝塞尔bezier曲线 连续点击图片生成点 ,画出曲线
本项目为vs2013工程项目,贝塞尔曲线计算,控制点可以多个,支持二维数据,三维数据,使用c++语言编写,直接打开即可运行。
使用vc++ opengl 绘制贝塞尔曲线
通过使用贝塞尔曲线绘制折线图(直线的、曲线的)、绘制柱状图、绘制饼状图
通过属性动画实现控件沿贝塞尔曲线运动,有助于初学者或者研究属性动画或者贝塞尔曲线的码农学习