CN109254760A

CN109254760A - 一种图片缩放的方法

Info

Publication number: CN109254760A
Application number: CN201811039921.3A
Authority: CN
Inventors: 孙征
Original assignee: Beijing Kuwo Technology Co Ltd
Current assignee: Beijing Kuwo Technology Co Ltd
Priority date: 2018-09-06
Filing date: 2018-09-06
Publication date: 2019-01-22

Abstract

本发明涉及一种图片缩放的方法，包括如下步骤：设定边框控件TagContainer及图片控件EasyTouchView，边框控件TagContainer及图片控件EasyTouchView联动，具体包括：在设定好的位置显示标签，当拖动图片的时候，调用监听器的move接口，重新设置标签控件距离父布局TagContainer的上下左右四个边距，当缩放图片的时候，通过newScale接口，重新计算标签控件距离父布局控件TagContainer的上下左右边距。本发明，支持静态图的标识点生成，支持图片进行缩放和移动，且缩放和移动后，能对原始的标识点自动调整位置，保持标识点相对位置不变，标识准确，适合图片标识需求的用户使用，提升用户体验。

Description

一种图片缩放的方法

技术领域

本发明涉及静态图的标识点生成及静态图的缩放处理技术领域，具体说是一种图片缩放的方法。所述图片即指静态图。

背景技术

现有的静态图，在展示给用户后，因为某些需求，要在图中指定位置增加标识点，例如：在人体构造图片中，指定位置增加标识点以便标识各个穴位，再例如：在合影照片中，指定位置增加标识点以便标识人像信息，又例如：在酷我音乐盒中，当用户进行上传头像或制作音乐片段时，用户可选择本地图片并上传到服务器，上传的图片将作为头像或音乐播放展示图片，此时，支持用户对图片进行拉伸和缩放，还支持进行个性化修图，此时，如果用户给图片某个位置做个标记或者水印之后，再次操作图片进行拉伸和缩放时，则存在标识点错位问题，需要进行优化、改进。

现有技术中，当在一张图片（静态图片）上标识一个标识点（坐标点）时，如果后期对图片进行缩放和移动时，往往这个标识点不能跟随图片的变化而自动调整位置，导致标识点错位，新生成的标识点，其相对位置不能准确的对应于原始的标识点。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种图片缩放的方法，支持静态图的标识点生成，支持图片进行缩放和移动，且缩放和移动后，能对原始的标识点自动调整位置，保持标识点相对位置不变，标识准确，适合图片标识需求的用户使用，提升用户体验。

为达到以上目的，本发明采取的技术方案是：

一种图片缩放的方法，其特征在于，包括如下步骤：

设定用于生成标识容器的边框控件TagContainer及用于图片缩放和移动的图片控件EasyTouchView，其中：

边框控件TagContainer，集成android系统提供的FrameLayout控件，

图片控件EasyTouchView，集成android系统提供的ImageView控件，

在边框控件TagContainer中：

定义资源文件R.drawable.bg_tag，用于呈现一图像作为用户可辨识的标识点，

通过textView.setBackgroundResource(R.drawable.bg_tag)加载该资源文件，

通过FrameLayout提供的api addView(textView) 往帧布局中添加控件；

在图片控件EasyTouchView中：

定义PointF的对象startPoint和midPoint，记录点击的开始点和中心点，PointF是android系统提供的表示一个坐标点的工具类，

定义缩放矩阵Matrix的对象matrix和currentMaritx，

定义Bitmap对象bitmap，

设置bitmap的Scaletype属性为矩阵类型ScaleType.MATRIX，

第一次进入页面需要将图片放到中心位置，对其进行缩放处理，

在onTouchEvent事件处理中，处理按下、滑动和抬起状态的情况；

边框控件TagContainer及图片控件EasyTouchView联动，具体包括：

通过xml布局，在java类中获取TagContainer标签容器对象，设置LayoutParams布局参数，设定好标签的坐标以及距离标签容器的上下左右四个方向的边距，调用标签容器的createTextView在设定好的位置显示标签，

当拖动图片的时候，调用监听器的move接口，将移动的距离实时传递给标签容器控件TagContainer，通过move接口，获取移动的横坐标dx和纵坐标dy，重新设置标签控件距离父布局TagContainer的上下左右四个边距，

