byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9443
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
这里有个简易demo,测试兼演示,您可以狠狠地点击这里: 路径面积和元素面积计算demo
输入框内粘贴任意的路径,然后点击第一个按钮,就可以显示这个路径所占据的面积了。
如下图所示:
如果找不到图标路径测试,可以戳这里: https://www.zhangxinxu.com/sp/icon/
也可以计算 <circle>
, <ellipse>
, <rect>
, <line>
元素的面积。
例如demo页面后面圆的面积计算结果示意:
相关的计算方法我已经封装成独立的方法了。
因此,要想使用,只需要简单两步:
引用JS文件。
<script src="./path-area.js"></script>
MIT协议,可随意商用,但需要保留作者信息和文档出处信息。
let area = getPathArea(strPathOrNode, points);
其中, strPathOrNode
是必需参数,可以是字符串,或者是DOM对象,表示需要计算面积的路径或元素; points
是可选参数,表示面积的精度,默认是100,值越大精度越高,通常100的精度足够了,除非路径或元素的尺寸上千上万这种。
返回值 area
就是计算的面积大小。
曲线的面积不太好计算,这里是把曲线转换成多边形,然后再去计算面积的。
如下图所示:
可见,转换的多边形的点越多,最终计算的面积也就月接近,点的数量多少就是参数 points
设置的。
路径转多边形的方法如下,使用了SVG原生的 getTotalLength()
方法和 getPointAtLength()
方法:
function pathToPolygon (elePath, num) { num = num || 100; var len = elePath.getTotalLength(); var points = []; for (var i=0; i < num; i++) { var pt = elePath.getPointAtLength(i * len / (num - 1)); points.push([pt.x, pt.y]); } return points; };
然而,非 <path>
元素是没有路径值的,例如 <circle>
, <ellipse>
, <rect>
, <line>
等内置元素的效果都是由各自语法设置的,怎么办呢?
所以,需要一个任意SVG元素转换成 <path>
元素路径的方法。
这里就参考了convertPath这个项目: https://github.com/convertSvg/convertPath
不过,不知道是原项目使用的人不多还是什么其他原因,居然有几处很明显的bug,然后path-area.js已经做了修复,大家可以放心使用。
本文所提供的面积计算方法,并不是完全精确的面积计算,但是,已经非常接近了,根据我自己测试,通常的SVG图形面积误差在几像素以内。
足矣。
然后有些图形,例如直线外加粗粗的描边,这个是没有面积的。
然后,本文的面积计算不支持多个元素的面积重合计算。请先使用其他工具进行元素或路径的合并,例如SVGO压缩工具。
好,以上就是本文内容,主要就是免费给大家提供一个快速计算SVG图形面积的方法。
如果你觉得本文内容解决了你的大忙,欢迎使用微信给我 (张鑫旭) 打赏,2元即可。
本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址: https://www.zhangxinxu.com/wordpress/?p=9443
(本篇完)
我来评几句
登录后评论已发表评论数()