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">                                <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();            //获取到长图bitmap            Bitmap 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();        }        // 创建相应大小的bitmap        bitmap = 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的代码，不需要的可直接返回bitmap        return 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();        //创建一个和原图宽高一样的bitmap        Bitmap 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试过之后，再来记一下，如果有做过的，也可以留言交流一下。

更多相关文章

随机推荐