圆形菜单-创建菜单和仅在单击区域时调用操作不只是图标 [英] circular menu - create menu & call action only if area is clicked & not just icon

问题描述

我想为iPhone应用程序创建如下所示的圆形菜单.

I want to create circular menu like below for iPhone app.

我搜索了许多库或解决方案，但是找不到相同的库或解决方案.他们所拥有的全部是当他们单击图标时，将调用菜单操作，但是如果我单击按钮上的任意位置，我想调用操作，如下所示.

I searched many libraries or solutions, however was unable to find the same. What all have is when they click on icon, menu action is called, however I want to call action if I click anywhere on the button as shown below.

仅当我单击用户用户的任意位置时，才会调用用户操作，如上图所示.

User action will only get called if I click anywhere in the user of user as shown in above image.

有什么想法要实现吗?

我有一个想法，就是检查x&点击并查找点击位置的y位置(但这非常耗时)

I have one idea as checking the x & y position of the tap and findout where its clicked (but this is very time costly)

OR

有没有办法创建这些形状的按钮?

Is there any way to create buttons of these shapes?

推荐答案

我有一个想法，就是检查x&点击和查找的y位置 点击的位置(但这很耗时)

I have one idea as checking the x & y position of the tap and findout where its clicked (but this is very time costly)

这实际上是一个很好的主意，并且计算成本并不高.

That's actually a very good idea, and the calculations are not very costly at all.

// Function to compute button touched
//
// Returns:
// 0 - 7:  One of the 8 outer buttons touched
// 8:      Center button touched
// 9:      Touch outside of outer circle (no button touched)

func detectTouchedButton(_ touchPoint: CGPoint) -> Int {

    // Set these values for your situation:
    let innerRadius: CGFloat = 50
    let outerRadius: CGFloat = 150
    let center = CGPoint(x: 150, y: 200)

    // Compute horizontal and vertical distance of touch from center
    let dx = touchPoint.x - center.x
    let dy = center.y - touchPoint.y

    // was the center button touched?
    let distanceSquared = dx * dx + dy * dy
    if distanceSquared < innerRadius * innerRadius {
        return 8
    }

    // was touch outside of outer circle?
    if distanceSquared > outerRadius * outerRadius {
        return 9
    }

    // Use atan2 to get an angle between -.pi and
    // .pi.  Divide by .pi to get number in the range
    // of (-1...1).  Add 1 to get a range of (0...2).
    // Multiply by 4 to get a range of (0...8).  Mod
    // by 8 since 0 == 8 (same button)  
    return Int(4 * (atan2(dy, dx) / .pi + 1)) % 8
}

注释:

• 我翻转了dy的计算，因为坐标系上下颠倒了.这只是将坐标系恢复为具有数学意义的+y，并更改了0到7的最终顺序.

• I flipped the dy calculation because the coordinate system is upside down. This just returns the coordinate system to the +y is up mathematical sense and changes the final ordering of 0 through 7.

如果需要，可以对其进行修改，以返回Int?，然后针对未在按钮上的触摸返回nil.

If you wanted, you could modify this to return an Int? and then return nil for touches that aren't on a button.

这篇关于圆形菜单-创建菜单和仅在单击区域时调用操作不只是图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！