SVG或画布倒角&；浮雕以查找文本的中心线

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

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

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

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

---

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

不知何故，这一点引起了我的兴趣，尽管我不确定这是获得结果的有效方法

中心线是什么？我将其定义为轮廓内的所有点的集合，这些点满足以下条件：必须至少有一条直线穿过该点，其中到最近轮廓线的距离是沿着该点的直线的局部最大值。实际上，测试水平线和垂直线就足够了

我尝试使用接口中的两个函数来实现这一点：

.getPointAtLength（）

和

.ispointinfl（）

。第二个浏览器目前只在Chrome中实现，因此Chrome是唯一一个可以使用的浏览器

元素未实现

SVGGeometryElement

接口，因此必须将其转换为

。这是在浏览器中无法完成的，您需要一个适当的grafics程序来完成

对于1000*500个点，沿着两个字母轮廓的约5000个点中哪一个是最接近的，这需要大量计算。因此，这包含一个粗略的机制，仅测试Vincity中的轮廓点。尽管如此，给它几秒钟的时间来完成。如果在该大小下只计算一个字母，并将画布大小减半，则执行时间大约为四分之一

const width=1000；
常数高度=500；
常量字母=document.querySelector（'path'）；
const svg=document.querySelector（'svg'）；
const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
ctx.fillStyle='白色'；
函数isInside（x，y）{
const point=svg.createSVGPoint（）；
点x=x；
点y=y；
返回信。i点填充（点）；
}
//一个21*11的数组
常量字段=新数组（21）.填充（0）.映射（（）=>{
返回新数组（11）.fill（0）.map（（）=>[]）；
});
//沿等高线的点列表
const length=Math.floor（letter.getTotalLength（））；
数组.from（新数组（长度），（x，i）=>{
回信。getPointAtLength（一）；
}).forEach（点=>{
//确定轮廓点是否位于100*100矩形内
设rx1=数学舍入（点x/100）*2；
设ry1=数学圆（点y/100）*2；
//或偏移50的100*100矩形
设rx2=数学舍入（（点x+50）/100）*2-1；
设ry2=数学圆（（点y+50）/100）*2-1；
//将该点推入其所属矩形的所有四个列表中
字段[rx1][ry1]。推送（点）；
字段[rx1][ry2]。推送（点）；
字段[rx2][ry1]。推送（点）；
字段[rx2][ry2]。推送（点）；
});
常量数据=新的浮点数组（宽度*高度）；
对于（设y=0；y{
常量距离=数学形下（点x-x，点y-y）
返回Math.min（min，dist）；
}, 100);
//存储该距离值
数据[y*宽度+x]=d；
}
}
}
data.forEach（（v，i，a）=>{
//找出距离最近的轮廓点的距离
//是垂直或水平的局部最大值
常数垂直=a[i-宽度]
不知何故，这一点让我很高兴，尽管我不确定这是一种有效的方法来获得结果

中心线是什么？我将其定义为轮廓内的所有点的集合，这些点满足以下条件：必须至少有一条直线穿过该点，其中到最近轮廓线的距离是沿着该点的直线的局部最大值。实际上，测试水平线和垂直线就足够了

我尝试使用接口中的两个函数来实现这一点：
.getPointAtLength（）
和
.ispointinfl（）
。第二个浏览器目前只在Chrome中实现，因此Chrome是唯一一个可以使用的浏览器

元素未实现
SVGGeometryElement
接口，因此必须将其转换为
。这是在浏览器中无法完成的，您需要一个适当的grafics程序来完成

对于1000*500个点，沿着两个字母轮廓的约5000个点中哪一个是最接近的，这需要大量计算。因此，这包含一个粗略的机制，仅测试Vincity中的轮廓点。尽管如此，给它几秒钟的时间来完成。如果在该大小下只计算一个字母，并将画布大小减半，则执行时间大约为四分之一


const width=1000；
常数高度=500；
常量字母
<filter id="filterData">
    <feGaussianBlur stdDeviation="5" />
    <feDiffuseLighting surfaceScale="500">
         <feDistantLight azimuth="90" elevation="90" />
    </feDiffuseLighting>
    <feComposite result="composite" operator="in" in2="SourceGraphic" /> 
</filter>