利用svg合成任意形状的图片

什么是svg:

百度百科这样说：

SVG可以算是目前最最火热的图像文件格式了，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到HTML中通过浏览器来观看。

svg是一种基于xml格式的矢量图，同时它最内存的性能消耗非常非常小。

先看效果图：

这里是利用了svg图和一个红衣美女的图合成的各种各样形状的demo。
使用svg图片来控制边框样式,和一张普通图片来合成各种各样形状的图片。
我们掌握了这种方法之后就可以根据自己的需要合成各种形状的图片。
同时这种方式对内存的消耗非常非常小，如果我们使用两个普通的png图片合成的话开销要比使用svg+图片的代价大得多。

这四个svg文件大小仅仅只有1kb，实际上是不到1kb的，电脑显示的是1kb而已。

这个就只有477个字节，可见使用svg可以大大节省内存，绝对不会oom的。

代码：

svg图片其实是xml格式的语句控制绘制出来的，所以我们需要一个可以解析svg语言的工具。
我在github上搜到了这个工具：

链接地址：

GitHub - pents90/svg-android: Support for scalable vector graphics in Android
https://github.com/pents90/svg-android

使用：
1、把解析svg的工具导入到自己的项目里
其实就是这个类

2、写一个自己的svgUtil用来合成图片

我写了个SvgShapeBitmapUtil.java

SvgShapeBitmapUtil.java:

/*** Created by lhd on 2016/7/20.*/
public class SvgShapeBitmapUtil {/** svg convert to bitmap* */public static Bitmap getSvgBitmap(Context context, int width, int height, int svgRawResourceId) {//創建一個空白图片，然后加载到一个画布上Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);//绘制，如果传入了一个错误的id，就弹出Toast报错if (svgRawResourceId > 0) {//从资源文件里提取自己的svg样式图片SVG svg = SVGParser.getSVGFromInputStream(context.getResources().openRawResource(svgRawResourceId),width, height);//将svg图片画在刚刚建立的画布上canvas.drawPicture(svg.getPicture());} else {Toast.makeText(context, "错误的图片样式", Toast.LENGTH_SHORT).show();}return bitmap;}/** 根据svg形状图和原图合成最终的形状图形* svg图在下，原图在上* */public static Bitmap getSvgShapeBitmap(Context context, Bitmap fg, int svgResourceId) {//用一个正方形裁剪原图//获取原图里最大的正方形的值  原图宽和高里的最小值，就是原图里最大的正方形的边长int size = Math.min(fg.getWidth(), fg.getHeight());//正方形居中的时候的左上角的坐标int x = (fg.getWidth() - size) / 2;int y = (fg.getHeight() - size) / 2;//加载svg图片,图片宽高和原图里裁剪出来的正方形的边长一致Bitmap bg = getSvgBitmap(context, size, size, svgResourceId);Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);//新建空白图片的画布用来合成svg图片和形状Canvas canvas = new Canvas(bitmap);//绘制svg形状作为srccanvas.drawBitmap(bg, new Matrix(), paint);//取下层非交集部分和上层交集部分,原图在上，svg在下paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));//绘制原图作为dstcanvas.drawBitmap(Bitmap.createBitmap(fg, x, y, size, size), new Matrix(), paint);return bitmap;}
}

x,y坐标的解释：

PorterDuffXfermode模式的解释;

先绘制的会被作为src图片，后绘制的会被作为dst图片。

我们需要一张原图

我们需要svg图片，svg图片用来控制要合成的形状。
比如：
shape1.svg:

shape2.svg:

接下来就是使用SvgShapeBitmapUtil合成了。

MainActivity.java


public class MainActivity extends AppCompatActivity {private ImageView imageView;private int i = 0;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imageView = (ImageView) findViewById(R.id.svg_img);findViewById(R.id.svg_btn).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {shape(imageView);}});}public void shape(View view) {//通过svg合成任意形状图片int[] resIds = new int[]{R.raw.shape1, R.raw.shape2, R.raw.shape3,R.raw.shape4};int resId = resIds[i];i++;if (i == 4) i = 0;Log.i("LHD", "i==" + i);Bitmap meinv = BitmapFactory.decodeResource(getResources(),R.drawable.girl);//合成的随机形状图片Bitmap bitmap = SvgShapeBitmapUtil.getSvgShapeBitmap(this, meinv, resId);//新图片已经合成释放旧图片meinv.recycle();imageView.setImageBitmap(bitmap);}}

布局文件：
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#50aa"><TextView
        android:id="@+id/t1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:text="SVG Test" /><ImageView
        android:id="@+id/svg_img"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/t1"android:layout_centerHorizontal="true"android:layout_marginTop="20dp"android:src="@mipmap/ic_launcher" /><Button
        android:id="@+id/svg_btn"android:layout_width="200dp"android:layout_height="50dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:text="开始svg变换" />
</RelativeLayout>

以上就是使用svg合成各种形状图片的过程了。
代码下载：
利用svg合成各种形状的图片 - 下载频道 - CSDN.NET
http://download.csdn.net/detail/baidu_31093133/9582568

利用svg合成任意形状的图片相关推荐

python批量生成图片_利用Python批量生成任意尺寸的图片
实现效果通过源图片,在当前工作目录的/img目录下生成1000张,分别从1*1到1000*1000像素的图片. 效果如下: 目录结构实现示例 # -*- coding: utf-8 -*- imp ...
谷歌研究利用AI合成图片，使静态图片动起来
内容来源:ATYUN AI平台谷歌的研究人员开发了一个基于深度学习的系统,可以将立体相机,VR相机和双镜头相机(如iPhone 7或X)拍摄的静态图像转换为短视频. "给出两个图像与已知的 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
Android中绘制圆角矩形图片及任意形状图片
转自http://blog.csdn.net/silangquan/article/details/8056583 圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为 ...
windows自带的比微信好用的截图工具：截取任意形状图片，标尺画直线，窗口图精准截取
快捷键 win+shift+s 可以调用 windows 自带的截图工具. 这个工具最主要有三个优点: ① 就是可以截取任意形状. ② 编辑时,可以借助标尺画很直的线. ③ 窗口完美包裹截图,强迫症的 ...
【Android】0行代码实现任意形状图片展示--android-anyshape
前言在Android开发中, 我们经常会遇到一些场景, 需要以一些特殊的形状显示图片, 比如圆角矩形.圆形等等.关于如何绘制这类形状, 网上已经有很多的方案,比如自定义控件重写onDraw方法, 通 ...
自然场景下的文字检测：从多方向迈向任意形状
点击我爱计算机视觉标星,更快获取CVML新技术本文经作者授权转载自知乎旷视Detection组专栏: https://zhuanlan.zhihu.com/p/68058851 旷视检测组在刚刚结束 ...
StackGAN详解与实现（使用tensorflow2.x实现）——利用文本合成逼真的图像
StackGAN详解与实现(使用tensorflow2.x实现)--利用文本合成逼真的图像 StackGAN原理 StackGAN简介 StackGAN架构文本编码器网络条件增强网络获取条件增强 ...
ICDAR 2019比赛及数据集下载-任务-ICDAR2019任意形状文本的鲁棒阅读挑战
ICDAR 2019比赛及数据集下载 https://rrc.cvc.uab.es/?ch=14&com=tasks 任务-ICDAR2019任意形状文本的鲁棒阅读挑战我们提议的比赛包括三个 ...

利用svg合成任意形状的图片

利用svg合成任意形状的图片相关推荐

最新文章

热门文章