任何约会应用程序的最重要的功能之一是分享图片的能力。我花了一个体面的时间梳理(少数)自己的好照片,并播种最好的部分。

唉,其他用户可以去查看我的个人资料,但他们看到的不是我裁剪的东西。

发生了什么?好吧,像许多开发人员一样,我们努力争取如何最好地在ImageView内部配合。在此示例中,我们的图像具有比例类型Center_Crop.,它出现好的对于这张照片,但如果我们有一个非常高的或真正的画面,那么就会遗漏一些重要的风险。

尽管有些人很有帮助指南在各种规模类型上,他们都没有在这里工作。我们要根据用户裁剪的内容显示照片的特定部分,并且没有建立的尺度类型来帮助解决此问题。

滑行定制转换

在Ok188bet金宝搏官网cupid我们使用滑行通过Bumptech进行图像加载。它是一个库,它允许我们毫不费力地将图像从URL加载到ImageView中。滑行确实支持默认转换对于默认比例类型,例如fit_center.Center_Crop.如果你需要它们。值得庆幸的是,对于那些需要的人来说,我们可以写自定义转换

注意:for.任何原因,您可以选择使用Square的Picasso而不是Glide进行图像加载。毕加索支持自定义转换同样,以下一些代码也将适用于该库。

根据Plide Wiki,写出其中一个的最简单方法是通过扩展bitmaptransformation.。在我们进入如何专注于此缩略图之前,让我们看看我们将开始的基地:

类裁剪(上下文:上下文):bitmaptransformation(上下文){override fun getId():string {return rocefransformation :: class.java.name}覆盖有趣变换(pool:bitmappool,totransform:bitmap,outwidth:int,Outheight:int):位图{return totransform}}

我们需要两种方法来覆盖。getid()确定转换的唯一ID。Glide缓存这些,所以您可能希望将其特定于您正在使用的图像的ID - 我们稍后会看到。转变(...),正如名称暗示,用于转换位图。该totransform.参数是我们从中裁剪的原始位图。

要调用此转换,我们将将其添加到我们的Glide请求:

Plide.with(查看.context).load(URI).listener(侦听器).BitmapTransform(CrockTransformation(View.context)).into(查看)

缩略图输入

现在我们为我们的转型有一个骷髅课,我们知道裁剪原始位图。我们如何确定照片的缩略图坐标?

当我们为所有个人资料照片拨打服务器时,我们的响应可能看起来像这样(简化):

{原件:{宽度:404,高度:720},缩略图:{x:0,y:6,宽度:404,高度:404},标题:“一些标题”,网址:“...”}

让我们走过这些值中的每一个:

  • Original.width:原始照片的宽度,以像素为单位。
  • 原创.Height:原始照片的高度,像素,像素。
  • thumbnail.x:关于原始照片的缩略图的起始x坐标。
  • thumbnail.y:缩略图的起始y坐标,关于原始照片。
  • thumbnail.width:缩略图的宽度,关于原始照片。
  • thumbnail.height:缩略图的高度,关于原始照片。

鉴于所有这些信息,让我们试着解释这个特定的用户如何裁剪照片。

  1. 我们知道缩略图是一个正方形,因为它是404x404。
  2. 我们知道缩略图与原件一样宽,因为原来是404x720。
  3. 我们知道缩略图与原始照片的左侧对齐,因为thumbnail.x.等于0。
  4. 我们知道缩略图从照片顶部移开了6个像素,因为thumbnail.y.y.等于6。

如果您仍然在可视化问题时,它会看起来像这样:

你的旅费可能会改变。您可以以其他一些JSON格式获取您的缩略图输入,但如果您从这六个值开始,则应适用以下规则。

播种界面

就我们的自定义转型而言,这是我们需要的所有信息。我们不关心图像URL或任何其他方面 - 因此我们在自定义转换中创建了一个引用的界面。如果您有多个照片型号,此界面也有用,只要它们仍然具有必要的六个值:

界面播种{val缩略图:int val thumbnamaily:int val缩略图:int val缩略图:int val原装宽:int val原创者:int}

现在我们可以更新我们的转换以拍摄此接口的实例。我们可以使用它来使返回的值getid()方法独特。我们还将为我们的播种字段创建新的变量,作为浮点数,以避免任何整数划分。

