Vẽ hình chữ nhật ở UIView

Question

Tôi đang cố vẽ hình chữ nhật trong suốt trong UIView có viền đen.

Mã của tôi tuy nhiên tạo ra một hình chữ nhật hoàn toàn màu đen. Dưới đây là mã của tôi cho đến nay:

- (void)drawRect:(CGRect)rect 
{ 
    // Drawing code 
    CGRect rectangle = CGRectMake(0, 100, 320, 100); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 0.5); 
    CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 0.5); 
    CGContextFillRect(context, rectangle); 

} 

Answer 1

- (void)drawRect:(CGRect)rect 
{ 
    // Drawing code 
    CGRect rectangle = CGRectMake(0, 100, 320, 100); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.0); //this is the transparent color 
    CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 0.5); 
    CGContextFillRect(context, rectangle); 
    CGContextStrokeRect(context, rectangle); //this will draw the border 

} 

hiệu quả là như thế này (backgroundColor là màu xanh)

Answer 2

Nó sẽ cung cấp các hình chữ nhật/vuông bằng cách điều chỉnh giá trị của khung tự (tùy chỉnh xem hoặc phân lớp của bất kỳ lớp nào được kế thừa từ UIView) với độ trong suốt.

[self.layer setBorderWidth:1.0]; 
[self.layer setBorderColor:[[UIColor colorWithRed:0.10 green:0.45 blue:0.73 alpha:1.0] CGColor]]; 
[self.layer setCornerRadius:2.0]; 
[self.layer setShadowOffset:CGSizeMake(-2, -2)]; 
[self.layer setShadowColor:[[UIColor lightGrayColor] CGColor]]; 
[self.layer setShadowOpacity:0.5]; 

Answer 3

CGRect bounds = connectorRect; 
CGFloat minx = CGRectGetMinX(bounds), midx = CGRectGetMidX(bounds), maxx = CGRectGetMaxX(bounds); 
CGFloat miny = CGRectGetMinY(bounds), maxy = CGRectGetMaxY(bounds); 
CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor); 
CGContextSetLineWidth(context, 1.0); 
CGContextBeginPath(context); 
CGContextSetStrokeColorWithColor(context,[UIColor clearColor].CGColor); 
CGContextMoveToPoint(context, minx, maxy); 
CGContextAddLineToPoint(context, midx, miny); 
CGContextAddLineToPoint(context, maxx, maxy); 
CGContextClosePath(context); 
CGContextDrawPath(context, kCGPathFillStroke); 

Answer 4

Mã của bạn không yêu cầu CGContextSetRGBFillColor cuộc gọi và thiếu CGContextStrokeRect gọi. Với Swift 3, thức draw(_:) thực hiện của bạn sẽ trông như thế này:

class CustomView: UIView { 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     backgroundColor = .white 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

    override func draw(_ rect: CGRect) { 
     guard let ctx = UIGraphicsGetCurrentContext() else { return }  
     ctx.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 0.5) 
     let rectangle = CGRect(x: 0, y: 100, width: 320, height: 100) 
     ctx.stroke(rectangle) 
    } 

} 

---

Là một thay thế, nếu bạn thực sự muốn gọi CGContextSetRGBFillColor, bạn cũng có cuộc gọi CGContextFillRect. thức draw(_:) thực hiện của bạn sau đó sẽ trông như thế này với Swift 3:

class CustomView: UIView { 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     backgroundColor = .white 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

    override func draw(_ rect: CGRect) { 
     guard let ctx = UIGraphicsGetCurrentContext() else { return } 

     ctx.setFillColor(red: 1, green: 1, blue: 1, alpha: 0) 
     ctx.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 0.5) 

     let rectangle = CGRect(x: 0, y: 100, width: 320, height: 100) 
     ctx.fill(rectangle) 
     ctx.stroke(rectangle) 
    } 

} 

Answer 5

Một mẹo nhỏ ......

Rất thường, khi bạn cần phải vẽ một hình vuông

nó dễ dàng hơn để chỉ cần vẽ một 'sọc dày' .....

let context = UIGraphicsGetCurrentContext() 
    context!.setLineWidth(100) 
    context!.setStrokeColor(blah.cgColor) 
    context?.move(to: CGPoint(x: 500, y: 200)) 
    context?.addLine(to: CGPoint(x: 500, y: 300)) 
    context!.strokePath() 

Điều đó sẽ vẽ một hình vuông, chạy xuống từ 200 đến 300.

Nó được đặt ở giữa trên 500, và rộng 100.