Canvas 扭曲图像 drawBitmapMesh

Canvas 有一个方法 drawBitmapMash() 用于扭曲图像,效果类似于 PhotoShop 中的 滤镜-扭曲-挤压

drawBitmapMash()

drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts,
int vertOffset, int[] colors, int colorOffset, Paint paint)
参数 说明
bitmap 需要扭曲的原位图
meshWidth 在横向上把原位图划分为多少格
meshHeight 在纵向上把原位图划分为多少格
verts 长度为 (meshWidth+1)*(meshHeight+2) 的数组,记录了扭曲后的位图各顶点(网格线交点)位置,记录的数据是形如(x0,y0),(x1,y1)..(xN,Yn)格式的数据,这些数组元素控制对 bitmap位图的扭曲效果
vertOffset 控制 verts 数组从第几个数组元素开始对 bitmap 进行扭曲 (忽略 verOffset 之前数据的扭曲效果)

范例

下面我们写一个范例实现图片的扭曲效果


  1. 创建一个 空的 Android 项目 cn.twle.android.BitmapMash

  2. 下载 /static/i/meimei_rect.jpg,并放到 res/drawable 目录下

  3. 自定义一个 View 类 MsView.java

    package cn.twle.android.bitmapmash;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    import android.view.View;
    
    public class MsView 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 MsView(Context context) {
            this(context, null);
        }
    
        public MsView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        public MsView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        private void init() {
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.meimei_rect);
            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;
                //计算每个座标点与当前点(cxcy)之间的距离
                float d = (float)Math.sqrt(dd);
                //计算扭曲度,距离当前点(cxcy)越远,扭曲度越小
                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;
        }
    
    }
    
  4. 修改 MainActivity.java 设置 setContentView(new MsView(MainActivity.this))

    package cn.twle.android.bitmapmash;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(new MsView(MainActivity.this));
        }
    }
    

对于这个函数,我们要知晓 verts 数组存储的是什么?

比如 verts[0]verts [1] ,这两个相邻的元素其实表示的就是我们第一个点的 x 坐标和 y 坐标

知道这一点,你就知道为什么有 21 * 21 个点,以及为什么数组长度等于这个值 * 2

然后是根据触摸事件计算 verts 数组元素的值的实现

获得触摸点的 x,y 坐标,拿这个值去减对应点的 x,y 值,计算出触摸点和每个坐标点的距离然后计算所谓的扭曲度:`80000 / ((float) (dd * d))` 扭曲度 `>= 1` 的,直接让该坐标点指向这个触摸点,`< 1` 的,则让各个顶点向触摸点发生偏移,然后再调用 `invalidate()` 重绘

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.