어떻게 CocosCreator 에 시 크 한 레이더 그림 을 그 릴 수 있 습 니까?

머리말
레이더 도(Radar Chart)는 네트워크 도,별 그림 또는 거미줄 그림 이 라 고도 부른다.
같은 점 에서 시 작 된 축 에 나타 나 는 세 개 이상 의 정량 변 수 를 나타 내 는 2 차원 도표 형식 으로 다 원 화 된 데 이 터 를 나타 내 는 도형 방법 이다.
세 개 이상 의 차원 을 표시 하 는 변수 에 적 용 됩 니 다.

레이더 그래프📚데이터 통계 나 대 비 는 어떤 변수 가 비슷 한 값 을 가지 고 있 는 지,변수 간 에 이상 값 이 있 는 지 확인 하 는 데 유용 하 다.
또한 많은 게임 에서 레이더 그림 의 모습 이 있어 직관 적 으로 데 이 터 를 보 여주 고 비교 할 수 있다.
예 를 들 어 왕자 영 요 중의 대전 자료 에 사용 되 었 습 니 다.

그러면 이 글 에서 가죽 은 Cocos Creator 에서 Graphics 구성 요 소 를 이용 하여 멋 진 레이더 그림 을 그 리 는 방법 을 공유 합 니 다~
글 에서 읽 기 체험 을 보장 하기 위해 원본 코드 를 어느 정도 삭감 할 것 이다.
레이더 그림 구성 요소:https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts
미리 보기
일단 효 과 를 볼 게 요.
온라인 미리 보기:https://ifaswind.gitee.io/eazax-cases/?case=radarChart
두 개의 데이터

유동 데이터

알 쏭 달 쏭 하 다

예술 은 폭발 이다.

점차 주제 에서 벗어나다

본문
그래 픽 구성 요소
본 격 적 으로 레이더 그림 을 만 들 기 전에 Cocos Creator 엔진 의 Graphics 구성 요 소 를 대충 알 아 보 자.
Graphics 구성 요 소 는 cc.RenderComponent 에 계승 되 었 으 며,이 구성 요 소 를 이용 하여 우 리 는 화판 과 표 와 같은 기능 을 실현 할 수 있 습 니 다.
속성(속성)
다음은 우리 가 이번에 사용 할 속성 입 니 다:

lineCap:선의 양 끝 을 설정 하거나 되 돌려 주 는 스타일(무,원형 모자 또는 사각형 모자)

lineJoin:두 선 이 교차 할 때의 코너 스타일(사각,원 각 또는 첨 각)

을 설정 하거나 되 돌려 줍 니 다.

lineWidth:현재 화필 의 굵기(선의 너비)

을 설정 하거나 되 돌려 줍 니 다.

strokeColor:현재 붓 의 색 을 설정 하거나 되 돌려 줍 니 다

fillColor:충전 용 색상(페인트 통)

을 설정 하거나 되 돌려 줍 니 다.
함수(Functions)
다음은 우리 가 이번에 사용 할 함수 입 니 다.

moveTo(x, y):붓 을 들 고 지 정 된 위치 로 이동(라인 을 만 들 지 않 음)

lineTo(x, y):붓 을 내 려 놓 고 지 정 된 위치 까지 직선 을 만 듭 니 다

circle(cx, cy, r):지 정 된 위치(원심)에 원

을 그립 니 다.

close():만 든 라인(lineTo( ) 에 해당)

을 닫 습 니 다.

stroke():만 들 어 졌 지만 그리 지 않 은 선 을 그립 니 다.

fill():현재 선 으로 둘러싸 인 구역 을 채 웁 니 다(선 이 닫 히 지 않 으 면'아 날로 그 닫 기'출발점 과 종점)

clear():현재 화판 의 모든 것 을 지 워 라

그래 픽 구성 요소 문서:http://docs.cocos.com/creator/manual/zh/components/graphics.html?h=graphics
격자 를 그리다
먼저 표준 레이더 그림 이 어떤 특징 이 있 는 지 살 펴 보 자.

발 견 했 어?레이더 그림 의 기본 특징 은 다음 과 같다.

은 3 개 이상 의 축선 이 있다

축 과 축 사이 의 협각 은

과 같다.

각 축 에 중심 점 을 제외 하고 적어도 1 개의 눈금 이 있어 야 한다

각 축 에 똑 같은 눈금 이 있다

눈금 과 눈금 사이 의 거리 도

과 같다.

축 간 의 눈금 이 연결 되 어 격자 선

을 형성한다.
계산 축선 각도
먼저 축 간 의 협각 도 수[360 ÷ ]를 계산 한 다음 에 모든 축의 각 도 를 계산한다.

