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

在定义的像素范围内从绿色过渡到红色UIColor

  •  0
  • Anthony_b  · 技术社区  · 6 年前

    我有一个水平条(矩形区域),代表0到5V的电压。例如,如果电压为2V,则条形图将用绿色填充至2V标记。

    从0-2.1V,表示电压的区域颜色应为绿色。从2.9-5V,颜色应为红色。

    我想从2.1-2.9进行颜色转换,从绿色变为红色。我尝试了另一个StackOverflow主题的解决方案,但我不喜欢结果,因为光谱中有太多颜色看起来不属于它们。

    这就是解决方案(80表示范围为2.90-2.10=.80):

    - (void)updateLayerProperties {
        CGRect barRect = self.bounds;
        barRect.size.width = (self.bounds.size.width * self.value)/3.5;
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:barRect];
        self.barLayer.path = path.CGPath;
        if (self.value >= 1.30 && self.value <= 1.70) {
            self.barLayer.fillColor = [UIColor colorWithRed:((255 * (self.value - 1.00)) / 80)
                                                      green:((255 * (80 - (self.value - 1.00))) / 80)
                                                       blue:0
                                                      alpha:1.0].CGColor;
        } else {
            self.barLayer.fillColor = (self.value >= self.threshold) ? self.fullColor.CGColor : self.emptyColor.CGColor;
        }
        self.layer.borderWidth = self.borderWidth;
        self.layer.borderColor = self.borderColor.CGColor;
        self.layer.cornerRadius = 2.0f;
        self.layer.masksToBounds = YES;
    }
    

    原来,我刚才有0-2.5V是绿色,2.5-5V是红色。。。但这看起来很糟糕,所以我正在尝试。

    是否有某种类型的动画可以用来代替根据电压值计算颜色?假设过渡间距为2.1-2.9,过渡应该知道如何在绿色和红色之间显示最佳颜色。谢谢

    Bar image, with value > 2.9

    1 回复  |  直到 6 年前
        1
  •  0
  •   DonMag    6 年前

    这应该让您开始:


    //
    //  GradientBarView.h
    //
    //  Created by Don Mag on 4/5/18.
    //
    
    #import <UIKit/UIKit.h>
    
    @interface GradientBarView : UIView
    
    @end
    

    //
    //  GradientBarView.m
    //
    //  Created by Don Mag on 4/5/18.
    //
    
    #import "GradientBarView.h"
    
    @interface GradientBarView ()
    @property (strong, nonatomic) CAGradientLayer *gradLayer;
    @end
    
    @implementation GradientBarView
    
    - (id)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
        if (self) {
            [self commonInit];
        }
        return self;
    }
    
    - (id)initWithCoder:(NSCoder *)aDecoder {
        if ((self = [super initWithCoder:aDecoder])) {
            [self commonInit];
        }
        return self;
    }
    
    
    - (void)commonInit {
    
        // instantiate the gradient layer
        _gradLayer = [CAGradientLayer new];
    
        // initial size
        _gradLayer.frame = self.bounds;
    
        // 4 colors, so we can have solid - gradient - solid
        _gradLayer.colors = @[
                              (__bridge id)[UIColor greenColor].CGColor,
                              (__bridge id)[UIColor greenColor].CGColor,
                              (__bridge id)[UIColor redColor].CGColor,
                              (__bridge id)[UIColor redColor].CGColor,
                              ];
    
        // 0.0 -> 2.1 should be green
        // 2.1 -> 2.9 should be a green-to-red gradient
        // 2.9 -> 5.0 should be red
    
        _gradLayer.locations = @[
                                 @(0.0),
                                 @(2.1 / 5.0),
                                 @(2.9 / 5.0),
                                 @(1.0)
                                 ];
    
        // make it horizontal
        _gradLayer.startPoint = CGPointMake(0.0, 0.5);
        _gradLayer.endPoint = CGPointMake(1.0, 0.5);
    
        // add the gradient layer
        [self.layer addSublayer:_gradLayer];
    
    }
    
    - (void)layoutSubviews {
        _gradLayer.frame = self.bounds;
    }
    
    @end
    

    //
    //  GradBarViewController.h
    //
    //  Created by Don Mag on 4/5/18.
    //
    
    #import <UIKit/UIKit.h>
    
    @interface GradBarViewController : UIViewController
    
    @end
    

    //
    //  GradBarViewController.m
    //
    //  Created by Don Mag on 4/5/18.
    //
    
    #import "GradBarViewController.h"
    #import "GradientBarView.h"
    
    @interface GradBarViewController ()
    @property (strong, nonatomic) GradientBarView *gradBarView;
    @end
    
    @implementation GradBarViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    
        // instantiate a GradientBarView
        _gradBarView = [GradientBarView new];
    
        // we'll use autolayout
        _gradBarView.translatesAutoresizingMaskIntoConstraints = NO;
    
        // add the view
        [self.view addSubview:_gradBarView];
    
        // center a 300 x 40 view
    
        /* center horizontally to superview */
        [NSLayoutConstraint constraintWithItem:_gradBarView
                                     attribute:NSLayoutAttributeCenterX
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:self.view
                                     attribute: NSLayoutAttributeCenterX
                                    multiplier:1.0
                                      constant:0].active = YES;
    
        /* center vertically to superview */
        [NSLayoutConstraint constraintWithItem:_gradBarView
                                     attribute:NSLayoutAttributeCenterY
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:self.view
                                     attribute: NSLayoutAttributeCenterY
                                    multiplier:1.0
                                      constant:0].active = YES;
    
        /* Fixed width */
        [NSLayoutConstraint constraintWithItem:_gradBarView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nil
                                     attribute:NSLayoutAttributeNotAnAttribute
                                    multiplier:1.0
                                      constant:300.0].active = YES;
        /* Fixed Height */
        [NSLayoutConstraint constraintWithItem:_gradBarView
                                     attribute:NSLayoutAttributeHeight
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nil
                                     attribute:NSLayoutAttributeNotAnAttribute
                                    multiplier:1.0
                                      constant:40.0].active = YES;
    
    }
    
    @end
    

    结果(单击图像以查看其全尺寸):

    enter image description here

    我将让您查看如何遮罩视图,以便您只显示左侧的X个点数。