Canvas 学习之 (2) translate

Canvas的坐标问题在之前已经叙述过了

这次学习的是translate 坐标的平移 以及Canvas坐标的方向问题

translate 为什么叫坐标的平移

先看一段代码

<com.example.zhujie.myapplication.StudyView
        android:id="@+id/studyview"
        android:layout_width="200dp"
        android:layout_height="200dp"/>

@Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.RED);
        canvas.drawRect(new Rect(0,0,200,200),paint);
        super.onDraw(canvas);
    }

在我的控件画布上创建了一个200px*200px的正方形，但是我的画布是200dp*200dp正方形。运行结果如图

 

因为上次说过Canvas的画布的坐标原点是控件画布左上角现在我使用translate 进行平移

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.RED);
        canvas.translate(100,100);
        canvas.drawRect(new Rect(0,0,200,200),paint);
        super.onDraw(canvas);
    }

运行截图是这样的

 

实际结果并不是我的控件在原坐标向下和向右去平移了100个像素，而是相对与原来的坐标不动，只是坐标原点发生了变化，原点从原来的0,0移动到了100,100的位置也就是说现在的原点是100,100,所以在Canvas中translate并不是画布发生了平移而是Canvas中的原点发生了变化，而且我们在平移的过程中发现了Canvas中的坐标是

画布的平移 其实画布平移并不是整个空间平移，整个空间相对与布局基本上并没有动，只是画出来的物体发生了移动，但是由于物体起始位置并没有改变，所以这种移动并不是画布移动准确的说是画布的坐标系原点发生了移动

X轴正方向是向右的

Y轴正方向是向下的

Canvas这种translate不仅仅会执行一次而且会有叠加效果在做一个实验

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.RED);
        canvas.translate(100, 100);
        canvas.drawRect(new Rect(0, 0, 200, 200), paint);
        canvas.translate(100, 100);
        canvas.drawRect(new Rect(0, 0, 200, 200), paint);
        super.onDraw(canvas);
    }

这种结果并不是只会画出一个矩形，他会画出2个矩形，并且叠加，运行结果如图：

 

所以得出结论Canvas的translate效果会有叠加的效果

下面我做了一个Demo来简单综合一下Canvas

 

利用Canvas来画出尺子

利用坐标画代码如下

public class StudyView extends View {
    private int DIVIERSPECE = 6;
    private int SKEWSPECE = 5;
    private int BIGDEGREE = -40;
    private int MIDDLEDEGREE = -30;
    private int SMALLDEGREE = -20;
    private int TEXTDEGREE = -50;
    private int ALLWIDTH = 636;
    private int ALLHEIGHT = 150;
    private Paint paint;
    public StudyView(Context context) {
        super(context);
    }


    public StudyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(1);
        paint.setTextSize(13);
        paint.setStyle(Paint.Style.STROKE);
    }


    public StudyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        drawBorder(canvas);
        drawByPositionLines(canvas);
//        drawTranslateLines(canvas);
        super.onDraw(canvas);
    }




    /**
     * 根据坐标
     * */
    private void drawByPositionLines(Canvas canvas) {
        canvas.translate(18, 150);
        for(int i = 0; i <= 100; i++){
            if(i%10 == 0){
                canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,BIGDEGREE,paint);
                canvas.drawText(i/10+"",i*DIVIERSPECE-SKEWSPECE,TEXTDEGREE,paint);
            }
            if (i % 10 == 5) {
                canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,MIDDLEDEGREE,paint);
            }
            if(i%10 != 0 && i%10 != 5){
                canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,SMALLDEGREE,paint);
            }
        }


    }


    /**
     * 根据Translate
     * */
    private void drawTranslateLines(Canvas canvas) {
        canvas.translate(18,150);
        for(int i = 0; i <= 100; i++){
            if(i%10 == 0){
                canvas.drawLine(0,0,0,BIGDEGREE,paint);
                canvas.drawText(i/10+"",-SKEWSPECE,-TEXTDEGREE,paint);
            }
            if (i % 10 == 5) {
                canvas.drawLine(0,0,0,MIDDLEDEGREE,paint);
            }
            if(i%10 != 0 && i%10 != 5){
                canvas.drawLine(0,0,0,SMALLDEGREE,paint);
            }
            canvas.translate(DIVIERSPECE,0);
        }


    }


    private void drawBorder(Canvas canvas) {
        canvas.translate(20,100);
        canvas.drawRect(new Rect(0, 0, ALLWIDTH, ALLHEIGHT), paint);
    }
}