Egert实现五点连线（创意参考：网易爱的不同定义）［附源码］

本文链接：https://blog.csdn.net/gaofei880219/article/details/80143160

背景

需求为“一笔连接五点，画出星座图腾”，即手指画线穿过5个点，画出12种不同图形，播放对应的12星座动画。

分析

主要技术点有两个：一是五点连线与12星座的对应关系，二是五点连线的技术实现。

实现方法

第一个技术点，五点连线的情况分析。

把5个点命名：点1、点2、点3、点4、点5，因为最终是1条线，对5点的先后顺序没有要求，这里假设起始点为点1，那么列举所有的连线情况，共有24种情况，而画线分为顺时针和逆时针，即“1-2-3-4-5”与“1-5-4-3-2”形成的图形是一样的，所以共有12种情况，如下图：

然后通过定义星座对象，把星座与这个24种点的顺序一一对应，代码如下：

        let sign1 = {  
            name: "巨蟹座",
            array: [[1,2,3,4,5], [1,5,4,3,2]]
        }
        let sign2 = {
            name: "双子座",
            array: [[1,4,2,5,3], [1,3,5,2,4]]
        }
        let sign3 = {
            name: "双鱼座",
            array: [[1,2,4,3,5], [1,5,3,4,2]]
        }
        ...

第二个技术点，五点连线的技术实现。

先分析两点画一条线段的实现思路，直线使用一个小的Image来做（主要考虑易于拓展连线样式），设置成九宫格模式，改变Image宽度，来改变线段的长度，代码如下：

    // 绘图函数
    private updateLine(): void {    
        // this.startPos为起始点，this.endPos为终点（即touchmove时的当前点）
        // 计算角度（角度的计算与Cocos的不一样，应该跟Egret的坐标系有关）
        let radian = Math.atan2(this.endPos.x - this.startPos.x, this.endPos.y - this.startPos.y);
        let rotation = (360 - 180 * radian / Math.PI + 90) % 360;
        // 旋转线条
        this.blockArr[0].rotation = rotation;
        //设置宽度，这里是用宽度改变的线条长度
        this.blockArr[0].width =  egret.Point.distance(this.startPos, this.endPos);
    }

再来看五点时的情况，当手指触摸到五点之一时，把这个点当作第一条线段的起始点（开始绘图函数），触摸到第二个点时，把这个点当作第一条线段的终点及第二条线段的起始点，......，当触摸到第五个点时，把这个点当作第四条线段的终点及第五条线段的起始点（结束绘图函数），自动绘制第五条线段到第一个点，完成绘图。

绘图完成后，根据触摸点的顺序来判断对应的星座类型，代码如下：

    // 星座动画
    private showSignAnim(): void {
        // 给连线点数组排序，使其从1开头
        // this.hasPointArr为连线点数组
        let checkArr = []; // 临时数组
        for(let i = 0; i < this.hasPointArr.length; i++){
            if(this.hasPointArr[i] == 1){
                checkArr = this.hasPointArr.splice(i, this.hasPointArr.length - i);
                for(let j = checkArr.length; j > 0; j--){
                    this.hasPointArr.splice(0, 0, checkArr[j - 1]);
                }
            }
        }
        for(let i = 0; i < this.signArr.length; i++){
            for(let j = 0; j < this.signArr[i].array.length; j++){
                if(this.signArr[i].array[j].toString() == this.hasPointArr.toString()){
                    // do something
                }
            }
        }
    }