zoukankan      html  css  js  c++  java
  • 绘制三次贝塞尔曲线

    此处为TypeScript代码 
    cc()//创建背景随机园
    kxcc()//创建背景随机空心园

    /**
     *
     * @author 
     *
     */
    class BG extends egret.Sprite{
        public constructor() {
            super();
            this.once(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
        }
        
        private onAddToStage(){
            var bg:egret.Shape=new egret.Shape();
            bg.graphics.beginFill(0x000000);
            bg.graphics.drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight);
            bg.graphics.endFill();
            this.addChild(bg);
            
            for(var i:number=0;i<50;i++){
                this.cc();
            }
            
            for(var j:number=0;j<7;j++){
                this.kxcc();
            }
            
            
            var arrControlP1=[
                [],
                []
            ];
            
            var lineSp:egret.Sprite=new egret.Sprite();
            this.addChild(lineSp);
            
            for(var m:number=0;m<10;m++){
                
                var moveP = new Point2D(100,this.stage.stageHeight/2 + Math.random() * 100 - 50);
                    
                var fh = Math.random() < 0.5?-1:1;
                
                var minOffsetY=30;
                var rdOffsetY = 100;
                    
                var rd = Math.random() * rdOffsetY;
                
                var jl = fh * (minOffsetY + rd);
                    
                var controlP1 = new Point2D(170 + Math.random() *100,0);
                  controlP1.y = moveP.y + jl;
                      
                var bfb = fh * (rd / rdOffsetY);
                console.log('moveP.y:%d,   rd:%d,    controlP1.y:%d,   百分比:',moveP.y,rd,controlP1.y,bfb);
                    
                var controlP2 = new Point2D(100 + Math.random() * 100,0);
                controlP2.y = moveP.y+bfb*250;
                console.log(controlP2.y);
                
                var endP = new Point2D(0,0);
                endP.y = moveP.y + bfb * 350;
                endP.x=250+Math.random()*50;
                      
                var cp = [moveP,controlP1,controlP2,endP];
                
                  var line:egret.Shape=new egret.Shape();
                  line.graphics.lineStyle(2,0xc6017d+(0xffc600 - 0xc6017d)* Math.random());
                  line.graphics.moveTo(cp[0].x,cp[0].y);
                  line.graphics.endFill();
                  lineSp.addChild(line);
                this.arrLine.push(line);
                
                line['points']=this.ComputeBezier(cp,100,[]);
                //console.log(line['points']);
            }
            //console.log(this.arrLine.length);
            
            /*lineSp.anchorOffsetX = lineSp.x =this.stage.stageWidth/2;
            lineSp.anchorOffsetY = lineSp.y =this.stage.stageHeight/2;
            lineSp.rotation=90;*/
            
            
            this.addEventListener(egret.Event.ENTER_FRAME,this.onEnterframe,this);
        }
        
        private arrLine=[];
        private iIndex=0;
        private onEnterframe(event:egret.Event){
            for(var m: number = 0; m < this.arrLine.length; m++) {
                var line= this.arrLine[m];
                if(line['points'][this.iIndex])
                    line.graphics.lineTo(line['points'][this.iIndex].x,line['points'][this.iIndex].y);
            }
            this.iIndex++;
        }
        private cc(circle?:egret.Shape){
            if(!circle){
                circle= new egret.Shape();
                circle.graphics.beginFill(0xffffff * Math.random());
                circle.graphics.drawCircle(0,0,1+Math.random()*20);
                circle.graphics.endFill();
                this.addChild(circle);
            }
            circle.alpha = 0;
            circle.scaleX = circle.scaleY = 0;
            circle.x = this.stage.stageWidth * Math.random();
            circle.y = this.stage.stageHeight * Math.random();
            var delay=Math.random()*2000;
            var duration = 2000 + Math.random() * 2000;
            var alpha=0.1+Math.random()*0.9;
            egret.Tween.get(circle)
                .wait(delay).to({scaleX:1,scaleY:1,alpha:alpha},duration)
                .wait(delay).to({ scaleX: 0,scaleY: 0,alpha: 0 },duration).call(function(){
                    this.cc(circle);
                },this);
        }
        private kxcc(circle?:egret.Shape) {
            if(!circle) {
                circle = new egret.Shape();
                circle.graphics.lineStyle(1,0xffffff);
                //circle.graphics.beginFill(0xffffff * Math.random());
                circle.graphics.drawCircle(0,0,150 + Math.random() * 150);
                circle.graphics.endFill();
                this.addChild(circle);
            }
            circle.alpha = 0;
            circle.scaleX = circle.scaleY = 0.5;
            circle.x = this.stage.stageWidth * Math.random();
            circle.y = this.stage.stageHeight * Math.random();
            var delay = Math.random() * 4000;
            var duration = 2000 + Math.random() * 2000;
            var alpha = 0.1 + Math.random() * 0.9;
            egret.Tween.get(circle).wait(delay)
                .to({ scaleX: 1,scaleY: 1,alpha: alpha },duration)
                .to({ scaleX: 1.5,scaleY: 1.5,alpha: 0 },duration).call(function() {
                    this.kxcc(circle);
                },this);
        }
        
        
        /*
             cp在此是四個元素的陣列:
             cp[0]為起始點,或上圖中的P0
             cp[1]為第一個控制點,或上圖中的P1
             cp[2]為第二個控制點,或上圖中的P2
             cp[3]為結束點,或上圖中的P3
             t為參數值,0 <= t <= 1
            */
          private PointOnCubicBezier(cp,t) {
            var ax,bx,cx;
            var ay,by,cy;
            var tSquared,tCubed;
            var result = new Point2D();
        
            /*計算多項式係數*/
        
            cx = 3.0 * (cp[1].x - cp[0].x);
            bx = 3.0 * (cp[2].x - cp[1].x) - cx;
            ax = cp[3].x - cp[0].x - cx - bx;
        
            cy = 3.0 * (cp[1].y - cp[0].y);
            by = 3.0 * (cp[2].y - cp[1].y) - cy;
            ay = cp[3].y - cp[0].y - cy - by;
        
            /*計算位於參數值t的曲線點*/
        
            tSquared = t * t;
            tCubed = tSquared * t;
        
            result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
            result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
        
            return result;
        }
        
        /*
             ComputeBezier以控制點cp所產生的曲線點,填入Point2D結構的陣列。
             呼叫者必須分配足夠的記憶體以供輸出結果,其為<sizeof(Point2D) numberOfPoints>
          */
    
          private ComputeBezier(cp,numberOfPoints,curve) {
            var dt;
            var i;
        
            dt = 1.0 / (numberOfPoints - 1);
        
            for(i = 0;i < numberOfPoints;i++)
                curve[i] = this.PointOnCubicBezier(cp,i * dt);
                
            return curve;
        }
    }
  • 相关阅读:
    加签验签
    .net core三个生命周期
    List,IList,IEnumerable的区别
    IHttpClientFactory 模拟http请求
    TDengine在Linux下的安装
    Linux环境下安装jdk
    在 React 中使用 JSX 的好处
    React介绍(讲人话)
    React是什么,为什么要使用它?
    mac系统下给文件夹加密方法
  • 原文地址:https://www.cnblogs.com/izengbin/p/6844645.html
Copyright © 2011-2022 走看看