Android:图片中叠加文字,支持拖动改变位置
之所以做了这么一个Demo,是由于近期项目中有一个奇葩的需求:用户拍摄照片后,分享到微信的同一时候加入备注,想获取用户在微信的弹出框输入的内容。保存在自己的server上。而其实,这个内容程序是无法获取的,因此採取了一个折衷方案,将文字直接写在图片上。
首先上Demo效果图:
功能:
1.用户自由输入内容,可手动换行,而且行满也会自己主动换行。
2.可拖动改变图片中文本位置(文字不会超出图片区域)。
3.点击“生成图片”button之后,生成一张带有文字的图片文件。
代码不多,直接所有贴上了:
Activity:
/**
* 将文字写在图片中(截图方式),支持拖动文字。 <br/>
* 说明:非常明显,截图方式会减少图片的质量。假设须要保持图片质量能够使用canvas的方式。将文字直接绘制在图片之上(只是,使用此方式要实现文字拖动较为复杂)。
*/
public class MainActivity extends AppCompatActivity {
//图片组件
private ImageView imageView;
//位于图片中的文本组件
private TextView tvInImage;
//图片和文本的父组件
private View containerView; //父组件的尺寸
private float imageWidth, imageHeight, imagePositionX, imagePositionY; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.image_with_text); imageView = (ImageView) findViewById(R.id.writeText_img);
EditText editText = (EditText) findViewById(R.id.writeText_et);
tvInImage = (TextView) findViewById(R.id.writeText_image_tv);
containerView = findViewById(R.id.writeText_img_rl); imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
imageView.getViewTreeObserver().removeOnGlobalLayoutListener(this); imagePositionX = imageView.getX();
imagePositionY = imageView.getY();
imageWidth = imageView.getWidth();
imageHeight = imageView.getHeight(); //设置文本大小
tvInImage.setMaxWidth((int) imageWidth);
}
}); imageView.setImageBitmap(getScaledBitmap(R.mipmap.test_img)); //输入框
editText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (s.toString().equals("")) {
tvInImage.setVisibility(View.INVISIBLE);
} else {
tvInImage.setVisibility(View.VISIBLE);
tvInImage.setText(s);
}
} @Override
public void afterTextChanged(Editable s) { }
}); final GestureDetector gestureDetector = new GestureDetector(this, new SimpleGestureListenerImpl());
//移动
tvInImage.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
gestureDetector.onTouchEvent(event);
return true;
}
});
} //确认,生成图片
public void confirm(View view) {
Bitmap bm = loadBitmapFromView(containerView);
String filePath = Environment.getExternalStorageDirectory() + File.separator + "image_with_text.jpg";
try {
bm.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(filePath));
Toast.makeText(this, "图片已保存至:SD卡根文件夹/image_with_text.jpg", Toast.LENGTH_LONG).show();
} catch (FileNotFoundException e) {
e.printStackTrace();
}
} //以图片形式获取View显示的内容(相似于截图)
public static Bitmap loadBitmapFromView(View view) {
Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
view.draw(canvas);
return bitmap;
} private int count = 0;
//tvInImage的x方向和y方向移动量
private float mDx, mDy; //移动
private class SimpleGestureListenerImpl extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//向右移动时,distanceX为负。向左移动时。distanceX为正
//向下移动时,distanceY为负。向上移动时。distanceY为正 count++;
mDx -= distanceX;
mDy -= distanceY; //边界检查
mDx = calPosition(imagePositionX - tvInImage.getX(), imagePositionX + imageWidth - (tvInImage.getX() + tvInImage.getWidth()), mDx);
mDy = calPosition(imagePositionY - tvInImage.getY(), imagePositionY + imageHeight - (tvInImage.getY() + tvInImage.getHeight()), mDy); //控制刷新频率
if (count % 5 == 0) {
tvInImage.setX(tvInImage.getX() + mDx);
tvInImage.setY(tvInImage.getY() + mDy);
} return true;
}
} //计算正确的显示位置(不能超出边界)
private float calPosition(float min, float max, float current) {
if (current < min) {
return min;
} if (current > max) {
return max;
} return current;
} //获取压缩后的bitmap
private Bitmap getScaledBitmap(int resId) {
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inJustDecodeBounds = true;
BitmapFactory.decodeResource(getResources(), resId, opt); opt.inSampleSize = Utility.calculateInSampleSize(opt, 600, 800);
opt.inJustDecodeBounds = false;
return BitmapFactory.decodeResource(getResources(), resId, opt);
}
}
一个工具类:
public class Utility {
//计算 inSampleSize 值。压缩图片
public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
// Raw height and width of image
final int height = options.outHeight;
final int width = options.outWidth;
int inSampleSize = 1; if (height > reqHeight || width > reqWidth) {
final int halfHeight = height / 2;
final int halfWidth = width / 2; // Calculate the largest inSampleSize value that is a power of 2 and keeps both
// height and width larger than the requested height and width.
while ((halfHeight / inSampleSize) > reqHeight && (halfWidth / inSampleSize) > reqWidth) {
inSampleSize *= 2;
}
} return inSampleSize;
}
}
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"> <RelativeLayout
android:id="@+id/writeText_img_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"> <ImageView
android:id="@+id/writeText_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxHeight="360dp"
android:adjustViewBounds="true"
android:contentDescription="@null"/> <TextView
android:id="@+id/writeText_image_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="#79652a"
android:clickable="true"
android:padding="4dp"
android:textColor="@android:color/white"
android:textSize="15sp" />
</RelativeLayout> <EditText
android:id="@+id/writeText_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:hint="加入备注" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="confirm"
android:text="生成图片" /> </LinearLayout>
<完>
Android:图片中叠加文字,支持拖动改变位置的更多相关文章
- android控件跟随手势滑动改变位置
要求:1.通过手指移动来拖动图片 2.控制图片不能超出屏幕显示区域 技术点:1.MotionEvent处理2.对View进行动态定位(layout) activity_main.xml: < ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
- Android技术分享-文字转语音并朗读
Android技术分享-文字转语音并朗读 最近在做一个项目,其中有一个功能是需要将文本转换成语音并播放出来.下面我将我的做法分享一下. 非常令人开心的是,Android系统目前已经集成了TTS,提供了 ...
- 使用Python进行OCR -- 识别图片中的文字
工具 Tesseract pytesseract tesserocr 朋友需要一个工具,将图片中的文字提取出来.我帮他在网上找了一些OCR的应用,都不好用.所以准备自己研究,写一个Web APP供他使 ...
- 如何用ABBYY FineReader提取图片中的文字
作为OCR文字识别软件中的佼佼者,可能大家对于ABBYY FineReader的使用还不熟练,没关系,今天小编就为大家演示,如何用ABBYY FineReader这款文字识别软件,将一张截图中的文字识 ...
- C# 扫描并读取图片中的文字
本文介绍如何通过C# 程序来扫描并读取图片中的文字,这里以创建一个.Net Core程序为例.下面是具体步骤,供参考. 程序测试环境: Visual Studio版本要求不低于2017 图片扫描工具: ...
- C# 扫描识别图片中的文字(.NET Framework)
环境配置 本文以C#及VB.NET代码为例,介绍如何扫描并读取图片中的文字. 本次程序环境如下: Visual Studio版本要求不低于2017 图片扫描工具:Spire.OCR for .NET ...
- Android:让WebView支持<input type=”file”…>元素
最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...
随机推荐
- CSS3的-字体 @font-face
http://www.w3cplus.com/content/css3-font-face http://www.w3cplus.com/css3/web-icon-with-font-face ht ...
- 创建虚拟机、安装centos系统,xshell连接虚拟机
创建虚拟机 文件--->新建虚拟机--->自定义最高级 选择虚拟机兼容性: workstation12.0:限制少,而且兼容的多 稍后安装操作系统 选择Linux系统 可选择centos7 ...
- python基础——17(面向对象)
一.名称空间 名称空间有内置名称空间,全局名称空间,局部名称空间.它是用来存放名字与值对应关系的地方. test.py文件: num = 10 def fn(): print("fn run ...
- 2017ACM/ICPC广西邀请赛-重现赛(感谢广西大学)
上一场CF打到心态爆炸,这几天也没啥想干的 A Math Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...
- 树状数组 Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) C. Fountains
C. Fountains time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 九度oj 题目1021:统计字符
题目描述: 统计一个给定字符串中指定的字符出现的次数. 输入: 测试输入包含若干测试用例,每个测试用例包含2行,第1行为一个长度不超过5的字符串,第2行为一个长度不超过80的字符串.注 ...
- BZOJ 3831: [Poi2014]Little Bird【动态规划】
Description In the Byteotian Line Forest there are trees in a row. On top of the first one, there ...
- 【2018.10.2】Note of CXM
1.有一张无向图,现在要给每个点染上黑色或白色,最后每个点的染色代价是它与离这个点最近的不同色节点的距离.求最小代价.所有边权$\geq 0$且互不相同. 分三种情况: 两点都染了色:两点都跟其它点算 ...
- eclipse导入svn检出的maven项目问题
1.修改项目jdk环境和编译环境.消除红叉. 2.windows-preferences-java-installed jres,修改工作空间的jdk,在Default vm arguments栏中添 ...
- response.sendRedirect(location)与rd.forward()区别
在Java Web开发中,经常会用到跳转页面的方法,一般有下面两种方法. HttpServletResponse response = new HttpServletResponse(); respo ...