Android 生成长图并添加水印（一）

本来是想做一下ListView生成长图的，最后发现ListView未显示部分获取不到，就把ListView改成了NestedScrollView包裹LinearLayout，在LinearLayout中动态添加条目布局。
先看一下效果图：

布局activity_weather_future：

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/srl"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.widget.NestedScrollView
                android:id="@+id/nsv"android:layout_width="match_parent"android:layout_height="wrap_content"android:fillViewport="true"><!--设置paddingBottom是为了在长图下方添加logo图片--><LinearLayout
                    style="@style/MatchMatch"android:orientation="vertical"android:paddingBottom="@dimen/dp_70"><TextView
                        style="@style/MatchWrap"android:layout_marginTop="@dimen/dp_10"android:gravity="center_horizontal"android:tag="skin:future_text_main:textColor"android:text='@{future == null || future.heWeather6.get(0).basic == null?"":future.heWeather6.get(0).basic.location}'android:textColor="@color/future_text_main_default"android:textSize="@dimen/sp_24" /><TextView
                        style="@style/MatchWrap"android:layout_marginTop="@dimen/dp_10"android:gravity="center_horizontal"android:tag="skin:future_text_main:textColor"android:text='@{@string/future_update_time+(future == null || future.heWeather6.get(0).update == null?"":future.heWeather6.get(0).update.loc)}'android:textColor="@color/future_text_main_default"android:textSize="@dimen/sp_16" /><LinearLayout
                        android:id="@+id/ll"style="@style/MatchWrap"android:orientation="vertical" /></LinearLayout></android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

主要操作的就是这个id为ll的LinearLayout，但也别忘了NestedScrollView，不然不会滚动啊。

页面代码：
获取数据源后，循环动态创建条目布局，添加到ll中

mList.clear();
mList.addAll(futureWeatherModel.getHeWeather6().get(0).getDaily_forecast());
ll.removeAllViews();
for (int i = 0; i < mList.size(); i++) {ViewDataBinding dataBinding = DataBindingUtil.inflate(LayoutInflater.from(FutureWeatherActivity.this), R.layout.item_weather_future, null, false);dataBinding.setVariable(BR.daily, mList.get(i));ll.addView(dataBinding.getRoot());
}
srl.setRefreshing(false);

我这里数据源是根据和风天气免费api获取的七天天气，测试的时候可以自己造几条假数据。