当缩放图片的时候，通过newScale接口，将缩放数值传递给标签控件，重新计算标签控件距离父布局控件TagContainer的上下左右边距。

在上述技术方案的基础上，在边框控件TagContainer中，定义生成控件方法createTag，

方法createTag设定一输入参数params，params是布局参数LayoutParams 的变量，包含了控件的宽高属性，

定义上下文变量Context对象mContext，是Android系统生成新控件需要的参数，

执行new TextView(mContext)并赋值给文本控件TextView的对象textView，

执行textView.setLayoutParams(params)设定参数，

执行textView.setBackgroundResource(R.drawable.bg_tag) 设定资源文件，

最后在该方法中通过FrameLayout提供的api addView(textView) 往帧布局中添加控件。

在上述技术方案的基础上，在图片控件EasyTouchView中，通过ImageView中获取图像的api getDrawable将xml中配置的资源图片转换成BitmapDrawable对象，

再调用BitmapDrawable对象的getBitmap函数，实现获取bitmap对象。

在上述技术方案的基础上，第一次进入页面时，进行如下缩放处理，

通过EasyTouchView控件的api getContext获取上下文，存入context，

通过上下文获取资源配置对象，进而获取手机屏幕信息displayMetrics对象，具体包括屏幕的宽高信息，

用屏幕的宽度除以图片的宽度获取宽度的缩放比例，用屏幕的高度除以图片的高度，获取高度的缩放比例，

使用缩放矩阵的postScale函数，设置图片的缩放比例值，

调用setImageMatrix给EasyTouchView控件重新设置缩放比例，实现按照图片的宽高来进行自动缩放。

在上述技术方案的基础上，当拖动图片的时候，获取移动的横坐标dx和纵坐标dy后，执行以下算法：

int newleft = (int) (left + dx);

int newright = (int) (top + dy);

left是在按下的时候，获取标签控件的距离父布局控件TagContainer的左边距，

top是按下的时候获取标签控件的距离父布局控件TagContainer的上边距，

newleft和newright 就是拖动后，相对原来位置移动后的新的距离父布局控件TagContainer的间距，

调用LayoutParams的api setMargins重新设置左边距和上边距，再重新设置给标签控件，即在新的位置显示图片。

在上述技术方案的基础上，当缩放图片的时候，重新计算标签控件距离父布局控件TagContainer的上下左右边距的算法为：

float newleft = left * tScale ;

float newtop= top * tScale ;

调用按下时的左边距和右边距乘以缩放倍数，计算出新的左右边距，再重新设置给标签控件，以达到缩放时标签跟随图片相对位置不变的效果。

本发明所述的图片缩放的方法，支持静态图的标识点生成，支持图片进行缩放和移动，且缩放和移动后，能对原始的标识点自动调整位置，保持标识点相对位置不变，标识准确，适合图片标识需求的用户使用，提升用户体验。

本发明所述的图片缩放的方法，在酷我音乐盒中，当用户进行上传头像或制作音乐片段时，用户可选择本地图片并上传到服务器，上传的图片将作为头像或音乐播放展示图片，此时，支持用户对图片进行拉伸和缩放，还支持进行个性化修图，此时，如果用户给图片某个位置做个标记或者水印之后，再次操作图片进行拉伸和缩放时，如果采用本发明的技术方案，则不会出现标识点错位问题，标记和水印会显示在图片的相对位置，不会变化，在做图片个性化时更便于用户使用。

附图说明

本发明有如下附图：

图1 本发明的流程图。

具体实施方式

以下结合附图对本发明作进一步详细说明。

如图1所示，本发明所述的图片缩放的方法，包括如下步骤：

边框控件TagContainer，集成android系统提供的FrameLayout控件，

图片控件EasyTouchView，集成android系统提供的ImageView控件，

在边框控件TagContainer中：

通过textView.setBackgroundResource(R.drawable.bg_tag)加载该资源文件，

通过FrameLayout提供的api addView(textView) 往帧布局中添加控件；

在图片控件EasyTouchView中：

定义缩放矩阵Matrix的对象matrix和currentMaritx，Matrix是一个3*3的矩阵工具类，对图片或View组件的处理分为以下4种：

Translate————平移变换，

Scale————缩放变换，

