これを見るためにキャンバスキャンバス上で動作する十分です!

キャンバス

あなたは、グラフィックスを描画したいしたい場合は、キャンバスは、キャンバスの操作がより簡単にあなたの全体の多くを助けることができる、Androidのカスタム描画の特に重要な部分です。

canvas.save()和canvas.restore() 

現在の方法は、復元方法、キャンバスの状態を保存することです保存これらの2つの方法は、理解されるべき最初のもので、我々はいくつかの小さなキャンバスのグラフィックス動作時間を描画する必要があるときに、キャンバスのキャンバス上の状態へ戻すことです、保存して復元した後、キャンバスの二つの方法の途中で書き込み操作します。

準備:

新しいJavaファイルMYVIEW、カスタムブラシは、いくつかの簡単な初期設定を行います
private Paint mPaint;


    public MyView(Context context) {
        super(context);
        initSomeThing();
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initSomeThing();
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initSomeThing();
    }

private void initSomeThing() {
        mPaint = new Paint();
        initPaint(mPaint);
    }

    private void initPaint(Paint paint) {
        mPaint.setStrokeWidth(0);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.rgb(0x00, 0x00, 0x00));
    }

翻訳

まず、円を描き、その後、円の同じパンキャンバス絵画の手順に従ってください
 
   
canvas.drawCircle(100, 100, 100, mPaint);
canvas.save();
canvas.translate((float) 141.42135623731, (float) 141.42135623731);
mPaint.setColor(Color.rgb(0x91, 0xbe, 0xf0));
canvas.drawCircle(100, 100, 100, mPaint);
mPaint.setColor(Color.BLACK);
canvas.restore();
 
   
运行一下,效果如下:


同样是画两个一样的圆,结果却出现这种情况,原因是画布进行操作的时候,对应的坐标轴也跟着改变,其实我更加喜欢理解的是,我们操作的坐标轴。
canvas.translate这个方法里面的两个参数分别是向XY平移的距离,这个很简单就不赘述了

缩放

先做准备工作,把画布平移到平移到屏幕中间,画一个坐标轴,然后画一个方便比较的矩形
mPaint.setStrokeWidth(10);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);

        canvas.save();

        canvas.translate(getWidth() / 2, getHeight() / 2);
        canvas.drawLine(-550, 0, 550, 0, mPaint);
        canvas.drawLine(0, -800, 0, 800, mPaint);


        canvas.restore();
        mPaint.setStrokeWidth(0);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);

//X中心轴是Y轴   Y中心轴是X轴

//        [-∞, -1)	        先根据缩放中心放大n倍,再根据中心轴进行翻转
//        -1	            根据缩放中心轴进行翻转
//        (-1, 0)	        先根据缩放中心缩小到n,再根据中心轴进行翻转
//        0	                不会显示,若sx为0,则宽度为0,不会显示,sy同理
//        (0, 1)	        根据缩放中心缩小到n
//        1	                没有变化
//        (1, +∞)	        根据缩放中心放大n倍


        mPaint.setStrokeWidth(5);
        mPaint.setStyle(Paint.Style.STROKE);

        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);


        RectF rectF = new RectF(0, -300, 300, 0);
        canvas.drawRect(rectF, mPaint);
        //缩放
        canvas.scale(0.5f, 0.5f);

        mPaint.setColor(Color.BLUE);
        canvas.drawRect(rectF, mPaint);
        mPaint.setColor(Color.BLACK);

        canvas.restore();

        mPaint.setStrokeWidth(0);
        mPaint.setStyle(Paint.Style.FILL);

运行效果如下:

 
あなたは青い四角形が半分の後に狭い長方形のXY両方向で見ることができます
次のスケーリングパラメータのこの方法
        [-∞、-1)の中心軸上にその後の時間、およびn増幅逆ズーム中心に係る
         ズーム中心軸上に逆-1
        (-1、0)は、最初のn個のズーム中心によると、その後、中心軸上に逆に還元される
         0 SXは、0の幅が0である場合、表示されない、同様SY、表示されていない
         (0、1)nは中心までスケーリングに従って
         変化1ない
         ズーム中心によると(1、+∞)拡大n回
上記、そこに書かれています

4つのパラメータのスケーリング方法は、実際には第一の回転中心は、キャンバスにシフトし、二段階で操作を覚え、次に上記の方法を使用することができない個人的な感情は、後者の2つの点が回転の中心の座標でした回転効果は同じ、より良く理解されます。しかし、私はこれを書きました
 mPaint.setStrokeWidth(10);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.GREEN);

        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);

        canvas.scale(0.5f, 0.5f, 150, 0);
        RectF rectF = new RectF(0, -300, 300, 0);
        canvas.drawRect(rectF, mPaint);

        canvas.restore();

        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(0);
        mPaint.setStyle(Paint.Style.FILL);

次のように動作した結果は以下のとおりです。


新しい緑の四角形は、四角形を描画され

回転

 mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(15);
        mPaint.setColor(Color.GRAY);

        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        canvas.rotate(45);
        //区域是距离页面左上右下    所以不是之前说的对边两个点,X2要>X1 ,Y2要>Y1   0,0,400,-400   不符合就画不出矩形
        RectF rectF = new RectF(0, -300, 300, 0);
        canvas.drawRect(rectF , mPaint);

        canvas.restore();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(0);
        mPaint.setColor(Color.BLACK);

需要注意的是,旋转里面填的那个参数是旋转角度,不是旋转的弧度,是360度那个角度不是2π那个角度,
还有就是正方向是顺时针,填负数就是逆时针旋转。

运行效果如下:


还有一个三参的方法,和缩放一样,个人建议还是先平移再旋转吧,懒得写了

对了,缩放还有一个比较有意思的玩法,先新建一个类,直接贴代码

public class ViewScaleFun extends View {

    private Paint mPaint;

    public ViewScaleFun(Context context) {
        super(context);
        initPaint();
    }

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(10);
    }

    public ViewScaleFun(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public ViewScaleFun(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();

        canvas.translate(getWidth() / 2, getHeight() / 2);

        RectF rectF = new RectF(-500, -500, 500, 500);

        for (int i = 0; i < 30; i++) {
            canvas.scale(0.9f, 0.9f);
            canvas.drawRect(rectF, mPaint);
        }


        canvas.restore();

    }
}

运行结果如下:



哈哈  炫不酷炫酷   想不想学  







发布了124 篇原创文章 · 获赞 141 · 访问量 16万+

おすすめ

転載: blog.csdn.net/weixin_36838630/article/details/76146700