什么是SVG SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形.是一种基于可扩展标记语言(XML).它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降.它的优点在于节约空间,使用方便. svg的优点 首先简要解释一下矢量图像格式和位图图像格式的区别.矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出.而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽.SVG是…

前言 来继续学习SVG,要想深入了解还是要多动手进行实战.关于svg基础可以去看一下我的上一篇文章<SVG前戏—让你的View多姿多彩>,今天就用SVG打造一个精美的UI效果. 正文 先上效果图: 开启线程池,进行绘制 选择省份 我们都知道SVG的文件是纯粹的 XML.如:   [图片上传中...(12345.gif-60d52c-1533723732988-0)] 123.gif 看到这里,我们都明白了.原来里面类似以path的数据进行组装的.只需要进行解析xml就可以了. 解析关键代码:…

前言 写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别.相比之下,小程序的钩子函数要简单得多. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期   相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样. onLoad: 页面加载 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数. onShow: 页面显示 每次打开页…

test.wxml页面 <view class="title">请选择要反馈的问题</view> <view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view>{{array[index]}}</view> <image src='../…

chooseVideo(e) { this.fileInfo = {} let that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: 'back', success: function(res) { that.fileInfo = res that.$apply()   // 页面有变化 } }) this.$apply() // 页面无变化 }   <view> <v…

小程序并不新鲜,模式上先有百度轻应用,后有支付宝的各类小服务,再来还有腾讯自家QQ右下角的应用宝:技术上也就是FaceBook RN的那一套.一个技术上无创新,形式上无创意的事物,凭什么勾起了开发者们疯狂的崇拜,甚至引起了互联网圈子的震动?答案还是在于微信这个超级应用的流量入口和关系链上,如果是百度搞一个同样技术的"大程序"放在 "百度全家桶的任一款应用里",开发者们还会这么疯狂吗.以前只有京东(真 · 亲儿子,独享一个发现里的购物入口).滴滴.58等能享受到的流量…

view绘制流程是从ViewRoot的performTraversals()方法中开始的,在该方法中会执行view绘制的三部曲,即:measure(测量视图的大小),layout(确定视图的位置)draw(绘制视图的内容).Android界面绘制流程:             从左图中我们可以看出Android界面绘制流程分为三个部分,第一部分是测量(Measure),View会先做一次测量,计算出自己需要占用多大的面积,我们可以重写 onMeasure() 方法来重新定义View的宽高.第二部…

1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set mpath 剪裁模块 clipPath 颜色轮廓模块 color-profile 条件处理模块 switch 光标模块 cursor 扩展性模块 foreignObject 过滤器模块 filter feFlood feColorMatrix feComponentTransfer feComposite feConvolveMa…

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:animate, animateColor, animateMotion, animateTransform, set: 解释元素:desc, metadata, title: 图形元素:circle, ellipse, line, path, polygon, polyline, rect: 结构元素…

坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系.默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下:如下图所示: SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是如果SVG是存储在embedded对象中(例如object元素,或者其他SVG元素),而且包含SVG的文档是用CSS或者XSL格式化的,并且这些外围对象的CSS或者其他指定尺寸的值已经可以计算出视窗的尺寸了,则此时会使用外围对象的尺…