我必须为 iPad 应用程序绘制如下图所示的图表。是否有任何免费的本地图表 api 可用？
或者任何帮助绘制它...
任何帮助都是不言而喻的。
问问题
1061 次
7 回答
8
我想使用Quartz 2D。我不认为任何图书馆都会做你的交易。您需要创建自己的。这是我的想法。
对于一种图表，您可以了解速度计的工作原理。Eeww，我没有搜索链接，希望想法可以。您可以计算百分比的角度并相应地绘制弧线。这不会太难。
对于液滴，哎呀，会有点忙。但这里有一些逻辑：
我想你会有像图表一样的液滴中每个段的百分比。你可以为他们计算半径！希望下面的图片能更好地解释你的想法。我只是想分享逻辑而不是代码，因为 SO 并不是要给我代码之类的东西 :)
希望这可以帮助
于 2012-10-09T05:38:38.327 回答
4
我在GitHub 上有一个工作项目。
#import "PlectrumView.h"
@implementation PlectrumView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
-(void) drawPlectrumWithPercentage:(CGFloat) percentage color:(UIColor *)color
{
CGFloat factor = self.frame.size.width ;
percentage*=factor;
UIBezierPath* plectrum = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, factor - percentage, percentage,percentage)
byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight
cornerRadii: CGSizeMake(percentage/2, percentage/2)];
[color setFill];
[plectrum fill];
}
- (void)drawRect:(CGRect)rect
{
[self drawPlectrumWithPercentage:1.0 color:[UIColor colorWithWhite:.9 alpha:1]];
[self drawPlectrumWithPercentage:.75 color:[UIColor colorWithRed:245.0/255.0 green:134.0/255.0 blue:122.0/255.0 alpha:1]];
[self drawPlectrumWithPercentage:.61 color:[UIColor colorWithRed:171.0/255.0 green:212.0/255.0 blue:105.0/255.0 alpha:1]];
}
@end
结果是
我改变拨片代码的方式是它的面积将代表百分比而不是它的宽度。感觉更自然。
-(void) drawPlectrumWithPercentage:(CGFloat) percentage color:(UIColor *)color
{
static CGFloat pi = 3.141592653589793;
static CGFloat radius100percent = 50.0;
static CGFloat area100percent;
static CGFloat threeFouthPiPlusOne;
area100percent= radius100percent * radius100percent * pi *3/4 + radius100percent*radius100percent;
threeFouthPiPlusOne = (1 + (pi*(3.0/4.0)));
CGFloat area = area100percent * percentage;
CGFloat newRadius = sqrt(area / threeFouthPiPlusOne);
percentage = newRadius/ 50.0;
CGFloat factor = self.frame.size.width ;
percentage*=factor;
UIBezierPath* plectrum = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, factor - percentage, percentage,percentage)
byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight
cornerRadii: CGSizeMake(percentage/2, percentage/2)];
[color setFill];
[plectrum fill];
}
于 2012-10-12T04:27:32.633 回答
2
如果您使用 SVG，您可以使用以下函数轻松创建形状：
/**
* @param {SVGPathElement} aShape a SVG path element
* @param {number} radius the radius of the plectrum's arc
* @param {string} fillColor color in "#rrggbb" format
*/
function drawPlectrum(aShape, radius, fillColor) {
// Creating a string which defines a path in SVG
// M = moveto, A = line to, etc. See http://www.w3.org/TR/SVG/paths.html
var ss="M "+parseInt(0)+" "+parseInt(0)+" "; // moveto 0, 0
ss+="L "+parseInt(0)+" "+parseInt(radius)+" "; // lineto 0, R
ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(radius)+" "+parseInt(2*radius)+" ";// elliptic curve to R, 2*R
ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(2*radius)+" "+parseInt(radius)+" ";// elliptic curve to 2*R, R
ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(radius)+" "+parseInt(0)+" "; // elliptic curve to R, 0
ss+="Z"; // closepath
// The d attribute of the path element holds the line information
// In XML the element will essentially be <path d="*the created string*">
aShape.setAttribute("d", ss);
// Give the color
aShape.setAttribute("fill", fillColor);
}
连续的图纸看起来像这样：
// Note that 3 different path elements are used to overlap the plectrums
drawPlectrum(node, 100, "#aaaaaa");
drawPlectrum(node2, 75, "#33dd33");
drawPlectrum(node3, 50, "#3333dd");
编辑 1： 在代码中添加了更多注释以便更好地理解
于 2012-10-10T19:49:14.000 回答
1
下载这个项目并使用它，但他们正在使用 ARC。希望对您有所帮助！
于 2012-09-28T13:05:32.077 回答
1
我认为以上所有可能都可以使用具有使用数学代码增加尺寸/直径的底层形状的透明图像来完成。
使用弧度百分比，您可以让刻度盘(available area / 100) * Amount of Progress
，然后让图像旋转一定量以使刻度盘就位，并从左到右以相同的量填充底层彩色正方形？这将节省很多绘图代码。
于 2012-10-10T15:29:05.867 回答