SVG在iOS中使用总结

SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape例如：由直线和曲线组成的路径）、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等 *** 作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

SVG在iOS中可以用UIWebView来加载：

这种方法来加载SVG，虽然也可以，但是却存在诸如放大缩小、点击交互等问题。所以一般更加推荐使用 SVGKit 。

SVGKit 使用

1、SVG创建

2、实现SVG放大缩小功能

实现UIScrollView的代理方法：

3、SVG上进行路线规划

SVG上的线路规划，需要从服务器中拿取相关的坐标点，然后将其绘制在SVG上。具体实现如下：

效果如下：

以鼠标为焦点缩放 = 以原点为焦点缩放 + 位移。利用svg的属性viewbox：x，y控制位移，width，height控制缩放。

在当前视窗内，改变viewBox的width与height即可实现以左上角为原点的缩放，故只需计算以左上角为焦点缩放后和以鼠标位置为焦点缩放后两个原点的偏移量即可。后文不再赘述scale与viewbox的关系。

以鼠标位置为基准计算新原点位置

最近因为工作需要做了点HTML5可视化研究如下

为什么没有字体颜色作为一个设计师很不爽

第一次发文有写错的地方还请诸位高手多多包涵

设想，要在页面中生成大量的简单图形，比如10万个方块，并对它们进行拖拽 *** 作。

基本思路有三种方式，传统Div，Svg，与Canvas。

为了加拖拽，暂时没有用canvas。

因为canvas无法生成dom节点，不存在id这种属性，需要通过判断鼠标位置来获取元素再进行 *** 作。虽然写个isMouseinObj()的function也不是不行，但总觉得以后针对某对象单独处理会夜长梦多（主要还是懒）。。。不过从生成图形角度讲，canvas理论上是最快的。

因为贪生怕死担心Dom过多死机，准备先分区生成方块，于是：

一个简图，整体划分如下，设两个input框的值分别为m, n，每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。

点击GenAll可一次性生成mn个绿块。点击Drag可对绿块进行拖拽。

模拟开始。

首先是用div模拟方块。因为比较熟悉写起来也简单。

Div的拖拽方式可以分成两种。

Jquery-ui的draggble还有很多其他参数，请参考api文档。

现在假定一种新情形：绿色方块只能拖拽到虚线框之内。

默认情况下，Html元素均不可拖拽，所以需要设置拖拽元素的draggable属性为true。同时，默认无法将元素放置到其他元素中，所以需要eventpreventDefault()设置允许放置。

本例中，为class为abox的绿方块添加draggable。

为class为wrap的虚线框添加preventDefault。

之后通过dataTransfer传输数据，实现box的移动。

由于Svg也是直接在Html中生成Dom节点，理论上Div所能实现的功能它都可以实现，并且绘图效果更佳。

然后生成Svg元素，并设置其属性。

循环生成Svg方块并添加拖拽属性。

但这种方式有个问题，就是——慢。当生成仅10000个方块时，效率便低的不可估量。

然而Svg无法应用Html5原生的Drag and Drop事件。

相比于引用插件，这样的效率提高了不少。

从结果上看，在数量少时，针对方块这种简单图形的简单 *** 作Div和Svg均可胜任。然而设置了总共生成100000个方块，发现单从生成的角度，Svg的渲染用时大约是Div的1/2（这里指Dom中直接绘制Svg而非通过js插件绘制Svg）。

加上拖拽功能后，用Html5原生拖放事件的Div，及用鼠标事件的Svg，明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。

于是在图形化上还是应用Svg更舒畅一些。

但有一个尚未解决的问题。

应用鼠标事件拖动Svg，当鼠标移动过快时，mousemove事件无法触发，导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件，不过还没有深入研究。

这篇就到此吧。等解决了mousemove的bug再更新后续。

(´・ω・`)

以上就是关于SVG在iOS中使用总结全部的内容，包括:SVG在iOS中使用总结、【缩放】实现svg以鼠标为焦点缩放、Div & Svg可视化探索笔记等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！