カスタムview(LOLコンピテンシーグラフを描く)

以下のカスタムグラフを紹介するときは、まず絵を描く3つの要素を説明します.canvas翻訳はキャンバス、paintはブラシ、Pathオブジェクトはパスと言います.
一、canvas属性:
①:canvasキャンバス自体には座標系があり、Windows層のどこにviewがあるか、その座標原点がWindows層の左上隅にあるか、我々代数幾何学におけるデカルト座標系とは異なり、Windows層の右下移動は累加正数であるつまり、画面左上隅を原点とし、右下はWindows層の正X軸と正Y軸である
図形描画座標系
CanvasのdrawXXXメソッドに入力される様々な座標は、Canvas座標系の座標ではなく、描画座標系の座標を指します.デフォルトでは、描画座標系はCanvas座標系と完全に一致しています.すなわち、初期の状況では、描画座標系の座標原点もViewの左上隅にあり、原点から右にx軸正半軸、原点から下にy軸正半軸になります.しかし、Canvas座標系とは異なり、描画座標系は一定ではなく、Canvasのtranslateメソッドを呼び出して座標系を平行移動したり、Canvasのrotateメソッドで座標系を回転したり、Canvasのscaleメソッドで座標系をスケールしたりすることができます.また、translate、rotate、scaleの操作は、Canvas座標系ではなく現在の描画座標系に基づいていることに注意してください.以上の方法で座標系を操作すると、現在の描画座標系が変化し、以降の描画は更新された描画座標系に基づいています.つまり、本当に私たちが絵を描くのに役立つのは、Canvas座標系ではなく絵座標系です.canvas.drawXXXの方法は具体的にどのように使うべきで、このブログをめくります:http://blog.csdn.net/iispring/article/details/49770651あ、オオカミさんが詳しく書いてくれました
私たちはLOL能力表を描きます.まず、画面にこのグラフを描き、このグラフの点をインタラクティブに動的に変更して後続に残します.図に示すように、
分析してみると、このLOL能力表にはいくつかの部分が構成されています.1:明らかにX、Yの横縦座標です.②:これは正七角形で、最外層は七組の代表能力の漢字③:次の骨格は四層正七角形で、線分で囲む④:四層正七角形の頂点⑤:七本原点から正七角形の頂点までの線分⑥プレイヤーの能力値を表す赤色不規則七角形
画面に必要な設計効果図を描くには、次の手順に従います.
1、classをカスタマイズしてviewを継承し、構造方法を初期化し、ここで余談を挿入する:各viewの基本には3つの構造方法があり、①: 1つのパラメータの構築方法はコード内のnewインスタンスに適用されます②: 2つのパラメータの構築方法はレイアウトファイルでこのカスタムviewを参照するのに適用されます③: 3つのパラメータの構築方法は、コードではほとんど呼び出されません(簡単に言えばstyle属性を指すid値です)、カスタムview属性ではこの章で詳しく説明します.2、構造方法の中でいくつかの基本的なパラメータを初期化する

/**
     *           
     */
    private void initSize(Context context) {
        n = 7;//   
        R = Dp2PxF.dp2pxF(context, 100);//  ---dp   px TypedValue.applyDismension(TypedValue.COMPLEX_UNIT_DIP,dp   ,context.getRersources().getDisPlayMetrics())
        intervalCount = 4;//4 
        angle = (float) ((2 * Math.PI) / n);//    360°        =             （       ）
        //     ，     
        intwidthPixels = getResources().getDisplayMetrics().widthPixels;
        //          ,   view   
        viewWidth = widthPixels;
        viewHeight = widthPixels;
    }

    /**
     *           ，   n  ， intervalCount 
     */
    private void initPoints(Context context) {
        //                ，             
        pointsArrayList = new ArrayList<>();
        floatx;
        floaty;
        /**
         *  LOL      ，              ， for      
         * */
        for (int i = 0; i < intervalCount; i++) {
        //          
            ArrayList pointFs = new ArrayList<>();
        /**
         *TODO--     (   ) 7   ， for      
         * */
            for (intj = 0; j < n; j++) {
                //TODO               ，
                floatr = R * ((float) (intervalCount - i) / intervalCount);
                /**
                 *    r，    angle ，                    
                 * x = r * cosθ;
                 * y = r * sinθ;
                 *TODO --                90°，         90°
                 * */
                x = (float) (r * Math.cos(j * angle - Math.PI / 2));
                y = (float) (r * Math.sin(j * angle - Math.PI / 2));
                pointFs.add(new PointF(x, y));
            }
            pointsArrayList.add(pointFs);
        }
    }

    /**
     *      
     */
    private void initPaint(Context context) {
        //    
        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //       
        linePaint.setStrokeWidth(Dp2PxF.dp2px(context, 1f));
        //     
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextAlign(Paint.Align.CENTER);//      
        textPaint.setTextSize(Dp2PxF.dp2px(context, 14));
        textPaint.setColor(Color.BLACK);
    }
}

これで準備が整いました.文字を書くペンと線分を描くペンを初期化しました.それから4階建てで、各階の7つの頂点の座標も集合にカプセル化されました.次は絵を描く仕事です.
まずonMeasureメソッドを書き換え、viewの幅を設定します.つまりsetMeasuredDismenSion(幅、高さ)を呼び出します.
次にonDrawメソッドを書き直し、対応するグラフを描きます.
①:より良い効果を示すために、キャンバスの原点をスクリーンの真ん中//キャンバスの原点をコントロールの中心点canvasに移動します.translate(viewWidth/2,viewHeight/2); ②:多角形の枠を描き、
この方法では、まずキャンバスcanvasを以前の修正部分に保存します.canvas.save()を設定し、ブラシのタイプを塗りつぶしモードに設定し、線を引いてPathオブジェクトをインスタンス化し、前に記憶する点をforループでPathに設定し、始点(最初の頂点)をPathとする.moveTo(x,y)、後ろの点はpath.LineTo(x,y)は、この線分を閉じたループ、Pathに設定.close();キャンバスにパスを描く方法を呼び出します.パスPathとブラシcanvasが入ります.drawPath(Path,ブラシオブジェクト),描き終わったらPath,Pathをクリアする必要がある.reset()
③:最外層多角形の枠と、7つの原点から多角形頂点までの線分を描く
④:プレイヤーの能力値を描く不規則な七角形
⑤:プレイヤー能力値文字説明を描く
閉じた曲線を描くと推測できますdrawPath(Path,ブラシ)
線分を描くdrawLine(始点X、始点Y、終点X、終点Y、ブラシ)
文字を描くdrawText(文字データ、X、Y、ブラシ)