自定义View 使用Matrix(矩阵)操作图片

最新推荐文章于 2024-05-20 15:04:52 发布

jianning-wu

最新推荐文章于 2024-05-20 15:04:52 发布

阅读量3.2k

点赞数

分类专栏： Android 自定义View 文章标签： Android 自定义View Android Matrix Android 缩放图片 drawBitmap drawBitmapMesh Android 扭曲的原位图

本文链接：https://blog.csdn.net/weixin_37730482/article/details/72622810

版权

Android 自定义View 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一.Matrix中的几个常用的变换方法

setTranslate(float dx, float dy)：控制Matrix进行平移。

setRotate(float degrees, float px, float py)：旋转，参数依次是:旋转角度，轴心(x,y)。

setScale(float sx, float sy, float px, float py):缩放， 参数依次是：X，Y轴上的缩放比例；缩放的轴心。

setSkew(float kx, float ky)：倾斜(扭曲)，参数依次是：X，Y轴上的缩放比例。

在为Matrix设置了上面的变换后，调用Canvas的 drawBitmap()方法调用矩阵即可。

二.Canvas的 drawBitmap方法Demo

自定义View

public class MyViews extends View {


    private Bitmap mBitmap;
    private Matrix matrix = new Matrix();
    private float sx = 0.0f; //设置倾斜度
    private int width,height;//位图宽高
    private float scale = 1.0f;//缩放比例
    private int method = 0;


    public MyViews(Context context) {
        this(context, null);
    }


    public MyViews(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    public MyViews(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    private void init() {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.index_listattachment);
        width = mBitmap.getWidth();
        height = mBitmap.getHeight();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (method){
            case 0:
                matrix.reset();
                break;
            case 1:
                sx += 0.1;
                matrix.setSkew(sx,0);
                break;
            case 2:
                sx -= 0.1;
                matrix.setSkew(sx,0);
                break;
            case 3:
                if(scale < 2.0){
                    scale += 0.1;
                }
                matrix.setScale(scale,scale);
                break;
            case 4:
                if(scale > 0.5){
                    scale -= 0.1;
                }
                matrix.setScale(scale,scale);
                break;
        }
        //根据原始位图与Matrix创建新图片
        Bitmap bitmap = Bitmap.createBitmap(mBitmap,0,0,width,height,matrix,true);
        canvas.drawBitmap(bitmap,matrix,null);    //绘制新位图
    }


    public void setMethod(int i){
        method = i;
        postInvalidate();
    }



}

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <com.wjn.sqlitedemo.view.MyViews
        android:id="@+id/activity_myview_myview"
        android:layout_width="200dp"
        android:layout_height="200dp" />


    <View
        android:id="@+id/activity_myview_view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/activity_myview_linearlayout"
        android:background="#55CCCCCC"/>


    <LinearLayout
        android:id="@+id/activity_myview_linearlayout"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="5">


        <TextView
            android:id="@+id/activity_myview_textview1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="重置"/>


        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#55CCCCCC"/>


        <TextView
            android:id="@+id/activity_myview_textview2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="左倾"/>


        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#55CCCCCC"/>


        <TextView
            android:id="@+id/activity_myview_textview3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="右倾"/>


        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#55CCCCCC"/>


        <TextView
            android:id="@+id/activity_myview_textview4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="放大"/>


        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#55CCCCCC"/>


        <TextView
            android:id="@+id/activity_myview_textview5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="缩小"/>




    </LinearLayout>



</RelativeLayout>

Java代码

public class MyViewActivity extends AppCompatActivity{


    private MyViews myViews;
    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;
    private TextView textView5;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_myview);


        myViews= (MyViews) findViewById(R.id.activity_myview_myview);


        //重置
        textView1= (TextView) findViewById(R.id.activity_myview_textview1);
        textView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myViews.setMethod(0);
            }
        });


        //左倾
        textView2= (TextView) findViewById(R.id.activity_myview_textview2);
        textView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myViews.setMethod(1);
            }
        });


        //右倾
        textView3= (TextView) findViewById(R.id.activity_myview_textview3);
        textView3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myViews.setMethod(2);
            }
        });


        //放大
        textView4= (TextView) findViewById(R.id.activity_myview_textview4);
        textView4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myViews.setMethod(3);
            }
        });


        //缩小
        textView5= (TextView) findViewById(R.id.activity_myview_textview5);
        textView5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myViews.setMethod(4);
            }
        });


    }


}