ll.setOnLongClickListener(v -> {//如果还在刷新，长按无效，确保生成长图时，数据已经获取到，动态布局已经添加完毕。if (srl.isRefreshing()) {return true;}Toast.makeText(FutureWeatherActivity.this, "生成长图", Toast.LENGTH_SHORT).show();//获取到长图bitmapBitmap listViewBitmap = PhotoUtil.getViewGroupBitmap(nsv);//展示长图bitmapDialog = DialogUtil.showBitmapDialog(FutureWeatherActivity.this, listViewBitmap, bitmapCallback);return true;});

上面就是获取数据、根据数据创建条目添加到ll中、设置ll的长按事件，接下来才是本文的重点，我抽取成了工具方法放在了PhotoUtil中。

    /*** 截取viewGroup内容，生成图片** @param viewGroup 容器控件* @return 图片bitmap*/public static Bitmap getViewGroupBitmap(ViewGroup viewGroup) {int h = 0;Bitmap bitmap;for (int i = 0; i < viewGroup.getChildCount(); i++) {h += viewGroup.getChildAt(i).getHeight();}// 创建相应大小的bitmapbitmap = Bitmap.createBitmap(viewGroup.getMeasuredWidth(), h,Bitmap.Config.ARGB_4444);final Canvas canvas = new Canvas(bitmap);//获取当前主题背景颜色，设置canvas背景canvas.drawColor(SkinManager.getInstance().getResourceManager().getColor("future_bg"));//画文字水印，不需要的可删去下面这行drawTextToBitmap(viewGroup.getContext(), canvas, viewGroup.getMeasuredWidth(), h);//绘制viewGroup内容viewGroup.draw(canvas);//createWaterMaskImage为添加logo的代码，不需要的可直接返回bitmapreturn createWaterMaskImage(bitmap, BitmapFactory.decodeResource(viewGroup.getResources(), R.drawable.icon_mark));}

这里使用SkinManager换肤功能，获取了当前主题背景颜色，可用Color.parseColor(“#8ac5ec”)替代。
想要使用SkinManager的，可以看一下这篇文章：使用SkinManager实现换肤功能

到这里，生成长图功能已经实现了，注意一下我使用的Bitmap.Config是ARGB_4444，如果感觉不清晰的话，可改为ARGB_8888，但是图很大的话可能会OOM了，如果对透明度没啥要求可以改为RGB_565，再对图片压缩一下就更好了。
下面写一下添加文字水印drawTextToBitmap方法，上面的代码顺序不要改变，文字是要加在背景上的。

/*** 给图片添加水印** @param context* @param canvas  画布* @param width   宽* @param height  高*/public static void drawTextToBitmap(Context context, Canvas canvas, int width, int height) {//要添加的文字String logo = "皮卡搜";//新建画笔，默认style为实心Paint paint = new Paint();//设置颜色，颜色可用Color.parseColor("#6b99b9")代替paint.setColor(SkinManager.getInstance().getResourceManager().getColor("future_text_bg"));//设置透明度paint.setAlpha(80);//抗锯齿paint.setAntiAlias(true);//画笔粗细大小paint.setTextSize((float) DensityUtil.dip2px(context, 30));//保存当前画布状态canvas.save();//画布旋转-30度canvas.rotate(-30);//获取要添加文字的宽度float textWidth = paint.measureText(logo);int index = 0;//行循环，从高度为0开始，向下每隔80dp开始绘制文字for (int positionY = -DensityUtil.dip2px(context, 30); positionY <= height; positionY += DensityUtil.dip2px(context, 80)) {//设置每行文字开始绘制的位置,0.58是根据角度算出tan30°,后面的(index++ % 2) * textWidth是为了展示效果交错绘制float fromX = -0.58f * height + (index++ % 2) * textWidth;//列循环，从每行的开始位置开始，向右每隔2倍宽度的距离开始绘制（文字间距1倍宽度）for (float positionX = fromX; positionX < width; positionX += textWidth * 2) {//绘制文字canvas.drawText(logo, positionX, positionY, paint);}}//恢复画布状态canvas.restore();}

上面tan30°的计算方式是由下图得来的

图中A为原canvas,B为旋转-30°后的canvas,width,height为canvas宽高，可以看到旋转后，X坐标向右偏移了，所以绘制时，应向左偏移-tan30°*height,X坐标才能与原坐标相同。

Y坐标虽然也偏移了，但是如图所示，黑色粗线所示的范围是可能绘制不到的区域，且高宽比越大，绘制不到的区域越小，手机的宽度是不变的，当高宽比大于图中height2与width2的比例后，就能做到全绘制。

在我测试的项目里基本不会出现黑色粗线区域，所以我这里没有对高度进行处理，如有需要，可在代码外循环positionY <= height增加height即可。

文字水印加上了，还有个添加logo图标的，一般会要求图上有自己公司的标识嘛。

/*** 添加logo水印** @param src    原图片* @param logo   logo* @return 水印图片*/public static Bitmap createWaterMaskImage(Bitmap src, Bitmap logo) {if (src == null) {return null;}//原图宽高int w = src.getWidth();int h = src.getHeight();//logo宽高int ww = logo.getWidth();int wh = logo.getHeight();//创建一个和原图宽高一样的bitmapBitmap newBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);//创建Canvas canvas = new Canvas(newBitmap);//绘制原始图片canvas.drawBitmap(src, 0, 0, null);//新建矩阵Matrix matrix = new Matrix();//对矩阵作缩放处理matrix.postScale(0.1f, 0.1f);//对矩阵作位置偏移，移动到底部中间的位置matrix.postTranslate(0.5f * w - 0.05f * ww, h - 0.1f * wh - 3);//将logo绘制到画布上并做矩阵变换canvas.drawBitmap(logo, matrix, null);// 保存状态canvas.save(Canvas.ALL_SAVE_FLAG);// 保存// 恢复状态canvas.restore();return newBitmap;}

这样本文内容就完成了，记得一点我这里是只有七条数据，所以不会OOM，如果你需要超长图的话，一定要进行图片压缩，我测的超过30条就很可能崩掉了。

虽然实现了生成长图和添加水印，但是我初衷是想在ListView上做的，感觉按照动态添加的思路，还是可以实现的，其实如果列表数据过多的话，做这个意义也不大，而数据不多的话，用这个也已经可以实现了。长图的用途无非跟简书一样是为了作分享，简书是用webView加载的，html页面进行了数据处理，不过也可以尝试一下。先写到这吧，ListView跟WebView试过之后，再来记一下，如果有做过的，也可以留言交流一下。

Android 生成长图并添加水印（一）相关推荐

android webview生成长图,Android 生成长图并添加水印（二）
本文主要介绍一下RecyclerView生成长图. 是接着上一篇Android 生成长图并添加水印(一)写的,不过单独看也是可以的,如有不清楚的地方可以先看上一篇或在下方留言. 先附效果图: Recy ...
Android 生成长图并添加水印（三）
本文为生成长图系列最后一章,写一下WebView生成长图. 如有不清楚的地方,请先看下前两篇或者在下方留言交流,前两篇传送门: 1.Android 生成长图并添加水印(一) 2.Android 生成长 ...
Android StaticLayout实现主流便签内容生成长图功能
便签记事本是用户常用的一类手机软件,目前各大主流手机均自带此类的工具,并且功能逐渐完善,其中有一项功能--一键生成图片分享比较吸引眼球,尤其是有些社交app在分享动态时有字数限制,如果将要发的内容生成 ...
android 照片拼接长图_Android拼接合并图片生成长图-阿里云开发者社区
Android拼接合并图片生成长图代码实现合并两张图片,以第一张图片的宽度为标准,如果被合并的第二张图片宽度和第一张不同,那么就以第一张图片的宽度为准线,对第二张图片进行缩放. 假设根目录的Pict ...
怎么在手机上做文字长图?云便签可将文字生成长图并分享
有时候,我们需要在手机上记录一些文字,并分享给别人.如果只以文字形式分享,会有较多的局限性,那么能否将文字生成图片,以文字长图的形式将内容分享给好友呢? 其实,文字长图生成并不难,我们常用的多端同步云 ...
uni-app手机截图页面某区域内容-生成长图方法
uni-app手机截图页面某区域内容-生成长图方法 (来自我的今日头条,都是我的博客) 以下是截图当前页面指定区域的全部内容方法安卓测试可行,测试机型为华为,ios没有业务需要所以没做,仅供参考,觉 ...
Android 仿各主流便签内容生成长图功能
1.前言目前各大主流手机均有各自的便签记事本之类的工具,并且功能逐渐完善,其中有一项功能--生成图片分享比较吸引眼球,尤其是有些社交app在发动态是有字数限制,如果将要发的内容生成图片就会解决这个困 ...
Android 截长图
原理:Android 为了提高滚动等各方面的绘制速度,可以为每一个 View 建立一个缓存,使用 View.buildDrawingCache 为自己的 View 建立相应的缓存, 这个 cache ...
android 截长图方法,Android实现截屏与截长图功能
本文实例为大家分享了Android实现截屏与截长图功能展示的具体代码,供大家参考,具体内容如下 Demo在GitHub的地址:ScreenShoot 在Android开发中,有时候会遇到需要截屏分享到 ...

Android 生成长图并添加水印（一）

Android 生成长图并添加水印（一）相关推荐

最新文章

热门文章