Canvas 的形状识别转化为功能

Posted 2023-02-25

【中文标题】Canvas 的形状识别转化为功能

【英文标题】：Canvas' shape recognition into function

【发布时间】：2013-07-09 14:44:13

【问题描述】：

首先;抱歉，如果这是问这样一个问题的错误地方。 如果我犯了这个错误，请随意点赞或关闭主题。

我最近开始“玩”html5、jquery 和 canvas。

我想创建一个简单的快速“配对形状”的移动网站小游戏：

网站显示 3 种形状（即：正方形、圆形、正方形），玩家必须猜测接下来会出现什么形状。为此，玩家只需在手机上绘制形状即可。

ex : 形状是正方形、圆形、正方形。玩家只需用他的拇指在他的 iPhone 屏幕上“画”一个圆圈，这是一个很好的 -> 下一个级别！

问题是我真的不知道如何检查玩家是否创建了圆形、正方形或其他形状。

起初我想到了手写识别并找到了一个有用的链接：http://brenoferreira.wordpress.com/2012/03/14/handwriting-recognition-com-html5-canvas/（我也不会说葡萄牙语，但代码说明了一切）

他在服务器端使用了 ASP.NET MVC 4 + JSON 代码，我的问题是；由于作者在 2012 年 3 月写了这篇文章，还有其他解决方案吗？

我真的不想使用 ASP.NET，是否可以使用其他代码创建类似的东西？ （我假设 php 不能做这样的事情）。

我还发现了这个http://home.comcast.net/~urbanjost/canvas/graffiti/graffiti.html，这也是相关的。

我很确定这是可能的。 提前感谢您的提示/资源/帮助。

【参考方案1】：

对于这些简单的形状，您可以使用角度差和拐点值来很好地猜测形状。

对于所有形状，您记录笔画中的所有点（或将所有笔画合并到一个路径中）。

对于一个正方形，您逐行（前一点和当前点）计算它们之间的角度。如果角度高于阈值（例如 50 度），则您有一个角。如果您最终得到三个角并且终点靠近起点，那么您可能有一个正方形。还要考虑相对于整个绘图区域的权重位置。

对于圆，您加权所有线的平均角度。它们都将朝一个方向 +/- 一些度数。和正方形一样，检查终点是否在起点的“区域”内。

当前版本的帖子指出：“形状是方形、圆形、方形。” - 如果我假设最后一个应该是三角形，过程与正方形相同，只需以更陡的角度计算 2 个角。

您可以使用平滑算法、移动平均、点减少算法等来处理更简单的数据。最后都是关于统计和概率的。

（这是一个广泛的话题，所以我有点不愿意为此编写代码，但我希望理论有助于理解）。

角度计算代码（x1，y1为当前点，x2和y2为前点）：

var ang = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

（顺便说一句，您可以在 vanilla javascript 中进行所有这些计算）。

【讨论】：

感谢您的快速回答！读完之后，我想出了如何创建小算法（我们可以说这是一个算法吗？）我创建了一个小代码记录画布上发生的事情，现在我将尝试弄清楚如何确定角度。由于这对我自己来说是一个简单的练习，我只会做方形识别。再次，非常感谢！