时间戳

首页 > 解决方案 > SVG 或 Canvas 斜面和浮雕来查找文本的中心线

svg - SVG 或 Canvas 斜面和浮雕来查找文本的中心线

问题描述

Photoshop 斜面和浮雕效果可以轻松找到与文本字符中心线重合的中心“脊”。这是通过增加适当的效果设置以最大化斜面来完成的，从而创建这样的脊。

Photoshop 示例

此 Photoshop 示例经过处理以进一步突出中心脊

是否可以在浏览器中使用 SVG 过滤器或 Canvas 技术实现相同的效果？

一旦这个效果到位，我就可以获得我想要的中心线的坐标。

或者，是否有现有算法可以通过数学方法从光栅图像或矢量形状中获取该中心线？

标签： svgcanvas

解决方案

SVG 滤镜是一​​个强大的功能，可以像浏览器中的 Photoshop。您可以通过将一些过滤器原语链接在一起来实现所需的结果。

<filter id="filterData">
    <feGaussianBlur stdDeviation="5" />
    <feDiffuseLighting surfaceScale="500">
         <feDistantLight azimuth="90" elevation="90" />
    </feDiffuseLighting>
    <feComposite result="composite" operator="in" in2="SourceGraphic" /> 
</filter>

第一个基元模糊了文本。然后照明图元使用模糊图元的结果作为凹凸贴图来提供文本深度。您将不得不根据文本的粗细使用surfaceScale 属性。复合基元会将最终结果剪切到未过滤文本的区域，即“SourceGraphic”。

[codepen 示例] https://codepen.io/lahaymd/pen/EdNXam

推荐阅读