代码之家 › 专栏 › 技术社区 › Nick

指针式仪表的uicontrol,又称google o-meter

uicontrol uikit iphone

2

Nick · 技术社区 · 15 年前

对于那些uislider不够有趣的时候,我想我可以使用一个自定义uicontrol来执行类似于Google O Meter的操作,它来自iOS上的Google Chart API。

这是我在视觉上所说的一个例子。我的目标是使触摸操作的针和容易定制的范围标签和颜色梯度。谷歌图表API是一个伟大的灵感:

在我重新发明轮子之前,是否有人知道现有的努力,我可以利用好的示例代码来完成我也可以贡献的项目?

谢谢你的指点。

下面是我在视觉上所说的一个例子。我的目标是使触摸操作的针和容易定制的范围标签和颜色梯度。谷歌图表API是一个伟大的灵感:

在我重新发明轮子之前,是否有人知道现有的努力,我可以利用好的示例代码来完成我也可以贡献的项目?

谢谢你的指点。

1 回复 | 直到 14 年前

1

4

Nick 14 年前

 - (void)drawRect:(CGRect)rect {

     [super drawRect:rect];
     CGRect parentViewBounds = self.bounds;
     CGFloat x = CGRectGetWidth(parentViewBounds)/2;
     CGFloat y = CGRectGetHeight(parentViewBounds);
     CGFloat radius = y;
     CGFloat percent_angle = _progress * M_PI;

     CGContextRef ctx = UIGraphicsGetCurrentContext();
     CGContextBeginPath(ctx);

     // Add path
     CGFloat m2_x = radius * (1.0 - 0.9*cos(percent_angle));
     CGFloat m2_y = radius * (1.0 - 0.9*sin(percent_angle));      

     CGContextBeginPath(ctx);
     CGContextAddArc(ctx, x, y, radius, M_PI, 0, 0);
     CGContextAddLineToPoint(ctx, x + 0.1*radius, y);
     CGContextAddArc(ctx, x, y, 0.1*radius, 0, M_PI, 1);
     CGContextClosePath(ctx);
     CGContextSetFillColorWithColor(ctx,[UIColor whiteColor].CGColor);
     CGContextFillPath(ctx);

     CGContextBeginPath(ctx);
     CGContextMoveToPoint(ctx, m2_x, m2_y);
     CGContextAddArc(ctx, x, y, 0.9*radius, M_PI + percent_angle, M_PI, 1);
     CGContextAddLineToPoint(ctx, 0.8*radius, y);
     CGContextSetStrokeColorWithColor(ctx,self.fillColor.CGColor);
     CGContextAddArc(ctx, x, y, 0.2*radius, M_PI, M_PI + percent_angle, 0);
     CGContextClosePath(ctx);
     CGContextStrokePath(ctx);

     CGContextBeginPath(ctx);
     CGContextMoveToPoint(ctx, m2_x, m2_y);
     CGContextSetFillColorWithColor(ctx,self.fillColor.CGColor);
     CGContextAddArc(ctx, x, y, 0.9*radius, M_PI + percent_angle, M_PI, 1);
     CGContextAddLineToPoint(ctx, 0.8*radius, y);
     CGContextAddArc(ctx, x, y, 0.2*radius, M_PI, M_PI + percent_angle, 0);
     CGContextClosePath(ctx);
     CGContextFillPath(ctx);

    /* CGContextBeginPath(ctx);
     CGContextAddArc(ctx, x, y, radius, M_PI, 0, 0);
     CGContextAddLineToPoint(ctx, x + 0.1*radius, y);
     CGContextAddArc(ctx, x, y, 0.1*radius, 0, M_PI, 1);
     CGContextClosePath(ctx);
     CGContextSetStrokeColorWithColor(ctx,[self.strokeColor CGColor]);
     CGContextStrokePath(ctx);*/

     for(int i = 0; i < 100; i++)
     {
         CGFloat angle =M_PI * 0.01 * i;
         CGFloat l1_x = radius * (1.0 - 0.98*cos(angle));
         CGFloat l1_y = radius * (1.0 - 0.98*sin(angle));
         if(i%10 == 0)
         {
             l1_x = radius * (1.0 - 0.9*cos(angle));
             l1_y = radius * (1.0 - 0.9*sin(angle));
         }
         else if(i%5 == 0)
         {
             l1_x = radius * (1.0 - 0.95*cos(angle));
             l1_y = radius * (1.0 - 0.95*sin(angle));             
         }

         CGFloat l2_x = radius * (1.0 - cos(angle));
         CGFloat l2_y = radius * (1.0 - sin(angle)); 
         CGContextMoveToPoint(ctx, l1_x, l1_y);
         CGContextSetLineWidth(ctx, 1.0);
         CGContextAddLineToPoint(ctx, l2_x, l2_y);
         CGContextSetStrokeColorWithColor(ctx,[self.strokeColor CGColor]);
         CGContextStrokePath(ctx);
     }

     CGFloat n1_x = radius * (1.0 - 0.1*cos(percent_angle));
     CGFloat n1_y = radius * (1.0 - 0.1*sin(percent_angle));
     CGFloat n2_x = radius * (1.0 - cos(percent_angle));
     CGFloat n2_y = radius * (1.0 - sin(percent_angle)); 
     CGContextMoveToPoint(ctx, n1_x, n1_y);
     CGContextSetLineWidth(ctx, 4.0);
     CGContextAddLineToPoint(ctx, n2_x, n2_y);
     CGContextSetStrokeColorWithColor(ctx,[self.needleColor CGColor]);
     CGContextStrokePath(ctx);

 }