iphone - 如何在ios中绘制电池

Question

我想画一个电池来显示我的一个通过蓝牙连接到手机的设备的电池电量。

我怎样才能做到这一点？我是一个 2d 绘图的菜鸟....任何指针都是有帮助的

谢谢，

Answer 1

我想画一个电池来显示我的一个通过蓝牙连接到手机的设备的电池电量。

编写代码来绘制像电池这样的非缩放静态图像似乎很麻烦。当然，您可以这样做，但是在绘图程序中绘制图像并将其作为资源添加到您的应用程序中要容易得多。

如果您想在代码中绘制电池，请先在纸上或在绘图程序中绘制形状。然后写下你需要做的所有绘图操作的列表——对于电池，它可能只是一系列的直线和曲线。UIBezierPath提供了这些操作，从它开始可能比深入 Quartz2D 更容易。

Answer 2

我都做过，使用绘图程序，并编程。今天，我发现编程更容易、更有趣，并且面向未来：
您不必为 ios 分辨率的任何变化提供两张或多少张图片。

绘图中的一个（不是那么秘密）提示是，将绘​​图标准化为 0 和 1 之间。然后你就与电池大小无关了。您可以通过CGAffineTransformMakeScale(). 但是您应该立即更改线宽以适应缩放率：

如果按因子 r 缩放：
lineWidth 必须是 origLineWidth / r; // 这花了我一些时间才知道！
例如 origLineWidth = 1.0;

然后你可以画：

1. 电池语料库的一个矩形，（例如，从 x：0 到 0.9）
2. 一个填充矩形用于电池极。（例如从 x：0.9 到 1.0）
3. 并且电池的充电状态可以使用线性梯度（或更好的两个梯度）。一个从 y 0 (+ linewidth) - 0.25 从绿色到白色的渐变，另一个从白色到深绿色的渐变：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];