自定义View相关学习(一) (SlantedTextView ，canvas)

学习控件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绘图的理解