从用户的触摸中画出一个完美的圆圈
我有这个练习项目，允许用户用手指触摸屏幕。我做的非常简单的App作为锻炼方式回来了。 我的小表弟冒昧地用我的iPad用手指在这个应用程序上画画（儿童画：圈子，线条等等，无论他想到什么）。 然后他开始画圆圈，然后他让我把它变成“好圆圈”（根据我的理解：让绘制的圆圈完美地圆，我们知道 无论我们试图用手指在屏幕上绘制一些东西是多么稳定，圆圈永远不会像圆圈一样圆润。
所以我的问题是，在代码中是否有任何方法我们可以首先检测用户绘制的线条，形成一个圆圈，并通过使其在屏幕上完美圆形来生成大致相同大小的圆圈。做一个不那么直线的东西我会知道怎么做，但至于圆圈，我不知道如何用石英或其他方法去做。
我的理由是，在用户举起手指以证明他试图画一个圆圈的事实之后，线的起点和终点必须相互接触或交叉。
7 个答案:
答案 0 :(得分：356)
有时花一些时间重新发明轮子真的很有用。您可能已经注意到有很多框架，但是在不引入所有复杂性的情况下实现简单但有用的解决方案并不难。 （请不要误解我的意思，出于任何严肃的目的，最好使用一些成熟且经证明是稳定的框架）。
我将首先展示我的结果，然后解释它们背后简单明了的想法。
你会在我的实现中看到，没有必要分析每一个点并进行复杂的计算。这个想法是发现一些有价值的元信息。我将以tangent为例：
让我们确定一个简单直接的模式，典型的选择形状：
因此，基于该想法实现圆检测机制并不困难。请参阅下面的工作演示（对不起，我使用Java作为提供此快速且有点脏的示例的最快方法）：
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.HeadlessException;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
public class CircleGestureDemo extends JFrame implements MouseListener, MouseMotionListener {
enum Type {
RIGHT_DOWN,
LEFT_DOWN,
LEFT_UP,
RIGHT_UP,
UNDEFINED
}
private static final Type[] circleShape = {
Type.RIGHT_DOWN,
Type.LEFT_DOWN,
Type.LEFT_UP,
Type.RIGHT_UP};
private boolean editing = false;
private Point[] bounds;
private Point last = new Point(0, 0);
private List<Point> points = new ArrayList<>();
public CircleGestureDemo() throws HeadlessException {
super("Detect Circle");
addMouseListener(this);
addMouseMotionListener(this);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setPreferredSize(new Dimension(800, 600));
pack();
}
@Override
public void paint(Graphics graphics) {
Dimension d = getSize();
Graphics2D g = (Graphics2D) graphics;
super.paint(g);
RenderingHints qualityHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
qualityHints.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g.setRenderingHints(qualityHints);
g.setColor(Color.RED);
if (cD == 0) {
Point b = null;
for (Point e : points) {
if (null != b) {
g.drawLine(b.x, b.y, e.x, e.y);
}
b = e;
}
}else if (cD > 0){
g.setColor(Color.BLUE);
g.setStroke(new BasicStroke(3));
g.drawOval(cX, cY, cD, cD);
}else{
g.drawString("Uknown",30,50);
}
}
private Type getType(int dx, int dy) {
Type result = Type.UNDEFINED;
if (dx > 0 && dy < 0) {
result = Type.RIGHT_DOWN;
} else if (dx < 0 && dy < 0) {
result = Type.LEFT_DOWN;
} else if (dx < 0 && dy > 0) {
result = Type.LEFT_UP;
} else if (dx > 0 && dy > 0) {
result = Type.RIGHT_UP;
}
return result;
}
private boolean isCircle(List<Point> points) {
boolean result = false;
Type[] shape = circleShape;
Type[] detected = new Type[shape.length];
bounds = new Point[shape.length];
final int STEP = 5;
int index = 0;
Point current = points.get(0);
Type type = null;
for (int i = STEP; i < points.size(); i += STEP) {
Point next = points.get(i);
int dx = next.x - current.x;
int dy = -(next.y - current.y);
if(dx == 0 || dy == 0) {
continue;
}
Type newType = getType(dx, dy);
if(type == null || type != newType) {
if(newType != shape[index]) {
break;
}
bounds[index] = current;
detected[index++] = newType;
}
type = newType;
current = next;
if (index >= shape.length) {
result = true;
break;
}
}
return result;
}
@Override
public void mousePressed(MouseEvent e) {
cD = 0;
points.clear();
editing = true;
}
private int cX;
private int cY;
private int cD;
@Override
public void mouseReleased(MouseEvent e) {
editing = false;
if(points.size() > 0) {
if(isCircle(points)) {
cX = bounds[0].x + Math.abs((bounds[2].x - bounds[0].x)/2);
cY = bounds[0].y;
cD = bounds[2].y - bounds[0].y;
cX = cX - cD/2;
System.out.println("circle");
}else{
cD = -1;
System.out.println("unknown");
}
repaint();
}
}
@Override
public void mouseDragged(MouseEvent e) {
Point newPoint = e.getPoint();
if (editing && !last.equals(newPoint)) {
points.add(newPoint);
last = newPoint;
repaint();
}
}
@Override
public void mouseMoved(MouseEvent e) {
}
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
}
@Override
public void mouseClicked(MouseEvent e) {
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
CircleGestureDemo t = new CircleGestureDemo();
t.setVisible(true);
}
});
}
}
在iOS上实现类似行为应该不是问题，因为您只需要几个事件和坐标。类似于以下内容（请参阅example）：
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch* touch = [[event allTouches] anyObject];
}
- (void)handleTouch:(UIEvent *)event {
UITouch* touch = [[event allTouches] anyObject];
CGPoint location = [touch locationInView:self];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
[self handleTouch: event];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
[self handleTouch: event];
}
有几种可能的增强功能。
从任何时候开始
目前的要求是从顶部中点开始绘制圆形，原因如下：
if(type == null || type != newType) {
if(newType != shape[index]) {
break;
}
bounds[index] = current;
detected[index++] = newType;
}
请注意使用index的默认值。通过形状的可用“部分”进行简单搜索将消除该限制。请注意，您需要使用循环缓冲区来检测完整的形状：
顺时针和逆时针
为了支持这两种模式，您需要使用上一次增强中的循环缓冲区并在两个方向上搜索：
绘制椭圆
您拥有bounds数组中已有的所有内容。
只需使用该数据：
cWidth = bounds[2].y - bounds[0].y;
cHeight = bounds[3].y - bounds[1].y;
其他手势（可选）
最后，您只需要在dx（或dy）等于零时正确处理情况，以便支持其他手势：
<强>更新
这个小型PoC得到了很高的关注，所以我确实更新了一些代码，以使其顺利运行并提供一些绘图提示，突出支持点等：
以下是代码：
import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.HeadlessException;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class CircleGestureDemo extends JFrame {
enum Type {
RIGHT_DOWN,
LEFT_DOWN,
LEFT_UP,
RIGHT_UP,
UNDEFINED
}
private static final Type[] circleShape = {
Type.RIGHT_DOWN,
Type.LEFT_DOWN,
Type.LEFT_UP,
Type.RIGHT_UP};
public CircleGestureDemo() throws HeadlessException {
super("Circle gesture");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout());
add(BorderLayout.CENTER, new GesturePanel());
setPreferredSize(new Dimension(800, 600));
pack();
}
public static class GesturePanel extends JPanel implements MouseListener, MouseMotionListener {
private boolean editing = false;
private Point[] bounds;
private Point last = new Point(0, 0);
private final List<Point> points = new ArrayList<>();
public GesturePanel() {
super(true);
addMouseListener(this);
addMouseMotionListener(this);
}
@Override
public void paint(Graphics graphics) {
super.paint(graphics);
Dimension d = getSize();
Graphics2D g = (Graphics2D) graphics;
RenderingHints qualityHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
qualityHints.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g.setRenderingHints(qualityHints);
if (!points.isEmpty() && cD == 0) {
isCircle(points, g);
g.setColor(HINT_COLOR);
if (bounds[2] != null) {
int r = (bounds[2].y - bounds[0].y) / 2;
g.setStroke(new BasicStroke(r / 3 + 1));
g.drawOval(bounds[0].x - r, bounds[0].y, 2 * r, 2 * r);
} else if (bounds[1] != null) {
int r = bounds[1].x - bounds[0].x;
g.setStroke(new BasicStroke(r / 3 + 1));
g.drawOval(bounds[0].x - r, bounds[0].y, 2 * r, 2 * r);
}
}
g.setStroke(new BasicStroke(2));
g.setColor(Color.RED);
if (cD == 0) {
Point b = null;
for (Point e : points) {
if (null != b) {
g.drawLine(b.x, b.y, e.x, e.y);
}
b = e;
}
} else if (cD > 0) {
g.setColor(Color.BLUE);
g.setStroke(new BasicStroke(3));
g.drawOval(cX, cY, cD, cD);
} else {
g.drawString("Uknown", 30, 50);
}
}
private Type getType(int dx, int dy) {
Type result = Type.UNDEFINED;
if (dx > 0 && dy < 0) {
result = Type.RIGHT_DOWN;
} else if (dx < 0 && dy < 0) {
result = Type.LEFT_DOWN;
} else if (dx < 0 && dy > 0) {
result = Type.LEFT_UP;
} else if (dx > 0 && dy > 0) {
result = Type.RIGHT_UP;
}
return result;
}
private boolean isCircle(List<Point> points, Graphics2D g) {
boolean result = false;
Type[] shape = circleShape;
bounds = new Point[shape.length];
final int STEP = 5;
int index = 0;
int initial = 0;
Point current = points.get(0);
Type type = null;
for (int i = STEP; i < points.size(); i += STEP) {
final Point next = points.get(i);
final int dx = next.x - current.x;
final int dy = -(next.y - current.y);
if (dx == 0 || dy == 0) {
continue;
}
final int marker = 8;
if (null != g) {
g.setColor(Color.BLACK);
g.setStroke(new BasicStroke(2));
g.drawOval(current.x - marker/2,
current.y - marker/2,
marker, marker);
}
Type newType = getType(dx, dy);
if (type == null || type != newType) {
if (newType != shape[index]) {
break;
}
bounds[index++] = current;
}
type = newType;
current = next;
initial = i;
if (index >= shape.length) {
result = true;
break;
}
}
return result;
}
@Override
public void mousePressed(MouseEvent e) {
cD = 0;
points.clear();
editing = true;
}
private int cX;
private int cY;
private int cD;
@Override
public void mouseReleased(MouseEvent e) {
editing = false;
if (points.size() > 0) {
if (isCircle(points, null)) {
int r = Math.abs((bounds[2].y - bounds[0].y) / 2);
cX = bounds[0].x - r;
cY = bounds[0].y;
cD = 2 * r;
} else {
cD = -1;
}
repaint();
}
}
@Override
public void mouseDragged(MouseEvent e) {
Point newPoint = e.getPoint();
if (editing && !last.equals(newPoint)) {
points.add(newPoint);
last = newPoint;
repaint();
}
}
@Override
public void mouseMoved(MouseEvent e) {
}
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
}
@Override
public void mouseClicked(MouseEvent e) {
}
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
CircleGestureDemo t = new CircleGestureDemo();
t.setVisible(true);
}
});
}
final static Color HINT_COLOR = new Color(0x55888888, true);
}
答案 1 :(得分：14)
用于检测形状的经典计算机视觉技术是霍夫变换。 Hough变换的一个好处是它非常容忍部分数据，不完美的数据和噪声。使用霍夫圆圈： http://en.wikipedia.org/wiki/Hough_transform#Circle_detection_process
鉴于您的圆圈是手绘的，我认为Hough变换可能是您的最佳选择。
这是一个“简化”的解释，我为它并不是那么简单而道歉。大部分来自我多年前做过的学校项目。
霍夫变换是一种投票方案。分配二维整数数组，并将所有元素设置为零。每个元素对应于被分析图像中的单个像素。此数组称为累加器数组，因为每个元素将累积信息，投票，表示像素可能位于圆或圆弧原点的可能性。
将梯度算子边缘检测器应用于图像，并记录边缘像素或边缘像素。 edge1是相对于其邻居具有不同强度或颜色的像素。差异程度称为梯度大小。对于足够幅度的每个边缘1，应用投票方案，其将递增累加器阵列的元素。递增（投票）的元素对应于通过所考虑的edgel的圆的可能来源。期望的结果是，如果存在弧，那么真正的起源将获得比虚假起源更多的选票。
请注意，为了投票而访问的累加器数组的元素在所考虑的edgel周围形成一个圆圈。计算要投票的x，y坐标与计算正在绘制的圆的x，y坐标相同。
在手绘图像中，您可以直接使用设置（彩色）像素，而不是计算边缘。
现在，如果像素位置不完美，则无需获得具有最多投票数的单个累加器数组元素。你可以得到一组具有一堆投票的相邻数组元素，一个集群。该星团的重心可能为原点提供了一个很好的近似值。
请注意，您可能必须为半径为R的不同值运行Hough变换。产生更密集的投票群的那个是“更好”的拟合。
有多种技巧可用于减少虚假来源的投票。例如，使用edgels的一个优点是它们不仅具有幅度，而且它们也具有方向。在投票时，我们只需要在适当的方向上投票选出可能的起源。获得投票的地点将形成一个弧而不是一个完整的圆圈。
这是一个例子。我们从半径为1的圆和一个初始化的累加器数组开始。由于每个像素被认为是潜在的来源被投票。真正的起源获得的票数最多，在这种情况下为4票。
. empty pixel
X drawn pixel
* drawn pixel currently being considered
. . . . . 0 0 0 0 0
. . X . . 0 0 0 0 0
. X . X . 0 0 0 0 0
. . X . . 0 0 0 0 0
. . . . . 0 0 0 0 0
. . . . . 0 0 0 0 0
. . X . . 0 1 0 0 0
. * . X . 1 0 1 0 0
. . X . . 0 1 0 0 0
. . . . . 0 0 0 0 0
. . . . . 0 0 0 0 0
. . X . . 0 1 0 0 0
. X . X . 1 0 2 0 0
. . * . . 0 2 0 1 0
. . . . . 0 0 1 0 0
. . . . . 0 0 0 0 0
. . X . . 0 1 0 1 0
. X . * . 1 0 3 0 1
. . X . . 0 2 0 2 0
. . . . . 0 0 1 0 0
. . . . . 0 0 1 0 0
. . * . . 0 2 0 2 0
. X . X . 1 0 4 0 1
. . X . . 0 2 0 2 0
. . . . . 0 0 1 0 0
答案 2 :(得分：5)
这是另一种方式。使用UIView touchesBegan，touchesMoved，touchesEnded并向数组添加点。将数组分成两半，并测试一个数组中的每个点与另一个数组中的对应点的大小是否与所有其他对的大小相同。
NSMutableArray * pointStack;
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// Detect touch anywhere
UITouch *touch = [touches anyObject];
pointStack = [[NSMutableArray alloc]init];
CGPoint touchDownPoint = [touch locationInView:touch.view];
[pointStack addObject:touchDownPoint];
}
/**
*
*/
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch* touch = [touches anyObject];
CGPoint touchDownPoint = [touch locationInView:touch.view];
[pointStack addObject:touchDownPoint];
}
/**
* So now you have an array of lots of points
* All you have to do is find what should be the diameter
* Then compare opposite points to see if the reach a similar diameter
*/
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
uint pointCount = [pointStack count];
//assume the circle was drawn a constant rate and the half way point will serve to calculate or diameter
CGPoint startPoint = [pointStack objectAtIndex:0];
CGPoint halfWayPoint = [pointStack objectAtIndex:floor(pointCount/2)];
float dx = startPoint.x - halfWayPoint.x;
float dy = startPoint.y - halfWayPoint.y;
float diameter = sqrt((dx*dx) + (dy*dy));
bool isCircle = YES;// try to prove false!
uint indexStep=10; // jump every 10 points, reduce to be more granular
// okay now compare matches
// e.g. compare indexes against their opposites and see if they have the same diameter
//
for (uint i=indexStep;i<floor(pointCount/2);i+=indexStep)
{
CGPoint testPointA = [pointStack objectAtIndex:i];
CGPoint testPointB = [pointStack objectAtIndex:floor(pointCount/2)+i];
dx = testPointA.x - testPointB.x;
dy = testPointA.y - testPointB.y;
float testDiameter = sqrt((dx*dx) + (dy*dy));
if(testDiameter>=(diameter-10) && testDiameter<=(diameter+10)) // +/- 10 ( or whatever degree of variance you want )
{
//all good
}
else
{
isCircle=NO;
}
}//end for loop
NSLog(@"iCircle=%i",isCircle);
}
听起来不错吗？ ：）
答案 3 :(得分：3)
我不是形状识别专家，但这是我可以解决问题的方法。
首先，在将用户的路径显示为徒手时，秘密地累积点（x，y）样本列表以及时间。您可以从拖动事件中获取两个事实，将它们包装到一个简单的模型对象中，然后将它们堆积在一个可变数组中。
你可能想要相当频繁地采样 - 比方说，每0.1秒。另一种可能性是开始真正频繁，可能每0.05秒，并观察用户拖动多长时间;如果它们拖动的时间超过一定的时间，则将采样频率降低（并将任何可能遗漏的样本丢弃）至0.2秒。
（并且不要把我的数字用于福音，因为我只是将它们从我的帽子中拉出来。试验并找到更好的价值。）
其次，分析样本。
你想要得出两个事实。首先，形状的中心，（IIRC）应该是所有点的平均值。第二，来自该中心的每个样本的平均半径。
如果@ user1118321猜测，您想支持多边形，那么分析的其余部分包括做出决定：用户是想绘制圆形还是多边形。您可以将样本视为多边形，以便开始进行确定。
您可以使用以下几个标准：
- 时间：如果用户在某些点上比其他点徘徊更长时间（如果样本处于恒定间隔，则会在空间中显示为彼此靠近的连续样本群），这些可能是角点。你应该让你的角落门槛很小，以便用户可以无意识地做到这一点，而不是故意在每个角落停下来。
- 角度：圆圈从一个样本到下一个样本的角度大致相同。多边形将具有由直线段连接的多个角度;角度是角落。对于正多边形（圆形到不规则多边形的椭圆），角点应该大致相同;不规则多边形将具有不同的角度。
- 间隔：正方形多边形的角在角度维度内将等间隔，半径将保持不变。不规则多边形将具有不规则的角度间隔和/或非恒定的半径。
第三步也是最后一步是创建以先前确定的中心点为中心的形状，并具有先前确定的半径。
不保证我上面所说的任何内容都能起作用或效率很高，但我希望它至少让你走上正轨 - 并且如果有人比我更了解形状识别（这是一个非常低的话）吧）看到这个，随时发表评论或你自己的答案。
答案 4 :(得分：2)
我已经运用了经过适当训练的$ 1识别器（http://depts.washington.edu/aimgroup/proj/dollar/）。我用它来做圆圈，线条，三角形和正方形。
很久以前，在UIGestureRecognizer之前，但我认为创建正确的UIGestureRecognizer子类应该很容易。
答案 5 :(得分：2)
一旦确定用户完成了他们开始绘制的形状，您可以对他们绘制的坐标进行采样并尝试将它们拟合成圆形。
这里有一个MATLAB解决方案： http://www.mathworks.com.au/matlabcentral/fileexchange/15060-fitcircle-m
这是基于Walter Gander，Gene H. Golub和Rolf Strebel撰写的圈子和椭圆的最小二乘拟合： http://www.emis.de/journals/BBMS/Bulletin/sup962/gander.pdf
新西兰坎特伯雷大学的Ian Coope博士发表了一篇摘要论文：
确定最适合一组点的圆的问题 在平面上（或明显归纳为n维）很容易 公式化为非线性全局最小二乘问题 使用Gauss-Newton最小化算法求解。这个 直接的方法被证明是低效和极端的 对异常值的存在敏感。另一种配方 允许将问题简化为线性最小二乘问题 这很简单。显示推荐的方法 与异常值相比，对异常值更不敏感的附加优势 非线性最小二乘法。
http://link.springer.com/article/10.1007%2FBF00939613
MATLAB文件可以计算非线性TLS和线性LLS问题。
答案 6 :(得分：0)
使用以下是一种相当简单的方法：
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
假设这个矩阵网格：
A B C D E F G H
1 X X
2 X X
3 X X
4 X X
5 X X
6 X X
7
8
在“X”位置放置一些UIViews并测试它们是否被击中（按顺序）。如果他们都按顺序被击中，我认为让用户说“做得好你画圆圈”可能是公平的。
听起来不错？ （而且很简单）
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？