使用路徑判斷不規則形狀的點擊區域方法

 

利用不規則形狀的區域判斷可以製作出具有變化的按鈕選項，以達成一些特殊的互動效果，我們以上圖為例，如果要判斷是否在點擊圖形區域內部，可以有兩種判斷方式，一種是取得點擊區域的像素顏色來判斷，雖然這種方式很直覺，但是卻很麻煩且限制也頗多，所以下面我們將示範另一種方法．使用圖形區域的路徑來判斷，其程式瑪如下。

路徑的繪製與判斷，主要是利用 CoreGraphics 的 Framework，如果對此不熟悉的朋友可以由索引是搜索尋找有關 CoreGraphics 的文章。關於點擊畫面的部份可以參考取得點擊特定 View 時的相對座標一文。

首先我們在畫面上繪製一個黑色六角形區域的互動範圍。

imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0.0, 0.0, 300.0, 200.0)];
imageView.center = self.view.center;

UIGraphicsBeginImageContext(imageView.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextBeginPath(context);
CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);

//六角形區域的路徑
CGContextMoveToPoint(context, 100.0, 0.0);
CGContextAddLineToPoint(context, 200.0, 0.0);
CGContextAddLineToPoint(context, 250.0, 100.0);
CGContextAddLineToPoint(context, 200.0, 200.0);
CGContextAddLineToPoint(context, 100.0, 200.0);
CGContextAddLineToPoint(context, 50.0, 100.0);

CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFill);

imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

[self.view addSubview:imageView];

接下來就是透過點擊畫面時會觸發的函式來取得點擊的座標位置，並加以判斷。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    //取得相對應的點擊位置
    CGPoint point;
    UITouch *touchs = [[event allTouches]anyObject];
    point = [touchs locationInView:imageView];

    //設定一虛擬路徑
    CGMutablePathRef myPath = CGPathCreateMutable();
    CGPathMoveToPoint(myPath, NULL, 100.0, 0.0);
    CGPathAddLineToPoint(myPath, NULL, 200.0, 0.0);
    CGPathAddLineToPoint(myPath, NULL, 250.0, 100.0);
    CGPathAddLineToPoint(myPath, NULL, 200.0, 200.0);
    CGPathAddLineToPoint(myPath, NULL, 100.0, 200.0);
    CGPathAddLineToPoint(myPath, NULL, 50.0, 100.0);

    CGPathCloseSubpath(myPath);

    [resultLabel setText:@"點擊區域在圖形之外"];

    //判斷是否在虛擬路徑所繪製的區域內
    if (CGPathContainsPoint(myPath, NULL, point, YES)) {
        [resultLabel setText:@"點擊區域在圖形之內"];
    }

    CGPathRelease(myPath);
}

上述程式碼用來判斷是否在點擊區域內的虛擬路徑，其路徑設定必須與我們原先繪製的六角形路徑一模一樣，最後結果才能與我們所繪製的圖形完全吻合。

最後，同樣也可以利用此方法為一張影像製作出數個不同點擊區域，類似於在製作網頁時所使用的影像地圖 Image Map 技巧。