iphone - iOSでバッテリーを描く方法

Question

Bluetooth経由で電話に接続されているデバイスの1つのバッテリーレベルを表示するために、バッテリーを描画したいと思います。

どうすればこれを達成できますか？私は2D描画の完全な初心者です....ポインタは役に立ちます

ありがとう、

Answer 1

Bluetooth経由で電話に接続されているデバイスの1つのバッテリーレベルを表示するためにバッテリーを描画したいと思います。

バッテリーのような非スケーリングの静止画像を描画するコードを書くことは、多くの問題のように思われます。もちろんそれは可能ですが、描画プログラムで画像を描画し、それをリソースとしてアプリに追加する方がはるかに簡単です。

コードでバッテリーを描画する場合は、紙または描画プログラムで形状をスケッチすることから始めます。次に、実行する必要のあるすべての描画操作のリストを書き留めます。バッテリーの場合、これはおそらく一連の線と曲線にすぎません。UIBezierPathはこれらの操作を提供し、Quartz2Dに飛び込むよりも、おそらくそれから始める方が簡単です。

Answer 2

私は描画プログラムを使用して両方を行い、プログラムしました。今日、プログラムはより簡単で、より楽しく、将来性のあるものだと思います
。ios の解像度を変更するために、2 つまたは何枚もの画像を提供する必要はありません。

描画の (それほど秘密ではない) ヒントは、描画を 0 と 1 の間で正規化することです。そうすれば、バッテリーのサイズに依存しなくなります。でそれを達成しCGAffineTransformMakeScale()ます。ただし、すぐに線幅を変更してスケール率を調整する必要があります。

係数 r でスケーリングする場合:
lineWidth は origLineWidth / r でなければなりません。// これを見つけるのに時間がかかりました!
たとえば、origLineWidth = 1.0;

次に、次のように描画できます。

1. バッテリー コーパス用の 1 つの四角形 (例: x から: 0 から 0.9)
2. バッテリー ポール用の 1 つの塗りつぶされた四角形。(例 x から: 0.9 から 1.0)
3. また、バッテリーの充電状態には、線形勾配 (またはより良い 2 つの勾配) を使用できます。y 0 (+ 線幅) - 0.25 の緑から白への 1 つのグラデーションと、白から濃い緑への別のグラデーション: y: 0.25 - (1.0 - linewWidth)

それはそれは本当にいい作品です。

Answer 3

これは私が PaintCode で描いた小さなものです。

CGFloat factor = 0.2; // Something between 0.0 - 1.0

//// Rectangle Drawing
UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(0.5, 0.5, 15, 5)];
[[UIColor blackColor] setStroke];
rectanglePath.lineWidth = 1;
[rectanglePath stroke];


//// Rectangle 2 Drawing -- THIS IS THE INNER "LEVEL" PART
UIBezierPath* rectangle2Path = [UIBezierPath bezierPathWithRect: CGRectMake(2, 2, 12*factor, 2)];
[[UIColor blackColor] setFill];
[rectangle2Path fill];
[[UIColor blackColor] setStroke];
rectangle2Path.lineWidth = 1;
[rectangle2Path stroke];


//// Bezier Drawing
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(15.52, 1.5)];
[bezierPath addCurveToPoint: CGPointMake(17.04, 2.97) controlPoint1: CGPointMake(16.64, 1.49) controlPoint2: CGPointMake(17.05, 1.76)];
[bezierPath addCurveToPoint: CGPointMake(15.52, 4.5) controlPoint1: CGPointMake(17.02,         4.16) controlPoint2: CGPointMake(17.05, 4.48)];
[bezierPath addCurveToPoint: CGPointMake(15.52, 1.5) controlPoint1: CGPointMake(15.55, 4.48) controlPoint2: CGPointMake(15.47, 1.49)];
[bezierPath closePath];
[[UIColor blackColor] setFill];
[bezierPath fill];