3

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

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

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

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

例如：形状是正方形、圆形、正方形。玩家只需用他的拇指在他的 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这也是相关的。

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

4

1 回答 1

1

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

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

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

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

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

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

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

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

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

（你可以在 vanilla JavaScript btw 中完成所有这些计算）。

于 2013-07-09T14:59:26.237 回答