canvas 匹配图形

Question

如下图蓝框区域，那是一个canvas区域，我做了一个可以自由画线的功能，现在要求是在canvas上按照那个心形虚线画一个心，然后我要判断画好之后的相似程度，不知道怎么判断才好？
如果是矩形或者正方形我想到可以用面积或者4个角点来判断，但是心形这些特殊形状，怎么判断好呢，找不到思路了。

Answer 1

比你想象中还难做。

那么我们先简化简化问题，设定一些前提

1. 提前预制一个路径（比如说三十个点）
2. 设定一个距离阈值（比如说点与点相差5个像素以内认为是同一个点。）
3. 设定一个误差阈值（比如说如果有百分之60的点重复那么就认为他是同一个图形。）

那么在上面的前提下面就比较好判断的。遍历30个点，排查有没有距离比较近的点。

Answer 2

根据中学知识，两个图形相似，那么其总可以将一个图形乘以一定的倍数，使两个图形全等。
所有的方法，都必须要构建大小差不多的两个图形。可以要计算原始图形的 boundingBox，与绘制的图形 boundingBox，然后将他们归一化到相同的大小。

有了归一化的图形，接下来就是要怎么计算他们的相似度，有两个方法：

1. 比较挫的方法：求两个图形之间交集，差集等，然后分配一定的权重来计算，有一些 JS 库提供了求交、差、补的方法，比如供 Three.js 使用的 ThreeBSP
2. 对图形的外边框进行分割采样，然后计算采样点偏离的方差

当然还有更高大上的方式，比如将两个图形进行填充，然后逐像素比对，求汉明距离。
还可以对图形进行特征值提取比对，甚至深入了机器学习领域。