Rotate————旋转变换，

Skew————错切变换，

定义Bitmap对象bitmap，Bitmap是android系统提供的表示一张图片的信息，用它可以获取图像文件信息，进行图像颜色变换、剪切、旋转、缩放等操作，并可以指定格式保存图像文件，根据xml布局文件来获取bitmap对象，

设置bitmap的Scaletype属性为矩阵类型ScaleType.MATRIX，Scaletype属性决定了图片在View上显示时的样子，如进行何种比例的缩放，及显示图片的整体还是部分等等，这里设置为矩阵类型，以便实现图片的缩放和移动，

边框控件TagContainer及图片控件EasyTouchView联动，具体包括：

执行textView.setLayoutParams(params)设定参数，

执行textView.setBackgroundResource(R.drawable.bg_tag) 设定资源文件，

在上述技术方案的基础上，在xml布局中，通过layout_match和layout_wrapcontent调整输入参数params。

在上述技术方案的基础上，调用LayoutParams 的api setMargins，设置距离父布局的上下左右边距，并传给输入参数params。

再调用BitmapDrawable对象的getBitmap函数，实现获取bitmap对象。

例如：可采用如下代码：

BitmapDrawable bd = (BitmapDrawable)getDrawable();

bitmap = bd.getBitmap()。

通过EasyTouchView控件的api getContext获取上下文，存入context，

使用缩放矩阵的postScale函数，设置图片的缩放比例值，

例如，可采用如下代码：

protected void center() {

Context context = getContext();

displayMetrics = context.getResources().getDisplayMetrics();

float scaleX = displayMetrics.widthPixels * 1.0f / bitmap.getWidth() ;

float scaleY = displayMetrics.heightPixels* 1.0f / bitmap.getHeight() ;

matrix.postScale(scaleX, scaleY);

setImageMatrix(matrix);

}。

int newleft = (int) (left + dx);

int newright = (int) (top + dy);

例如，可采用如下代码：

TextView child = (TextView) mContainer.getChildAt(0);

LayoutParams params = child.getLayoutParams();

int newleft = (int) (left + dx);

int newright = (int) (top + dy);

params.setMargins(newleft, newright, 0, 0);

child.setLayoutParams(params);

mContainer是标签容器TagContainer的对象，调用getChildAt(0)就获取了之前生成的标签控件，再获取标签控件的布局参数对象params，计算新的距离父布局控件TagContainer的上下左右四个边距。

float newleft = left * tScale ;

float newtop= top * tScale ;

以下为处理滑动和缩放的代码示例：

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

mode = DRAG;

currentMaritx.set(getImageMatrix()); startPoint.set(event.getX(),event.getY());

break;

case MotionEvent.ACTION_POINTER_DOWN:

mode = ZOOM;

startDis = distance(event);

midPoint = new PointF(0, 0);

currentMaritx.set(this.getImageMatrix());

break;

case MotionEvent.ACTION_MOVE:

if (mode == DRAG) {

float dx = event.getX() - startPoint.x;

float dy = event.getY() - startPoint.y;

if (mListener != null) {

mListener.move(dx, dy);

}

matrix.set(currentMaritx);

matrix.postTranslate(dx, dy);

} else if(mode == ZOOM){

float endDis = distance(event);

float scale = endDis / startDis;

matrix.set(currentMaritx);

matrix.postScale(scale, scale, midPoint.x, midPoint.y);

if (mListener != null) {

mListener.newScale(scale);

}

setImageMatrix(matrix);

break;

case MotionEvent.ACTION_POINTER_UP:

mode = 0;

break;

case MotionEvent.ACTION_UP:

mode = 0;

break;

}

其中：

event.getAction()可以获取点击的动作，比如按下状态和一个手指按下另一个手指再按下的状态，还有滑动状态和抬起手指的状态等，mode记录了实时的拖拽状态还是放大缩小状态的变量，event.getX()和event.getY()表示点击的x坐标和y坐标；定义整形变量DRAG为1，表示拖动状态，定义整形变量ZOOM为2，表示放大状态；mListener 是向外界传递数据的监听器，在生成控件的时候就需要设置该监听器，包括了移动move和缩放倍数newScale两个接口，实时的将数据传递给TagContainer控件。

