【问题标题】:How to get touched shape (arc) from Android canvas?如何从 Android 画布中获取触摸形状(弧线)?
【发布时间】:2017-06-13 03:49:05
【问题描述】:

我正在构建一个自定义视图。

它有 4 条弧线。

我在onDraw() 期间使用RectF 形状绘制弧线:

// arcPaint is a Paint object initialized
// in the View's constructor
arcPaint.setStrokeWidth(strokeWidth);
arcPaint.setColor(arcColor);

// Draw arcs, arc1, arc2, arc3 & arc4 are
// measured and initialized during onMeasure()
canvas.drawArc(arc1, startAngle, arc1Angle, false, arcPaint);
canvas.drawArc(arc2, startAngle, arc2Angle, false, arcPaint);
canvas.drawArc(arc3, startAngle, arc3Angle, false, arcPaint);
canvas.drawArc(arc4, startAngle, arc4Angle, false, arcPaint);

所以,结果是:

如果我使用此代码使用canvas.drawRect() 绘制RectF 对象:

canvas.drawRect(arc1, arcPaint);
canvas.drawRect(arc2, arcPaint);
canvas.drawRect(arc3, arcPaint);
canvas.drawRect(arc4, arcPaint);

结果是这样的:

将所有弧线和矩形画在一起,给出了这个:

我知道我可以重写 onTouchEvent() 方法并获取 X、Y 坐标,但我不知道每个坐标如何与画布中绘制的每个形状相关。

我想要做的是检测何时在canvas 内触摸弧线而不是矩形,我该如何实现?

编辑:

不是矩形,我的意思是,我不想检测用户何时触摸这些区域(矩形的角):

【问题讨论】:

  • 有趣的问题
  • 这里不是很清楚你在追求什么。您想在弧上注册触摸,而不是矩形?弧与边界矩形或其他弧的矩形的重叠部分如何?
  • 查看编辑@MikeM。
  • 视觉辅助工具非常有用。 :-) 所以,如果我没有正确地关注你,你只是想强调Rect#contains(x, y) 对你不起作用,是吗?
  • 是的,你是对的。 Rect#contains(x, y) 没有帮助。

标签: android android-canvas android-custom-view


【解决方案1】:

这基本上归结为比较与该图形中心点的距离。由于边界矩形始终是正方形的,因此其中一个距离基本上是固定的,这使得这更容易。

这里的一般方法是计算从中心点到触摸点的距离,并检查该距离与圆弧半径的差值是否在笔划宽度的一半以内。

private static boolean isOnRing(MotionEvent event, RectF bounds, float strokeWidth) {
    // Figure the distance from center point to touch point.
    final float distance = distance(event.getX(), event.getY(),
                                    bounds.centerX(), bounds.centerY());

    // Assuming square bounds to figure the radius.
    final float radius = bounds.width() / 2f;

    // The Paint stroke is centered on the circumference,
    // so the tolerance is half its width.
    final float halfStrokeWidth = strokeWidth / 2f;

    // Compare the difference to the tolerance.
    return Math.abs(distance - radius) <= halfStrokeWidth;
}

private static float distance(float x1, float y1, float x2, float y2) {
    return (float) Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

onTouchEvent() 方法中,isOnRing() 简单地用MotionEvent、弧的边界RectFPaint 的笔划宽度调用。例如:

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (isOnRing(event, arc1, arcPaint.getStrokeWidth())) {
                // Hit.
            }
            break;
            ...
    }
    ...
}

这本身只会确定触摸点是否位于由半径和笔划宽度描述的完整环上的任何位置。也就是说,它没有考虑弧中的“间隙”。如果需要,有多种方法可以处理。

如果您打算让起始角和扫描角与 x/y 轴齐平,最简单的方法可能是检查触摸点和中心点坐标差异上的符号。从广义上讲,如果 touch x 减去 center x 是正数,那么你就在右边;如果是否定的,你在左边。类似地计算顶部或底部将允许您确定触摸发生在哪个象限,以及是否忽略该事件。

final float dx = event.getX() - arc1.centerX();
final float dy = event.getY() - arc1.centerY();

if (dx > 0) {
    // Right side
}
else {
    // Left side
}
...

但是,如果任何一个角度都不与轴共终端,那么数学就有点复杂了。例如:

private static boolean isInSweep(MotionEvent event, RectF bounds,
                                 float startAngle, float sweepAngle) {
    // Figure atan2 angle.
    final float at =
        (float) Math.toDegrees(Math.atan2(event.getY() - bounds.centerY(),
                                          event.getX() - bounds.centerX()));

    // Convert from atan2 to standard angle.
    final float angle = (at + 360) % 360;

    // Check if in sweep.
    return angle >= startAngle && angle <= startAngle + sweepAngle;
}

onTouchEvent() 中的 if 然后将更改为合并这两项检查。

if (isOnRing(event, arc1, arcPaint.getStrokeWidth()) &&
    isInSweep(event, arc1, startAngle, arc1Angle)) {
    // Hit.
}

这些方法可以很容易地组合成一个,但为了清楚起见,它们在这里分开了。

【讨论】:

    猜你喜欢
    • 2014-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多