创造一款安卓自定义控件(4)——使用Matrix的setPolyToPoly方法实现图像纠正

接上文:

创造一款安卓自定义控件_任意4顶点裁剪框icon-default.png?t=N7T8http://t.csdnimg.cn/vu1r5

创造一款安卓自定义控件_任意4顶点裁剪框2_为裁剪框添加放大镜功能icon-default.png?t=N7T8http://t.csdnimg.cn/qkngh

创造一款安卓自定义控件_裁剪原理介绍icon-default.png?t=N7T8http://t.csdnimg.cn/ORRRL

需求

随着需求修改,图片不规则裁剪框需要有正畸功能:

有以下图片,用户选中畸形部分后拉伸摆正:

实现方法:

1.设选中区域外接矩形图片为要达成的目标形状:

        float[] dstPoints = new float[] {
                0, 0,                           // 左上角
                bitmap.getWidth(), 0,   // 右上角
                0, bitmap.getHeight(),  // 左下角
                bitmap.getWidth(), bitmap.getHeight()  // 右下角
        };

 2. 设不规则选择框的4个2维顶点(8个数值)为初始区域

        // 定义目标图像的四个顶点坐标 因为mVectorPoint带有原本完整图像的偏移坐标,而操作已经以外接矩形为范围割出来的bitmap对象已经无需这个偏移坐标,因此要减去分割用的rect的left和top
        float[] srcPoints = new float[] {
                (mVectorPoint[0].- left) / mScale, (mVectorPoint[0].- top) / mScale, //左上角
                (mVectorPoint[1].- left) / mScale, (mVectorPoint[1].- top) / mScale,   // 右上角
                (mVectorPoint[3].- left) / mScale, (mVectorPoint[3].- top) / mScale,  // 左下角
                (mVectorPoint[2].- left) / mScale, (mVectorPoint[2].- top) / mScale  // 右下角
        };

其中mVectorPoint位置初始化逻辑如下

            //顺时针赋值一圈
            mVectorPoint[0] = new PointF(mWidth / 2 - mBitmap.getWidth() / 2 * mScale,
                    mHeight / 2 - mBitmap.getHeight() / 2 * mScale);
            mVectorPoint[1] = new PointF(mWidth / 2 + mBitmap.getWidth() / 2 * mScale,
                    mHeight / 2 - mBitmap.getHeight() / 2 * mScale);
            mVectorPoint[2] = new PointF(mWidth / 2 + mBitmap.getWidth() / 2 * mScale,
                    mHeight / 2 + mBitmap.getHeight() / 2 * mScale);
            mVectorPoint[3] = new PointF(mWidth / 2 - mBitmap.getWidth() / 2 * mScale,
                    mHeight / 2 + mBitmap.getHeight() / 2 * mScale);

触摸框初始坐标分布如下图所示,以顺时针方式分布于4角,随着用户触摸事件产生偏移

3.偏移选择框坐标送入矩阵,调用setPolyToPoly方法,第一个参数是起始形状,第三个参数是目标形状,最后是

        Matrix matrix = new Matrix();
        matrix.setPolyToPoly(srcPoints, 0, dstPoints, 0, 4);
        meshCanvas.drawBitmap(bitmap, matrix, null);

效果是将srcPoints定义区域中的内容,映射dstPoints区域

 4.用户选中图像畸形区域,最后得到纠正后的图像

效果视频:

图片不规则裁剪后正畸示例

代码地址:

AndroiidDemoCollection/app/src/main/java/com/example/photoCutter/PhotoCutter.java at master · cjzjolly/AndroiidDemoCollection (github.com)


 

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Xamarin 中,ListView 是一个非常常见的控件,用于显示一个竖直滚动的列表。但如果我们需要实现一个横向滚动的列表,该怎么办呢?这时候,我们可以使用自定义的 ItemsControl 来实现这个功能。 ItemsControl 是一个用于显示一个集合的控件,它的每个元素都可以自定义显示方式。在本文中,我们会通过自定义 ItemsControl,实现一个横向滚动的列表。 首先,我们需要创建一个自定义控件,继承自 ItemsControl。在这个控件中,我们需要对 ItemContainerStyle 和 ItemsPanel 进行定义。 ItemContainerStyle 用于定义每个元素的样式,我们可以设置元素的大小、边距等属性。在本例中,我们设置元素宽度为 100,高度为自适应,并设置左右边距为 5。 ItemsPanel 用于定义元素的排列方式。在本例中,我们使用一个 StackPanel,设置 Orientation 为 Horizontal,这样子项就会水平排列。 下面是完整的代码实现: ```csharp using Xamarin.Forms; namespace MyNamespace { public class HorizontalItemsControl : ItemsControl { public HorizontalItemsControl() { // 设置样式 ItemContainerStyle = new Style(typeof(ViewCell)) { Setters = { new Setter { Property = ViewCell.WidthRequestProperty, Value = 100 }, new Setter { Property = ViewCell.MarginProperty, Value = new Thickness(5, 0) } } }; // 设置子项排列方式 ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal); } } } ``` 使用起来也非常简单,只需要在 XAML 中声明这个控件即可: ```xml <local:HorizontalItemsControl ItemsSource="{Binding MyItems}"> <local:HorizontalItemsControl.ItemTemplate> <DataTemplate> <!-- 这里放置每个元素的显示内容 --> </DataTemplate> </local:HorizontalItemsControl.ItemTemplate> </local:HorizontalItemsControl> ``` 其中,MyItems 指定了要显示的数据源,ItemTemplate 指定了每个元素的显示方式。 这样,我们就实现了一个简单的横向滚动列表。当然,这只是一个简单的示例,实际使用中可能还需要进行更多的定制和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值