美文网首页
Laya:鼠标事件实现节点(图片等)沿着贝塞尔曲线移动

Laya:鼠标事件实现节点(图片等)沿着贝塞尔曲线移动

作者: 一眼就认出你 | 来源:发表于2020-06-24 11:47 被阅读0次

效果:鼠标在舞台上拖动,黄色三角形沿着红色贝塞尔曲线移动


贝塞尔曲线.png

语言:AS3
完整代码:在main.as中实例并调用即可

//main.as中的调用代码
var bz:BezierPath1=new BezierPath1();
bz.x=50;
bz.y=50;
Laya.stage.addChild(bz);
bz.init();

//代码块
package  {
    import laya.maths.Point;
    import laya.display.Sprite;
    import laya.maths.Bezier;
    import laya.events.Event;

    public class BezierPath1  extends Sprite{
        //初始化
        public function init(): void {          
            this.addChild(logo)
            //画三角形
            logo.pos(10, 10)    
            logo.graphics.drawPoly(-10, -20, [0, 50, 25, 0, 50, 50], "#ffff00");    
            //起始点、拉力点、终点
            var points:Array = [logo.x, logo.y,400, 100, 100, 500]
            //使用贝塞尔曲线工具类生成60个点
            var array:Array = Bezier.I.getBezierPoints(points, 60)
            console.log("array:", array)
            for(var i:int = 0;i<array.length;i=i+2){
                pointArray.push(new Point(array[i],array[i+1]));
            }

            //画轨道
            for(i= 0;i<pointArray.length;i=i+2){
                var logo1: Sprite = new Sprite();
                this.addChild(logo1)
                logo1.graphics.drawCircle(pointArray[i].x, pointArray[i].y, 2, 'red')
            }   
            //添加舞台点击事件
            Laya.stage.on(Event.MOUSE_DOWN,this,onTouchDown);
        }
        private var logo: Sprite = new Sprite();
        private var pointArray:Array=[];
        private var mouseDownY:int=0;
        private var touchBeginIndex:int=0;
        private var curIndex:int=0;     
        public function onTouchDown(e:Event):void{
            mouseDownY =  Laya.stage.mouseY;
            touchBeginIndex = curIndex;
           //注册鼠标移动、抬起事件
            Laya.stage.on(Event.MOUSE_MOVE,this,onTouchMove);
            Laya.stage.on(Event.MOUSE_UP,this,onMouseUp);
            Laya.stage.on(Event.MOUSE_OUT,this,onMouseUp);
        } 

        public function onTouchMove(e:Event):void{
             var curY:Number = Laya.stage.mouseY;
             var delta:Number = curY-mouseDownY;
             //计算移动速率
             curIndex = touchBeginIndex+Math.floor(delta/6); //拖动和移动速度
             if(curIndex<0){
                curIndex+=pointArray.length-1;//到尾部
             }
             if(curIndex>pointArray.length-1){//到头部
                curIndex-=pointArray.length-1
             } 
             //修改三角形位置
             logo.pos(pointArray[curIndex].x, pointArray[curIndex].y) 
        } 
        public function onMouseUp(e:Event):void{
            //解绑事件
            Laya.stage.off(Event.MOUSE_MOVE,this,onTouchMove);
            Laya.stage.off(Event.MOUSE_UP,this,onMouseUp);
            Laya.stage.off(Event.MOUSE_OUT,this,onMouseUp);
        } 
    }

     
}

参考链接:https://blog.csdn.net/nicepainkiller/article/details/91390452

相关文章

  • Laya:鼠标事件实现节点(图片等)沿着贝塞尔曲线移动

    效果:鼠标在舞台上拖动,黄色三角形沿着红色贝塞尔曲线移动 语言:AS3完整代码:在main.as中实例并调用即可 ...

  • QQ黏性控件原理实现

    QQ黏性贝塞尔曲线 效果 原理 判断触摸到图片 黏性效果通过贝塞尔曲线实现 触摸监听找到4个关键点 实现 判断触摸...

  • 开放的多点贝塞尔曲线实现

    开放的多点贝赛尔曲线实现 初识贝塞尔曲线 在实现开放的多点贝塞尔曲线之前,我们先了解下贝塞尔曲线的一些基本的知识....

  • BezierCurve -> 贝塞尔曲线

    一、贝塞尔曲线简介: 贝塞尔曲线是应用于二维图形应用程序的数学曲线。贝兹曲线由线段与节点组成,节点是可拖动的支点,...

  • 贝塞尔曲线

    实现1-7阶贝塞尔曲线的形成动画 自定义View——贝塞尔曲线

  • Android 实现波浪动画的两种方式

    一、国际惯例先上效果 二、实现思路 1、贝塞尔曲线实现 什么是贝塞尔曲线,贝塞尔曲线的原理,二阶、三阶、四阶、五阶...

  • 音视频开发之旅(40)-贝塞尔曲线和曲面

    目录 贝塞尔曲线基本知识 画贝塞尔曲线 让曲线动起来 画贝塞尔曲面 资料 收获 本篇最终实现效果如下: 篇外说明:...

  • Bezier曲线切割

    贝塞尔曲线 目标:在unity中展示Bezier曲线。 贝塞尔曲线原理 用代码实现 bezier数学公式 Bezi...

  • Android贝塞尔曲线相关资料

    资料整理: Android-贝塞尔曲线 贝塞尔曲线扫盲 练习贝塞尔曲线 贝塞尔曲线绘制在线演示(带坐标) 生成三阶...

  • ios知识点(7)贝塞尔曲线

    贝塞尔曲线扫盲iOS UIBezierPath贝塞尔曲线常用方法iOS UIBezierPath(贝塞尔曲线)iO...

网友评论

      本文标题:Laya:鼠标事件实现节点(图片等)沿着贝塞尔曲线移动

      本文链接:https://www.haomeiwen.com/subject/ywhrfktx.html