效果

原始

左倾

右倾

放大

缩小

三.Canvas的 drawBitmapMesh()Demo

参数：

bitmap：需要扭曲的原位图。

meshWidth/meshHeight：在横/纵向上把原位图划分为多少格。

verts：长度为(meshWidth+1)*(meshHeight+2)的数组，他记录了扭曲后的位图各顶点(网格线交点) 位置，虽然他是一个一维数组，但是实际上它记录的数据是形如(x0,y0)，(x1,y1)..(xN,Yn)格式的数据，这些数组元素控制对bitmap位图的扭曲效果。

vertOffset：控制verts数组从第几个数组元素开始对bitmap进行扭曲(忽略verOffset之前数据的扭曲效果)。

Demo

自定义View

public class MyViews extends View {


    //将水平和竖直方向上都划分为20格
    private final int WIDTH = 20;
    private final int HEIGHT = 20;
    private final int COUNT = (WIDTH + 1) * (HEIGHT + 1);  //记录该图片包含21*21个点
    private final float[] verts = new float[COUNT * 2];    //扭曲前21*21个点的坐标
    private final float[] orig = new float[COUNT * 2];    //扭曲后21*21个点的坐标
    private Bitmap mBitmap;
    private float bH, bW;




    public MyViews(Context context) {
        this(context, null);
    }


    public MyViews(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    public MyViews(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    private void init() {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.fristshow1);
        bH = mBitmap.getWidth();
        bW = mBitmap.getHeight();
        int index = 0;
        //初始化orig和verts数组。
        for (int y = 0; y <= HEIGHT; y++) {
            float fy = bH * y / HEIGHT;
            for (int x = 0; x <= WIDTH; x++) {
                float fx = bW * x / WIDTH;
                orig[index * 2 + 0] = verts[index * 2 + 0] = fx;
                orig[index * 2 + 1] = verts[index * 2 + 1] = fy;
                index += 1;
            }
        }
        //设置背景色
        setBackgroundColor(Color.WHITE);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts
                , 0, null, 0, null);
    }


    //工具方法，用于根据触摸事件的位置计算verts数组里各元素的值
    private void warp(float cx, float cy) {
        for (int i = 0; i < COUNT * 2; i += 2) {
            float dx = cx - orig[i + 0];
            float dy = cy - orig[i + 1];
            float dd = dx * dx + dy * dy;
            //计算每个座标点与当前点（cx、cy）之间的距离
            float d = (float) Math.sqrt(dd);
            //计算扭曲度，距离当前点（cx、cy）越远，扭曲度越小
            float pull = 80000 / ((float) (dd * d));
            //对verts数组（保存bitmap上21 * 21个点经过扭曲后的座标）重新赋值
            if (pull >= 1) {
                verts[i + 0] = cx;
                verts[i + 1] = cy;
            } else {
                //控制各顶点向触摸事件发生点偏移
                verts[i + 0] = orig[i + 0] + dx * pull;
                verts[i + 1] = orig[i + 1] + dy * pull;
            }
        }
        //通知View组件重绘
        invalidate();
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //调用warp方法根据触摸屏事件的座标点来扭曲verts数组
        warp(event.getX(), event.getY());
        return true;
    }



}

布局文件

<com.wjn.sqlitedemo.view.MyViews
        android:id="@+id/activity_myview_myview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

代码使用

myViews= (MyViews) findViewById(R.id.activity_myview_myview);

效果

jianning-wu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自定义View 使用Matrix(矩阵)操作图片

android开发中动画有多么重要，相信大家都清楚。它可以让一个枯燥乏味的静态界面变成一个充满动力的动画世界，提高用户体验。反正现在都是用户体验至上。android也是前端。废话不多少。直接上效果图主要就是中间那部分的动画效果。理解Android中动画实现的本质在理解Android中动画实现的本质之前，首先要理解动画实现的原理，估计这个大家都清楚。如
复制链接

扫一扫