ios - 使用 Coregraphics 一次绘制多个 Guage 图表
<p><p>我只使用 <strong>CORE GRAPHICS</strong> 制作图表。我已经成功完成了折线图、条形图和单线图的绘制。</p>
<p>现在我的要求是
<img src="/image/28EkZ.png" alt="My requirement"/> </p>
<p><strong>但是当我在上下文中绘制时，我只得到一个这样的图表</strong></p>
<p> <img src="/image/dwhfc.png" alt="What i got"/>
我已经获取了数组中图表的百分比并使用 <code>for</code> 循环，我一直在绘制数组中的所有百分比，但我得到的最终结果只是一个量表是数组中的最后一个对象。 </p>
<p>我使用这些 <a href="http://code4app.net/ios/Percentage-Circular/50cfec3d6803fa7442000001" rel="noreferrer noopener nofollow">link</a> 绘制了这些图表</p>
<p>稍微改一下代码和画图这样</p>
<p>我用来绘制量规图的代码是</p>
<p>首先我从我的 Viewcontroller 调用 guagegraph(<code>UIView</code> 的子类)</p>
<p>percentageArray 包含每个量表的百分比</p>
<pre><code>percentageArray = [ initWithObjects:@"80", @"76", @"92", @"49", nil];
for (int i = 0; i < percentageArray.count; i++)
{
intValue] withIndex:i];
}
</code></pre>
<p>然后在guagegraph下面的方法</p>
<pre><code>- (void)setPercent:(int)percent withIndex:(int)i
{
CGFloat floatPercent = percent / 100.0;
floatPercent = MIN(1, MAX(0, floatPercent));
percentLayer.percent = floatPercent;
percentLayer.i = i;
;
;
}
</code></pre>
<p>然后调用 percentLayer 类(<code>CALayer</code> 的子类)并绘制上下文</p>
<pre><code>-(void)drawInContext:(CGContextRef)ctx
{
;
;
}
-(void)DrawRight:(CGContextRef)ctx
{
CGPoint center = CGPointMake(self.frame.size.width / 2, 160);
CGFloat delta = -toRadians(270 * percent);
CGContextSetFillColorWithColor(ctx, .CGColor);
CGContextSetLineWidth(ctx, 1);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetAllowsAntialiasing(ctx, YES);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRelativeArc(path, NULL, center.x, center.y, 135 - 5 - (15 * i), (3 * M_PI / 4), -delta);
CGPathAddRelativeArc(path, NULL, center.x, center.y, 150 - 5 - (15 * i), (3 * M_PI / 4) - delta, delta);
CGPathAddLineToPoint(path, NULL, center.x, center.y);
CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
}
-(void)DrawLeft:(CGContextRef)ctx
{
CGPoint center = CGPointMake(self.frame.size.width / 2, 160);
CGFloat delta = toRadians(270 * (1 - percent));
CGContextSetFillColorWithColor(ctx, .CGColor);
CGContextSetLineWidth(ctx, 1);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetAllowsAntialiasing(ctx, YES);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRelativeArc(path, NULL, center.x, center.y, 135 - 5 - (15 * i), (M_PI / 4), -delta);
CGPathAddRelativeArc(path, NULL, center.x, center.y, 150 - 5 - (15 * i), (M_PI / 4) - delta, delta);
CGPathAddLineToPoint(path, NULL, center.x, center.y);
CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
}
</code></pre>
<p><code>drawRight</code> 方法是绘制橙色的，<code>draw left</code> 方法是绘制grouptableviewbackground 的颜色。</p>
<p>循环开始时，绘制第一个百分比图，当第二个循环开始时，第一个绘制的图表被当前循环百分比覆盖并绘制第二个图表，这样只显示最后一个图表</p>
<p>感谢任何帮助。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我相信你的问题就在这里 -></p>
<pre><code> percentageArray = [ initWithObjects:@"80", @"76", @"92", @"49", nil];
for (int i = 0; i < percentageArray.count; i++)
{
intValue] withIndex:i];
}
</code></pre>
<p>我觉得您应该将它们添加到数组中。并在绘制完所有对象后显示它们。 </p>
<p><strong>编辑</strong></p>
<p><strong>第一</strong>
让你的 <code>precentLayer</code> 类显示不同的颜色仪表。所以将这段代码添加到 <code>-(void)drawRight</code></p>
<pre><code>CGFloat hue = ( arc4random() % 256 / 256.0 );//0.0 to 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;//0.5 to 1.0, away from white
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;//0.5 to 1.0, away from black
UIColor *randomColor = ;
//update this line
CGContextSetFillColorWithColor(ctx, randomColor.CGColor);
</code></pre>
<p>如果不是这样，看看它们是否只是相互重叠......</p>
<p>================================================ ==============================</p>
<p><strong>那么</strong>因为只有一个 View ，试试这样的。</p>
<pre><code>percentageArray = [ initWithObjects:@"80", @"76", @"92", @"49", nil];
for (int i = 0; i < percentageArray.count; i++) {
UIView *percentGauge = intValue] withIndex:i];
//make background clear so we can see the guage behind it
percentGauge.backgroundColor = ;
}
</code></pre>
<p>并让 <code>-(void)setPercent: withIndex:</code> 返回一个 <code>UIView</code> 所以....</p>
<pre><code>- (UIView *)setPercent:(int)percent withIndex:(int)i {
CGFloat floatPercent = percent / 100.0;
floatPercent = MIN(1, MAX(0, floatPercent));
percentLayer.percent = floatPercent;
percentLayer.i = i;
;
;
return self;
}
</code></pre>
<p>如果这没有任何帮助，您可以将您正在使用的文件上传到 Dropbox，我可以试一试。</p></p>
<p style="font-size: 20px;">关于ios - 使用 Coregraphics 一次绘制多个 Guage 图表，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/26629360/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/26629360/
</a>
</p>
页:
[1]