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

来源:互联网 发布:mac压缩软件 编辑:程序博客网 时间:2024/06/09 19:45

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


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


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

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

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

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




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





原创粉丝点击