(1) 单个手指按下状态 MotionEvent.ACTION_DOWN

将mode设置为DRAG拖动状态，步骤2.2的currentMaritx设置当前图像矩阵，getImageMatrix()是ImageView提供的api，可以获取当前图像矩阵，包括图像位置和缩放信息，设置步骤1.1开始点startPoint的坐标为当前手指按下的x和y坐标；

(2) 另一个手指按下的状态，MotionEvent.ACTION_POINTER_DOWN

将mode设置为ZOOM缩放状态，获取两个手指所点击的间距startDis，方法是distance，

private static float distance(MotionEvent event){

float dx = event.getX(1) - event.getX(0);

float dy = event.getY(1) - event.getY(0);

return FloatMath.sqrt(dx*dx + dy*dy);

}

其中，event就是点击事件，调用其中的getX(1)和getX(0)，就获取了点击的横坐标的两个点，通过直角三角形函数求斜边的方法，就获取了两个点之间的直线距离，dx是横坐标x的差值，dy是纵坐标y的差值，再对两个差值的平方和开平方，就是所求的两点之间的距离了。

定义两条直线的中间点变量midPoint，是PointF类型

(3) 处理滑动事件

a.图片拖动

获取当前滑动的x坐标和y坐标与开始点x和y坐标的差值，dx是横坐标x差值，dy是纵坐标y的差值，调用matrix.set(currentMaritx)设置在当前位置的基础上移动，matrix.postTranslate(dx, dy)表示矩阵横坐标和纵坐标分别移动dx和dy的距离；

b.图片放大缩小

调用distance获取当前手指滑动的距离endDis，scale是最后移动的距离和开始距离的比值，表示缩放倍数，设置matrix.set(currentMaritx)矩阵为在当前缩放的基础上继续缩放，

matrix.postScale(scale, scale, midPoint.x, midPoint.y)表示设置矩阵进行x轴和y轴进行缩放，缩放的中心点为两个手指的中间点midPoint，最后调用setImageMatrix(matrix)设置计算好的矩阵值，界面的图片就会显示缩放的效果了。

(4) 抬起事件MotionEvent.ACTION_POINTER_UP和MotionEvent.ACTION_UP

抬起手指的时候，设置mode的值为无效的0值。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims

1.一种图片缩放的方法，其特征在于，包括如下步骤：

边框控件TagContainer，集成android系统提供的FrameLayout控件，

图片控件EasyTouchView，集成android系统提供的ImageView控件，

在边框控件TagContainer中：

通过textView.setBackgroundResource(R.drawable.bg_tag)加载该资源文件，

通过FrameLayout提供的api addView(textView) 往帧布局中添加控件；

在图片控件EasyTouchView中：

定义缩放矩阵Matrix的对象matrix和currentMaritx，

定义Bitmap对象bitmap，

设置bitmap的Scaletype属性为矩阵类型ScaleType.MATRIX，

边框控件TagContainer及图片控件EasyTouchView联动，具体包括：

2.如权利要求1所述的图片缩放的方法，其特征在于：在边框控件TagContainer中，定义生成控件方法createTag，

执行textView.setLayoutParams(params)设定参数，

执行textView.setBackgroundResource(R.drawable.bg_tag) 设定资源文件，

3.如权利要求1所述的图片缩放的方法，其特征在于：在图片控件EasyTouchView中，通过ImageView中获取图像的api getDrawable将xml中配置的资源图片转换成BitmapDrawable对象，

再调用BitmapDrawable对象的getBitmap函数，实现获取bitmap对象。

4.如权利要求1所述的图片缩放的方法，其特征在于：第一次进入页面时，进行如下缩放处理，

通过EasyTouchView控件的api getContext获取上下文，存入context，

使用缩放矩阵的postScale函数，设置图片的缩放比例值，

5.如权利要求1所述的图片缩放的方法，其特征在于：当拖动图片的时候，获取移动的横坐标dx和纵坐标dy后，执行以下算法：

int newleft = (int) (left + dx);

int newright = (int) (top + dy);

6.如权利要求1所述的图片缩放的方法，其特征在于：当缩放图片的时候，重新计算标签控件距离父布局控件TagContainer的上下左右边距的算法为：

float newleft = left * tScale ;

float newtop= top * tScale ;