SVG任意图形和path路径的面积计算

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9443

本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

一、使用示意

这里有个简易demo,测试兼演示,您可以狠狠地点击这里: 路径面积和元素面积计算demo

输入框内粘贴任意的路径,然后点击第一个按钮,就可以显示这个路径所占据的面积了。

如下图所示:

如果找不到图标路径测试,可以戳这里: https://www.zhangxinxu.com/sp/icon/

也可以计算 <circle><ellipse><rect><line> 元素的面积。

例如demo页面后面圆的面积计算结果示意:

二、如何使用

相关的计算方法我已经封装成独立的方法了。

因此,要想使用,只需要简单两步:

  1. 引用JS文件。

    <script src="./path-area.js"></script>

    你可以 点击这里下载path-area.js

    MIT协议,可随意商用,但需要保留作者信息和文档出处信息。

  2. 执行计算方法。
    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

(本篇完)

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章