this.angles = [];
//     
const iAngle = 360 / this.axes;
for (let i = 0; i < this.axes; i++) {
    //   
    const angle = iAngle * i;
    this.angles.push(angle);
}

계산 눈금 좌표
레이더 도 는 적어도 3 개의 축 을 가지 고 있 으 며,각 축 에는 1 개 이상 의 눈금 이 있어 야 한다(중심 점 은 포함 되 지 않 음).

따라서 우 리 는 2 차원 배열 을 사용 하여 모든 눈금 의 좌 표를 저장 하고 가장 바깥쪽(즉 축선 의 끝)의 눈금 부터 기록 하여 우리 가 그 릴 때 읽 기 에 편리 하도록 해 야 한다.

//         
let scalesSet: cc.Vec2[][] = [];
for (let i = 0; i <       ; i++) {
    //              
    let scales = [];
    //           
    const length =      - (     /        * i);
    for (let j = 0; j < this.angles.length; j++) {
        //        
        const radian = (Math.PI / 180) * this.angles[j];
        //                 （0, 0）   
        const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian));
        //     
        scales.push(pos);
    }
    //       
    scalesSet.push(scales);
}

축선 과 외 망 격자 선 그리 기
축선
중심 점 (0, 0) 과 최 외층 scalesSet[0] 을 연결 하 는 눈금 은 바로 축선 이다.

//           
for (let i = 0; i < scalesSet[0].length; i++) {
    //         
    this.graphics.moveTo(0, 0);
    //     
    this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}

외 망 격 선
모든 축의 가장 바깥쪽 scalesSet[0] 을 연결 하 는 눈금 은 바로 외부 네트워크 격자 선 을 형성 합 니 다.

//          
this.graphics.moveTo(scalesSet[0][0].x, scalesSet[0][0].y);
for (let i = 1; i < scalesSet[0].length; i++) {
    //     
    this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}
//       （    ）
this.graphics.close();

채 우 고 그리 기
여기 서 먼저 색 을 채 우 고 선 을 그 려 야 합 니 다.그렇지 않 으 면 축선 과 격자 선 이 가 려 집 니 다.

//            
this.graphics.fill();
//         （       ）
this.graphics.stroke();

그래서 지금 우 리 는 이런 물건 이 생 겼 다.

인 라인 그리 기
눈금 이 1 개 이상 일 때 내부 격자 선 을 그 려 야 합 니 다.눈금 좌표 집합 아래 표 1 부터 그립 니 다.

//      1          
if (scalesSet.length > 1) {
    //     1   （   0      ）
    for (let i = 1; i < scalesSet.length; i++) {
        //          
        this.graphics.moveTo(scalesSet[i][0].x, scalesSet[i][0].y);
        for (let j = 1; j < scalesSet[i].length; j++) {
            //     
            this.graphics.lineTo(scalesSet[i][j].x, scalesSet[i][j].y);
        }
        //       （    ）
        this.graphics.close();
    }
    //         （    ）
    this.graphics.stroke();
}

이렇게 해서 우리 레이더 그림 의 밑그림 을 다 그 렸 다.

그림 데이터 
밑줄 논 리 를 작성 하기 전에 우리 가 필요 로 하 는 데이터 구 조 를 확인 하 십시오.

수치 배열(필수,소수 형식의 비율,최소 3 개 값 포함)

선의 너비(선택 가능,지정 하지 않 으 면 기본 값 사용)

선의 색상(선택 가능,지정 하지 않 으 면 기본 값 사용)

채 워 진 색상(선택 가능,지정 하지 않 으 면 기본 값 사용)

노드 의 색상(선택 가능,지정 하지 않 으 면 기본 값 사용)

구체 적 인 데이터 구 조 는 다음 과 같다.(내 보 내기 형식 은 외부 에서 사용 하기에 편리 하 다)

/**
 *      
 */
export interface RadarChartData {

    /**    */
    values: number[];

    /**      */
    lineWidth?: number;

    /**      */
    lineColor?: cc.Color;

    /**       */
    fillColor?: cc.Color;

    /**       */
    joinColor?: cc.Color;

}

데이터 그리 기
데 이 터 를 그 리 는 것 은 비교적 간단 하 다.우 리 는 데이터 점 이 도표 에 있 는 위 치 를 계산 하고 데 이 터 를 연결 하면 된다.draw 함수 에서 우 리 는 한 부 이상 의 레이더 그림 데 이 터 를 받 고 순서대로 그 려 낸다(⚠️긴 코드 경고):

/**
 *     
 * @param data   
 */
