将视图分割成4个三角区域并检测触摸 (iOS和Cocos2d)

Question

有没有简单的方法可以实现以下功能？

我想通过两条对角线将一个视图分成4个部分:

所以上三角区域将对应于“上”。 其余三个区域将分别对应于“左”，“下”，“右”。

最容易或最有效的方法是什么？ 我曾考虑创建4个三角形并检测其中的触摸，但也许这是不必要的吗？

背景：用于在地图中移动精灵。

谢谢！

- Michael

---

很遗憾，您无法创建三角形视图。您可以使用CAShapeLayer，或使用核心图形函数绘制三角形，然后计算触摸落在哪个三角形中。 - Ramy Al Zuhouri

首先的想法是计算从中心点到触摸点的角度，用于确定用户想要前往的方向。例如，45-135度表示向上。 - Mark

谢谢Mark，最终我采用了你的方法！非常简单，只需要几行代码。 - Michael

Answer 1

在我的评论之后，我想为自己设计一个简单的实现，因此，这里有一个简单的全屏摇杆，它将根据触摸位置相对于屏幕中心确定类似于基数的方向。

（FullScreenJoystick）

我仍在使用cocos2d-iphone 1.1，所以...我不确定v2是否需要任何修改。

FSJoy.h

#import "cocos2d.h"

// Up, Down, Left, Right - directions
typedef enum
{
    DIR_NONE = 0,
    DIR_UP,
    DIR_LEFT,
    DIR_DOWN,
    DIR_RIGHT
} ULDR;

// UpLeft, UpRight, DownLeft, DownRight - boundaries
typedef enum
{
    UL = 135,
    UR = 45,
    DL = 225,
    DR = 315
} ULDR_BOUNDS;


@interface FSJoy : CCLayer
{
    CGPoint origin;
    float angleCurrent;
    BOOL isActive;
}

@property CGPoint origin;
@property float angleCurrent;
@property BOOL isActive;
@end

FSJoy.m

#import "FSJoy.h"

@implementation FSJoy

@synthesize origin, angleCurrent, isActive;

-(id) init
{
    if( (self = [super init]) )
    {
        self.isTouchEnabled = YES;
        CGSize screenSize = [[CCDirector sharedDirector] winSize];
        angleCurrent = 0.0f;
        origin = ccp(screenSize.width / 2.0f, screenSize.height / 2.0f);
        isActive = NO;
    }
    return self;
}

-(void) registerWithTouchDispatcher
{
    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:(INT_MIN - 4) swallowsTouches:YES];
}

-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint touchCurrent = [touch locationInView:[touch view]];
    touchCurrent = [[CCDirector sharedDirector] convertToGL:touchCurrent];    
    angleCurrent = [self determineAngleFromPoint:origin toPoint:touchCurrent];
    [self determineDirectionFromAngle: angleCurrent];
    isActive = YES;
    return YES; // full screen controller, so always return YES
}

-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint touchCurrent = [touch locationInView:[touch view]];
    touchCurrent = [[CCDirector sharedDirector] convertToGL:touchCurrent];
    angleCurrent = [self determineAngleFromPoint:origin toPoint:touchCurrent];
    [self determineDirectionFromAngle: angleCurrent];
}

-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
{
    isActive = NO;
}

-(void) ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event
{
    [self ccTouchEnded:touch withEvent:event];
}

-(float) determineAngleFromPoint:(CGPoint)from toPoint:(CGPoint)to
{
    float angle = ccpToAngle(ccpSub(to, from));
    if (angle <= 0.0f)
    {
        angle += M_PI * 2.0f;
    }

    angle = CC_RADIANS_TO_DEGREES(angle);

//    NSLog(@"angle is %f", angle);
    return angle;
}

-(ULDR) determineDirectionFromAngle:(float) angle
{
    ULDR dir = DIR_NONE;
    dir = ((angle >= UR) && (angle <= UL)) ? DIR_UP     : dir;
    dir = ((angle >= DL) && (angle <= DR)) ? DIR_DOWN   : dir;
    dir = ((angle >  UL) && (angle <  DL)) ? DIR_LEFT   : dir;
    dir = ((angle >  DR) || (angle <  UR)) ? DIR_RIGHT  : dir;
    NSLog(@"direction is %d", dir);
    return dir;
}

@end

使用方法很简单，只需将摇杆添加到场景/图层中：

FSJoyTest.h

#import "cocos2d.h"
@interface FSJoyTest : CCLayer
@end

FSJoyTest.m

#import "FSJoyTest.h"
#import "FSJoy.h"

@implementation FSJoyTest

-(id) init
{
    if( (self=[super init]) )
    {
        [self addChild: [FSJoy node]];
    }
    return self;
}

@end

- Mark

---

当我打印方向时，它只给我1和4个方向。有什么想法吗？ - Logger

我的视图宽度为200，高度为200。 - Logger

Answer 2

一个想法：

创建一个与上面视图大小相同的图像（不要将其添加到任何视图中，只需将其存储在某个地方）。 图像文件将包含四个三角形，但每个三角形都用不同的颜色着色（没有渐变！：））

当您点击视图时，请获取触摸位置坐标（如果需要，请将其转换为图像坐标），并测试该位置处图像中的像素颜色。 颜色将告诉您按下了哪个三角形。

- giorashc