邊境需要

Question

我已經在滾動視圖

創建一個六邊形的圖像programitically一個programitically創建六角圖片，我想圍繞着六邊形的圖像，形狀爲一個六邊形的同一個黑色邊框。我以六角形圖像作爲背景，但我沒有得到結果。任何人都可以指導我如何獲得理想的結果？

以下是創建六邊形的代碼圖像 -

-(CAShapeLayer*)ChangeShape:(UIView*)view 
{ 
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(_TopList_ImageView.frame.origin.x, _TopList_ImageView.frame.origin.y, _TopList_ImageView.frame.size.width, _TopList_ImageView.frame.size.height)]; 
    // v.backgroundColor = [UIColor purpleColor]; 

    CGRect rect = v.frame; 
    CAShapeLayer *hexagonMask = [CAShapeLayer layer]; 
    CAShapeLayer *hexagonBorder = [CAShapeLayer layer]; 
    hexagonBorder.frame = v.layer.bounds; 
    UIBezierPath *hexagonPath = [UIBezierPath bezierPath]; 
    CGFloat sideWidth = 2 * (0.5 * rect.size.width/2); 
    CGFloat lcolumn = (rect.size.width - sideWidth)/2; 
    CGFloat rcolumn = rect.size.width - lcolumn; 
    CGFloat height = 0.866025 * rect.size.height; 
    CGFloat y = (rect.size.height - height)/2; 
    CGFloat by = rect.size.height - y; 
    CGFloat midy = rect.size.height/2; 
    CGFloat rightmost = rect.size.width; 
    [hexagonPath moveToPoint:CGPointMake(lcolumn, y)]; 
    [hexagonPath addLineToPoint:CGPointMake(rcolumn, y)]; 
    [hexagonPath addLineToPoint:CGPointMake(rightmost, midy)]; 
    [hexagonPath addLineToPoint:CGPointMake(rcolumn, by)]; 
    [hexagonPath addLineToPoint:CGPointMake(lcolumn, by)]; 
    [hexagonPath addLineToPoint:CGPointMake(0, midy)]; 
    [hexagonPath addLineToPoint:CGPointMake(lcolumn, y)]; 

    hexagonMask.path = hexagonPath.CGPath; 
    hexagonBorder.path = hexagonPath.CGPath; 
    hexagonBorder.fillColor = [UIColor clearColor].CGColor; 
    hexagonBorder.strokeColor = [UIColor blackColor].CGColor; 
    hexagonBorder.lineWidth = 5; 
    v.layer.mask = hexagonMask; 
    [v.layer addSublayer:hexagonBorder]; 

    // hexagonMask.path = path.CGPath; 
    UIGraphicsEndImageContext(); 
    return hexagonMask; 
} 

Answer 1

PLZ試試這個

我使用這個鏈接How to round corners of UIImage with Hexagon mask

IBOutlet UIImageView *yoruImageView; 

CGFloat lineWidth = 5.0; 
    UIBezierPath *path = [self roundedPolygonPathWithRect:image.bounds 
                lineWidth:lineWidth 
                 sides:6 
               cornerRadius:30]; 

    CAShapeLayer *mask = [CAShapeLayer layer]; 
    mask.path   = path.CGPath; 
    mask.lineWidth  = lineWidth; 
    mask.strokeColor  = [UIColor clearColor].CGColor; 
    mask.fillColor  = [UIColor whiteColor].CGColor; 
    yoruImageView.layer.mask = mask; 

    CAShapeLayer *border = [CAShapeLayer layer]; 
    border.path   = path.CGPath; 
    border.lineWidth  = lineWidth; 
    border.strokeColor = [UIColor blackColor].CGColor; 
    border.fillColor  = [UIColor clearColor].CGColor; 
    [yoruImageView.layer addSublayer:border]; 

