Question

对于那些UISlider不够有趣的时候，我想我会使用自定义UIControl从iOS上的谷歌图表API中执行与Google O Meter类似的操作。

以下是我在视觉上谈论的一个例子。我的目标是实现针的触摸操作，并轻松定制范围标签和着色渐变。 Google Charts API是一个很好的灵感：

在重新发明轮子之前，任何人都知道现有的努力，我可以利用这样的东西或我可以贡献的项目使用好的示例代码吗？

感谢您的任何指示。

Answer 1

我已经将GaugeView实现为UIView的子项，并添加了在drawRect方法中绘制仪表的代码。没有什么花哨但可能有助于开始

 - (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);

 }

用于针规的UIControl又称Google O Meter

1 个答案: