slider

图片缩放

  1. 添加目标
[slider addTarget:self action:@selector(updateValue:) forControlEvents:UIControlEventValueChanged];
  1. 设置动作
- (void)updateValue:(UISlider *)aSlider
{
    // Scale the title view
    imageView.transform = CGAffineTransformMakeScale(1.0f + 4.0f * aSlider.value, 1.0f);
}

设置滑柄(thumb)图片

- (void)setThumbImage:(nullable UIImage *)image forState:(UIControlState)state;

CGRectInset

CGRect CGRectInset ( CGRect rect, CGFloat dx, CGFloat dy );

中心不变,上下左右边界向内分别收缩dx, dy。(二者为负数时则是放大)

图形上下文

thumb

如何使用 Graphics Contexts 来画一个这样的图形?

// Create a thumb image using a grayscale/numeric level
UIImage *thumbWithLevel (float aLevel)
{
    float INSET_AMT = 1.5f;
    CGRect baseRect = CGRectMake(0.0f, 0.0f, 40.0f, 100.0f);
    CGRect thumbRect = CGRectMake(0.0f, 40.0f, 40.0f, 20.0f);
    
    UIGraphicsBeginImageContext(baseRect.size); 		  // 1. 创建一个Bitmap上下文,其他上下文还有 PDF、打印机等,上下文不同,绘制的地方就不同。
    CGContextRef context = UIGraphicsGetCurrentContext(); // 2. 获取bitmap上下文
    
    // Create a filled rect for the thumb
    [[UIColor darkGrayColor] setFill];                             // 3. 设置填充色
    CGContextAddRect(context, CGRectInset(thumbRect, INSET_AMT, INSET_AMT));   // 4. 画一个矩形
    CGContextFillPath(context);	                                   // 5. 填充矩形
    
    // Outline the thumb
    [[UIColor whiteColor] setStroke];				// 3. 设置描边色
    CGContextSetLineWidth(context, 2.0f);    		
    CGContextAddRect(context, CGRectInset(thumbRect, 2.0f * INSET_AMT, 2.0f * INSET_AMT)); // 4. 画一个矩形
    CGContextStrokePath(context);					// 5. 对矩形描边
    
    // Create a filled ellipse for the indicator
    CGRect ellipseRect = CGRectMake(0.0f, 0.0f, 40.0f, 40.0f);
    [[UIColor colorWithWhite:aLevel alpha:1.0f] setFill];		// 3. 设置填充色
    CGContextAddEllipseInRect(context, ellipseRect); 			// 4. 画一个椭圆
    CGContextFillPath(context);	         // 5. 填充椭圆
    
    // Label with a number
    NSString *numstring = [NSString stringWithFormat:@"%0.1f", aLevel];
    UIColor *textColor = (aLevel > 0.5f) ? [UIColor blackColor] : [UIColor whiteColor];
    UIFont *font = [UIFont fontWithName:@"Georgia" size:20.0f];
    NSMutableParagraphStyle * style = [[NSMutableParagraphStyle alloc] init];
    style.lineBreakMode = NSLineBreakByCharWrapping;
    style.alignment = NSTextAlignmentCenter;
    NSDictionary * attr = @{NSFontAttributeName:font, NSParagraphStyleAttributeName:style, NSForegroundColorAttributeName:textColor};
    [numstring drawInRect:CGRectInset(ellipseRect, 0.0f, 6.0f) withAttributes:attr]; // 4. 添加文本
    
    // Outline the indicator circle
    [[UIColor grayColor] setStroke];            // 3. 设置描边色
    CGContextSetLineWidth(context, 3.0f);    
    CGContextAddEllipseInRect(context, CGRectInset(ellipseRect, 2.0f, 2.0f));	// 4. 画一个椭圆
    CGContextStrokePath(context);   // 5. 填充椭圆
    
    // Build and return the image
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();	// 6.获取生成的图片
    UIGraphicsEndImageContext();		// 7. 关闭图形上下文
    return theImage;
}

参考Quartz2D使用