1. 程式人生 > >利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()繪製一個時鐘錶盤

利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()繪製一個時鐘錶盤

Android繪製座標系,原點在螢幕左上角,向右為x軸正方向,向下為y軸正方向。

canvas.save();

這個方法作用是將已經繪製的影象儲存起來,讓後續的操作就好像在一個新圖層上操作一樣。

 canvas.restore();

這個方法可以理解為合併圖層的操作,作用是將save之後繪製的影象和save之前的影象進行合併。

canvas.translate();

這個方法理解成為座標系的平移與翻轉更加合適。預設繪圖座標原點在螢幕左上角。呼叫canvas.translate(x,y)之後將原點(0,0)移動到了(x,y)。之後操作以(x,y)作為原點執行。

canvas.rotate();

同樣是將座標系旋轉了一個角度。

下面就用這幾個方法繪製一個如圖所示的鐘表表盤:

這裡寫圖片描述

上程式碼:

        //width為螢幕寬度,height為螢幕高度,
        //繪製圓形錶盤
        Paint paintCircle = new Paint();
        paintCircle.setStyle(Paint.Style.STROKE);
        paintCircle.setAntiAlias(true);
        paintCircle.setStrokeWidth(5);
       //以螢幕中心為圓心,寬度一半為半徑畫圓
        canvas
.drawCircle(width/2, height/2, width/2, paintCircle); //繪製刻度線 Paint paintDegree = new Paint(); paintDegree.setStrokeWidth(3); for (int i = 0; i < 24; i++) { //判斷是否為0、6、12、18四時刻 if (i == 0 | i == 6 || i == 12 || i == 18) { //這四個時刻繪製變寬,字型變大 paintDegree.setStrokeWidth(5
); paintDegree.setTextSize(30); //繪製刻度線 canvas.drawLine(width / 2, height/2-width/2, width/2, height/2-width/2 + 60, paintDegree); //繪製時刻 canvas.drawText(i + "", width / 2 - paintDegree.measureText(i + "") / 2, height / 2 - width / 2 + 90, paintDegree); } else { //不是這四個特殊時刻,字型變小,刻度線變窄 paintDegree.setStrokeWidth(3); paintDegree.setTextSize(15); //繪製刻度線 canvas.drawLine(width / 2, height / 2 - width / 2, width / 2, height / 2 - width / 2 + 30, paintDegree); //繪製時刻 canvas.drawText(i + "", width / 2 - paintDegree.measureText(i + "") / 2, height / 2 - width / 2 + 60, paintDegree); } //每回繪製完,繞 width/2, height/2 這個點即螢幕中心點,旋轉15度。 canvas.rotate(15, width / 2, height / 2); } //繪製時針和分針 Paint paintHour = new Paint(); paintHour.setStrokeWidth(20); Paint paintMinute = new Paint(); paintMinute.setStrokeWidth(10); //先將之前繪製的儲存 canvas.save(); //將座標原點移動至螢幕中心 canvas.translate(width/2,height/2); //繪製時針和分針,繪製從(0,0)原點(現在即中心點)到(100,100)的一條線 canvas.drawLine(0,0,100,100,paintHour); canvas.drawLine(0,0,100,200,paintMinute); //合併之前繪製 canvas.restore();