React Native 如何将图片中的多边形自动转换为对应style代码

自动提取类方案 #

• 先做图片矢量化处理：将包含多边形的原图做边缘二值化处理，分离出所有形状的边界后，导入矢量转换工具生成对应SVG路径，不需要手动标记每个顶点。
• 批量代码转换：拿到所有形状的SVG路径后，可以写个轻量脚本，批量把路径顶点转换成你需要的style属性（自动计算每个形状的宽高、上下左右偏移、border参数等），一次处理上百个形状只需要几秒，完全不需要手动计算。如果可以接受用SVG渲染，直接用react-native-svg库加载生成的路径即可，比用CSS样式拼接的开发成本更低。

手动绘制导出类方案 #

如果自动提取的形状精度达不到你的要求，可以用带代码导出功能的绘图工具手动描边：

• 把原图导入矢量绘图工具作为底图锁定，沿着每个多边形的边缘描边，完成后直接导出SVG代码，或者用工具内置的导出功能直接生成React Native兼容的样式/组件代码。
• 也可以用CSS形状生成工具，拖拽调整顶点到和目标形状一致后，直接导出对应的clip-path属性代码，React Native端可直接适配使用。

内容的提问来源于stack exchange，提问作者diiaeac