-(UIBezierPath *)roundedPolygonPathWithRect:(CGRect)square lineWidth:(CGFloat)lineWidth sides:(NSInteger)sides cornerRadius:(CGFloat)cornerRadius { 
    UIBezierPath *path = [UIBezierPath bezierPath]; 

    CGFloat theta  = 2.0 * M_PI/sides;       // how much to turn at every corner 
    CGFloat offset  = cornerRadius * tanf(theta/2.0);    // offset from which to start rounding corners 
    CGFloat squareWidth = MIN(square.size.width, square.size.height); // width of the square 

    // calculate the length of the sides of the polygon 

    CGFloat length  = squareWidth - lineWidth; 
    if (sides % 4 != 0) {            // if not dealing with polygon which will be square with all sides ... 
     length = length * cosf(theta/2.0) + offset/2.0;    // ... offset it inside a circle inside the square 
    } 
    CGFloat sideLength = length * tanf(theta/2.0); 

    // start drawing at `point` in lower right corner 

    CGPoint point = CGPointMake(squareWidth/2.0 + sideLength/2.0 - offset, squareWidth - (squareWidth - length)/2.0); 
    CGFloat angle = M_PI; 
    [path moveToPoint:point]; 

    // draw the sides and rounded corners of the polygon 

    for (NSInteger side = 0; side < sides; side++) { 
     point = CGPointMake(point.x + (sideLength - offset * 2.0) * cosf(angle), point.y + (sideLength - offset * 2.0) * sinf(angle)); 
     [path addLineToPoint:point]; 

     CGPoint center = CGPointMake(point.x + cornerRadius * cosf(angle + M_PI_2), point.y + cornerRadius * sinf(angle + M_PI_2)); 
     [path addArcWithCenter:center radius:cornerRadius startAngle:angle - M_PI_2 endAngle:angle + theta - M_PI_2 clockwise:YES]; 

     point = path.currentPoint; // we don't have to calculate where the arc ended ... UIBezierPath did that for us 
     angle += theta; 
    } 

    [path closePath]; 

    return path; 
} 

結果

Answer 2

的概念是正確的，th在你想要兩個形狀圖層，一個要遮罩，另一個要爲邊框添加。

但是，您正在對本地UIView執行此操作，但放棄了您屏蔽並添加了該邊框的視圖，並且僅返回了遮罩層。你有兩個選擇：

• 敷面膜和邊框在滾動視圖圖像視圖，或者
• 通過將原始圖像，應用掩碼和邊界拍攝圖像或UIView，並創建一個UIImage，並將其作爲新的UIImage。

我認爲第一種方法可能是最簡單的。後一種方法是非常有用的，如果你這樣做了大量的圖像，並且不想在飛行中這樣做。

順便說一句，你有一個UIGraphicsEndImageContext，但似乎並沒有開始那個圖像上下文。確保這些都是平衡的，並且只有在做了後一種方法時才這樣做，即創建新的UIImage，而不是如果只應用掩碼和邊框。

我認爲最簡單的解決方案是應用蒙版並將邊框圖層添加到滾動視圖中的實際圖像視圖中，並丟失此UIGraphicsEndImageContext。

---

因此，也許你改變你的方法敷面膜和邊框你傳遞給這個UIView，如：

-(void) applyHexagonMaskAndBorderToView:(UIView*)view { 
    CGRect rect = view.bounds; 
    CAShapeLayer *hexagonMask = [CAShapeLayer layer]; 
    CAShapeLayer *hexagonBorder = [CAShapeLayer layer]; 
    hexagonBorder.frame = view.layer.bounds; 
    UIBezierPath *hexagonPath = [UIBezierPath bezierPath]; 
    CGFloat sideWidth = 2 * (0.5 * rect.size.width/2); 
    CGFloat lcolumn = (rect.size.width - sideWidth)/2; 
    CGFloat rcolumn = rect.size.width - lcolumn; 
    CGFloat height = 0.866025 * rect.size.height; 
    CGFloat y = (rect.size.height - height)/2; 
    CGFloat by = rect.size.height - y; 
    CGFloat midy = rect.size.height/2; 
    CGFloat rightmost = rect.size.width; 
    [hexagonPath moveToPoint:CGPointMake(lcolumn, y)]; 
    [hexagonPath addLineToPoint:CGPointMake(rcolumn, y)]; 
    [hexagonPath addLineToPoint:CGPointMake(rightmost, midy)]; 
    [hexagonPath addLineToPoint:CGPointMake(rcolumn, by)]; 
    [hexagonPath addLineToPoint:CGPointMake(lcolumn, by)]; 
    [hexagonPath addLineToPoint:CGPointMake(0, midy)]; 
    [hexagonPath addLineToPoint:CGPointMake(lcolumn, y)]; 

    hexagonMask.path = hexagonPath.CGPath; 
    hexagonBorder.path = hexagonPath.CGPath; 
    hexagonBorder.fillColor = [UIColor clearColor].CGColor; 
    hexagonBorder.strokeColor = [UIColor blackColor].CGColor; 
    hexagonBorder.lineWidth = 5; 
    view.layer.mask = hexagonMask; 
    [view.layer addSublayer:hexagonBorder]; 
} 

我沒有檢查是爲了確保所有的路徑創造東西是正確的，但基本思想是傳遞給這個UIView，做所有的計算基於它的border，然後只是將掩碼和邊框應用到該UIView（可能是UIImageView）。