类裁剪(上下文:上下文,私有val照片:creampable):BitMapTransformation(上下文){/ ** *返回转换的唯一标识符。滑行实际上缓存了这些,所以我们提供*所有尺寸,以确保这张照片是独一无二的。* / override fun getID():string {return trackfransformation :: class.java.name +“width = $ {photo.thumbnailwidth}”+“height = $ {photo.thumbnailheight}”+“x = $ {photo.thumbnailx}“+”y = $ {photo.thumbnaily}“+”workingwidth = $ {photo.originalwidth}“+”原始= $ {photo.originalheight}“}覆盖有趣的变换(pool:bitmappool,totransform:bitmap,outwidth:int,Outheight:int):位图{//如果没有什么可以裁剪,或者我们不知道原始大小,只是返回//我们给出了什么。if(photo.thumbnailwidth == 0 || photo.thumbnailheight == 0 || photo.orginalheight == 0 || photo.originalwidth == 0){return totransform} //获取所有缩略图和原始值作为浮动以避免整数分裂。val thumbx = photo.thumbnailx.tofloat()val thumby = photo.thumbnailytofloat()val thumbwidth = photo.thumbnailwidth.tofloat()val thumbheight = photo.thumbnailheight.tofloat()val原创width.tofloat()val原创者= photo.orginalheight.tofloat()//获取我们将从中裁剪的位图的宽度和高度。val bitmapwidth = todransform.width.tofloat()val bitmapheight = totransform.height.tofloat()return torransform}}

从位图找到缩略图

以前,我们拨出了totransform.我们自定义转换中的参数作为我们将操纵的位图。我们可以通过致电获得这个位图的尺寸totransform.width.totransform.height.。然而,这些尺寸可能与我们的原始照片不同(尽管它应该保持宽高比)。

为了从我们的位图中获得缩略图,我们必须做一些数学。知道我们的位图和原始照片具有相同的宽高比,我们可以用它来我们的优势。

让我们首先计算我们需要裁剪的宽度/高度。缩略图的宽度和高度是什么,作为原始照片的百分比?

Val thumbwidthpercentage =(thumbwidth / aformentwidth)// 1 val thumbheightpercentage =(thumbheight / aformentheight)// 0.5611

现在我们知道这一点,我们可以计算缩略图的宽度/高度与原始位图的关系。我们刚刚将该百分比乘以位图的宽度/高度。

//将与位图相同。val newwidth = thumbwidthpercentage * bitmapwidth //将是位图高度的一半以上。val newheight = thumbheightpercentage * bitmapheight

我们可以使用同样的想法来计算新的启动X / Y坐标 - 将其距离作为原始照片的百分比,并使用该百分比来查找位图中的对应点:

//从原始缩略图Val = flateftege的边缘获得起始点的距离距离= thumbx / groundalwidth val启动器中心= thumby / aformentheight //使用起始百分比来获得我们的//位图的起始坐标从val LipeLeft = = reattleftpercentage * bitmapwidth val起跑台= starttoppercentage * bitmapheight

创建新的位图

现在我们有这些价值观,我们可以使用createbitmap.裁剪方法。

我们现在的完整转型看起来如此:

类裁剪(上下文:上下文,私有val照片:creampable):BitMapTransformation(上下文){/ ** *返回转换的唯一标识符。滑行实际上缓存了这些,所以我们提供*所有尺寸,以确保这张照片是独一无二的。* / override fun getID():string {return trackfransformation :: class.java.name +“width = $ {photo.thumbnailwidth}”+“height = $ {photo.thumbnailheight}”+“x = $ {photo.thumbnailx}“+”y = $ {photo.thumbnaily}“+”workingwidth = $ {photo.originalwidth}“+”原始= $ {photo.originalheight}“}覆盖有趣的变换(pool:bitmappool,totransform:bitmap,outwidth:int,Outheight:int):位图{//如果没有什么可以裁剪,或者我们不知道原始大小,只是返回//我们给出了什么。if(photo.thumbnailwidth == 0 || photo.thumbnailheight == 0 || photo.orginalheight == 0 || photo.originalwidth == 0){return totransform} //获取所有缩略图和原始值作为浮动以避免整数分裂。val thumbx = photo.thumbnailx.tofloat()val thumby = photo.thumbnailytofloat()val thumbwidth = photo.thumbnailwidth.tofloat()val thumbheight = photo.thumbnailheight.tofloat()val原创width.tofloat()val原创者= photo.orginalheight.tofloat()//获取我们将从中裁剪的位图的宽度和高度。val bitmapwidth = totransform.width.tofloat()val bitmapheight = totransform.height.tofloat()//获取原始缩略图Val LightLeftpercentege的边缘的起点距离的百分比= thumbx / OrationalWidth val启动器= thumby / apprictheight // Use the starting percentages to get the starting coordinates with respect to the // bitmap we're cropping from val startingLeft = startingLeftPercentage * bitmapWidth val startingTop = startingTopPercentage * bitmapHeight // Figure out the percentage width/height of the thumbnail with respect to the original image val thumbWidthPercentage = thumbWidth / originalWidth val thumbHeightPercentage = thumbHeight / originalHeight // Use that percentage to calculate the width/height to crop from the given bitmap val newWidth = thumbWidthPercentage * bitmapWidth val newHeight = thumbHeightPercentage * bitmapHeight // Create a bitmap by cropping out our new width/height begin at our starting coordinates. return Bitmap.createBitmap( toTransform, startingLeft.toInt(), startingTop.toInt(), newWidth.toInt(), newHeight.toInt()) } }

我们的用法现在就是这样的:

PLIDE.WITH(View.context).load(URI).listener(侦听器).BitmapTransform(CrockTransformation(View.context,照片)).Into(查看)

补充说明

这种方法对我们来说非常好,让我们缩小了图像的重要部分。在此之后,我们只需使用Center Crop ScaleType来制作缩略图适合我们的ImageView。

为什么它不完美融合?嗯,我们返回的位图的宽高比将是缩略图的纵横比。在这种情况下,它是404/404,或1.我们使用的图像视图具有〜1.6的纵横比。

输出宽高比可以通过使用来计算偏僻外面帕纳斯的参数转变()方法。该比率将是偏宽/ outheight.。您可以使用此信息来尝试缩放图像,即使更多符合其符合输出宽高比,而且是另一个博客文章的数学。

这些自定义转换可以用于仅仅是裁剪。你可以找到一些酷图书馆与自定义转换在github上。

有任何疑问,或者想要分享您自己的一些很酷的转换?在推特上接触我@ Adammc331.。想在Okcupid加入我吗?188bet金宝搏官网我们正在招聘!