自定義View相關學習(一) (SlantedTextView ，canvas)

pdog發表於2017-12-14
TextViewCanvas

學習控制元件SlantedTextView

SlantedTextView 一個可以設定各個角落橫幅的文字檢視，繼承的View 不是TextView
複製程式碼
  1. 構造 ，呼叫了init(attrs)
  2. 在init(attrs)方法中初始化
    • 取出各種自定義屬性
    • 建立Paint畫筆,背景的畫筆mPaint 和文字的畫筆mTextPaint
  3. 最關鍵的一點重寫onDraw()方法，在重寫的onDraw方法裡做了兩件事
    1. drawBackground(canvas)//繪製背景
    2. drawText(canvas)//繪製文字

重寫的onDarw方法裡做點什麼

drawBackground(canvas)//繪製背景

  1. 建立了一個Path物件
  2. 根據設定的模式，繪製Path的路徑
  3. canvas 物件使用path 繪製

這裡使用canvas.save() 儲存了狀態 ，save()和restore() 看最後

drawText(canvas)//繪製文字

private void drawText(Canvas canvas) {
  int w = (int) (canvas.getWidth() - mSlantedLength / 2);//獲得畫布寬度減去橫幅寬度的二分之一
  int h = (int) (canvas.getHeight() - mSlantedLength / 2);
  float[] xy = calculateXY(canvas,w, h);		//根據w,h 算出五個座標點
  float toX = xy[0];		//文字的起始位置x座標
  float toY = xy[1];		//文字的起始位置y座標
  float centerX = xy[2];	//x旋轉中心
  float centerY = xy[3];	//y旋轉中心
  float angle = xy[4];	//旋轉的角度

  canvas.rotate(angle, centerX , centerY );//旋轉相應的角度

  canvas.drawText(mSlantedText, toX, toY, mTextPaint); //繪製文字，toX和toY分別是文字的起始位置
}
複製程式碼
//canvasd的rotate方法指定目標點旋轉
public final void rotate(float degrees, float px, float py) {
  translate(px, py);  //1.移動到目標位置
  rotate(degrees);  //2.旋轉
  translate(-px, -py);//3.返回原來的位置
}
複製程式碼

canvas學習

  1. drawText()的時候文字是出現在起始座標點的右上方，而且文字並不是全部顯示在y軸之上的 y軸上方佔有80%,下方佔有剩餘的20%。

    Screenshot_1497337934_PxCook.png

  2. canvas.rotate()畫布旋轉之後會對之後所繪製的內容產生影響

    同理，以下這些方法也是影響的之後的繪製內容（也就是改變之後的canvas狀態）：

    • rotate

    • scale

    • translate

    • skew

    • concat

    • clipPath

  3. save()和restore()

    save()只是save() 了當前這個canvas() 的狀態，和已經畫出來的圖形無關，restore()就是取出最近一次save()的canvas()的狀態，仍然不影響圖形。

    android繪圖canvas的sava、restore、rotate以及若干問題，canvas繪圖的理解

相關文章