iOS 不规则形状选择 svg方案，原生方案。

公司项目要实现车辆部件选择的功能，由于各个部件形状不规则，所以原生控件很难满足需求。设计图类似下图：

 

点选车辆的部件要求变色，并记录点选状态以及其他一些属性的记录。

 

初始看到这个设计第一感觉是原生控件肯定不支持，需要自己画控件（shaplayer+path），但是再看看这些控件的形状，感觉全都自己画出来貌似不现实，很费劲。后来想到另一种方法，用原生的button，UI给切图，然后一点一点的排列上，由于原生button的形状是矩形的，所以会有重叠的区域，所以需要判断重叠区域是否是透明的 如果透明则不响应点击事件，否则点击事件一直传递到点击区域是不透明的button，让这个button来响应。但是这种方法实现起来还是很麻烦，所以在网上查了一下有没有现成的控件，还真的找到了OBShapedButton。这个控件的原理基本上就是判断点击区域的颜色。但是这个控件貌似比较老了而且貌似有BUG当切图大小小于控件大小的时候点击判断存在问题，所以我没有去深究。

直到我从UI那得到一张很诡异格式的图我没有很好的解决办法。.svg格式，什么鬼？以前没见过。ios常用的不是都是.png格式吗。所以遇到没见过的东西百度一下。svg看介绍眼前一亮。

XML 果断转成HTML，然后事情就简单多了，OC与JS交互，JS控制HTML元素。

这样虽然交互体验不是很好但却是最简单的解决方案。以下是我的demo，有需要的朋友可以参考下。传送门

 

 

pis：做完之后发现SVGKIT，还没来得及研究。