canvas 匹配图形

WytheChan
  • 766

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

回复
阅读 1.5k
2 个回答

比你想象中还难做

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

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

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

陈安柱
  • 4k

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