public draw(data: RadarChartData | RadarChartData[]) {
    //     
    const datas = Array.isArray(data) ? data : [data];

    //       
    for (let i = 0; i < datas.length; i++) {
        //     
        this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
        this.graphics.fillColor = datas[i].fillColor || defaultOptions.fillColor;
        this.graphics.lineWidth = datas[i].lineWidth || defaultOptions.lineWidth;

        //       
        let coords = [];
        for (let j = 0; j < this.axes; j++) {
            const value = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            const length = value * this.axisLength;
            const radian = (Math.PI / 180) * this.angles[j];
            const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian))
            coords.push(pos);
        }

        //     
        this.graphics.moveTo(coords[0].x, coords[0].y);
        for (let j = 1; j < coords.length; j++) {
            this.graphics.lineTo(coords[j].x, coords[j].y);
        }
        this.graphics.close(); //     
        
        //       
        this.graphics.fill();
        //     
        this.graphics.stroke();

        //       
        for (let j = 0; j < coords.length; j++) {
            //   
            this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
            this.graphics.circle(coords[j].x, coords[j].y, 2);
            this.graphics.stroke();
            //   
            this.graphics.strokeColor = datas[i].joinColor || defaultOptions.joinColor;
            this.graphics.circle(coords[j].x, coords[j].y, .65);
            this.graphics.stroke();
        }

    }
}

여기까지 우 리 는 이미 사용 가능 한 레이더 도 를 성공 적 으로 만 들 었 다.

하지만!우리 의 여정 은 별 바다!재 료 를 좀 넣 어야 해!
완전 정적 레이더 그림 은 너무 재미 없고 평범 하 니 움 직 일 방법 을 생각해 봐 야 겠 어!
우리 의 레이더 그래프 데이터 의 수 치 는 배열 형식 인 데,어떻게 해야만 이 수치 들 을 움 직 일 수 있 을 까?
Cocos Creator 가 제공 한 Tween 느 린 시스템 덕분에 복잡 한 데 이 터 를 쉽게 움 직 일 수 있 습 니 다!
우 리 는 이렇게,이렇게,그리고 그렇게,아주 간단 하지 않 습 니까?cc.tween 임의의 대상 의 임의의 속성 을 늦 추 는 것 을 지원 합 니 다.
완 동 시스템:http://docs.cocos.com/creator/manual/zh/scripting/tween.html
그리고 저 는'만능 굴착 Shader'에서 도 완 동 시스템 을 사용 해서 굴착 을 움 직 였 습 니 다.
온라인 미리 보기:https://ifaswind.gitee.io/eazax-cases/?case=newGuide
나의 생각 은:

현재 데 이 터 를 현재 인 스 턴 스 의 this.curDatas 에 저장 합 니 다.

새로운 데 이 터 를 받 았 을 때 cc.tween 을 사용 하여 this.curData 의 속성 을 늦 추 었 습 니 다

은 update 에서 draw 함 수 를 호출 하여 프레임 마다 this.curDatas 의 데 이 터 를 다시 그립 니 다

프레임 마다 업데이트

//        
private curDatas: RadarChartData[] = [];

protected update() {
    if (!this.keepUpdating) return;
    //       
    this.draw(this.curDatas);
}

유동 데이터

/**
 *     
 * @param data     
 * @param duration     
 */
public to(data: RadarChartData | RadarChartData[], duration: number) {
    //       
    this.unscheduleAllCallbacks();
    
    //       
    const datas = Array.isArray(data) ? data : [data];

    //       
    this.keepUpdating = true;

    //    ！
    for (let i = 0; i < datas.length; i++) {
        //      ！
        //           ，        ！
        for (let j = 0; j < this.curDatas[i].values.length; j++) {
            //        1（  100%）
            const value = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            cc.tween(this.curDatas[i].values)
                .to(duration, { [j]: value })
                .start();
        }
        //      ！
        //             ！
        cc.tween(this.curDatas[i])
            .to(duration, {
                lineWidth: datas[i].lineWidth || this.curDatas[i].lineWidth,
                lineColor: datas[i].lineColor || this.curDatas[i].lineColor,
                fillColor: datas[i].fillColor || this.curDatas[i].fillColor,
                joinColor: datas[i].joinColor || this.curDatas[i].joinColor
            })
            .start();
    }

    this.scheduleOnce(() => {
        //       
        this.keepUpdating = false;
    }, duration);
}

수치 와 스타일 이 모두 움 직 이기 시작 했다.

레이더 그림 구성 요소:https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts
코 코스 크 리 에이 터 에 멋 진 레이더 그림 을 그 리 는 방법 에 대한 자세 한 내용 입 니 다.코 코스 크 리 에이 터 가 레이더 그림 을 그 리 는 것 에 관 한 자 료 는 다른 관련 글 을 주목 해 주세요!