2013-02-26 18 views
14

私はUIView内に透明な四角形を描画しようとしています。UIViewで矩形を描く

しかし、私のコードでは完全に黒い矩形が作成されます。ここに私のコードは、これまでのところです:

- (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); 

} 
+1

'CGContextFillRect'から' CGContextStrokeRect'に変更 –

+0

同じ問題があります。黒い矩形があり(完全に黒い)、 –

+0

はCGContextSetRGBFillColor(context、0.0、0.0、0.0、0.5)でアルファ0.0で試行します。 – Exploring

答えて

19
- (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 

} 

効果はそれは、カスタマイズ(自己フレームの値を調整することにより、長方形/平方を提供します。この(backgroundColorのが青である)

enter image description here

+0

うーん、何もしない。 RGBのランダムな値を入力しようとしても、毎回黒い四角形が表示されます。 –

+0

@AshishAgarwal透明な矩形が必要な理由は、RGBのランダムな値を入力するのはなぜですか?私の絵を見てください –

+1

まあ、私は黒以外のものを見ようとしています。しかし、これまで運がなかった –

3

のようなものですビューまたはサブクラスを継承しています)。

[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]; 
+0

この矩形が50%透明になるように、この矩形のAlphaプロパティも設定できますか?ありがとうございました。 – Thanh

0
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); 
+3

これは三角形のためのものであり、矩形のものではない – ashokdy

+1

尋ねられた矩形ですが、uは三角形を示します – vishnu

1

あなたのコードはCGContextSetRGBFillColorコールを必要とせず、CGContextStrokeRectコールが欠落しています。あなたが本当にCGContextSetRGBFillColorを呼び出したい場合は、あなたもコールCGContextFillRectを持つように、別の方法として

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) 
    } 

} 

:スウィフト3で、あなたの最終draw(_:)実装は次のようになります。 ......

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) 
    } 

} 
1

つの便利な先端非常に頻繁に

、あなたは正方形の

を描画する必要がある場合、それはに簡単ですが:あなたの最終draw(_:)実装は、スウィフト3とこのようになります。 だけ..... 200から下方に走るの正方形を描画します

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() 

を「太いストライプ」を描きます300.

500を中心とし、100ワイドです。