滑动时更改UIslider拇指图像

时间:2014-03-18 00:50:56

标签: ios objective-c uislider

我想在幻灯片中更改UISlider拇指图像 基本上根据值设置thumbImage enter image description here

想法是根据值旋转图像并将其设置为拇指 所以我尝试通过覆盖

来设置拇指图像
-(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
 [self setThumbImage:[self imageRotatedByDegrees:50] forState:UIControlStateHighlighted];

当我向滑块添加动作时,我也尝试了相同的操作。 不幸的是,在这两种实现中,图像都消失了 你觉得有可能以我的方式实现吗? 如果没有,请解释并建议一种替代方式(希望不是一个可以自定义和替换整个滑块的方式)
如果是,我将非常感谢代码示例。 The more close answer that I found here

非常感谢。

1 个答案:

答案 0 :(得分:6)

我在我的代码中发现了一个错误。显然我在调用CGContextDrawImage之前发布了一张图像。 (我仍然需要改进我的GUI外观以使其更加美观,例如制作轨道图像,因为我计划将原始图像透明并将子视图添加到我需要的那个。)

- (id)initWithFrame:(CGRect)frame
 {
self = [super initWithFrame:frame];
if (self) {
    self.thumbImage = [self imageWithImage:[UIImage imageNamed:@"IconForSlider.png"] scaledToSize:CGSizeMake(frame.size.height, frame.size.height)];
    size = self.thumbImage.size.height;
    [self setThumbImage:[self imageRotatedByDegrees:0] forState:UIControlStateNormal];
    [self addTarget:self action:@selector(changeValue) forControlEvents:UIControlEventValueChanged];

}
return self;
}

-(void)changeValue{
NSLog(@"ChangeValue");
[self setThumbImage:(UIImage *)[self imageRotatedByDegrees:(self.value * 100*(10/9))] forState:UIControlStateHighlighted];
[self setThumbImage:(UIImage *)[self imageRotatedByDegrees:(self.value * 100*(10/9))] forState:UIControlStateNormal];
 }

#pragma mark ImageResize
- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
 }

 #pragma mark Rotate

- (UIImage *)imageRotatedByDegrees:(float)degrees
 {
NSLog(@"ImageRotateByDegres");
static float Prc = 0.6;
degrees = (degrees > 90)? 90: degrees;

UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,size,size)];
CGSize rotatedSize = rotatedViewBox.frame.size;

 // Create the bitmap context

UIGraphicsBeginImageContextWithOptions(rotatedSize , NO, 0.0);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
UIColor *color = [self.colorsArray objectAtIndex:lround(self.value*100)];
[color setFill];
CGContextRef bitmap = UIGraphicsGetCurrentContext();

[[UIColor colorWithRed:((139 + (116/100)*self.value*100)/255.0) green:141/255.0f blue:149/255.0f alpha:1.0f] setFill];
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);

// Rotate the image context
CGContextRotateCTM(bitmap,DEGREES_TO_RADIANS(degrees));

CGContextClipToMask(bitmap, CGRectMake(-1*size/ 2, -1*size / 2, size, size), [self.thumbImage CGImage]);
CGContextAddRect(bitmap, CGRectMake(-1*size/ 2, -1*size / 2, size, size));
CGContextDrawPath(bitmap,kCGPathFill);
 //Prc and 1.07 are for better view
CGContextDrawImage(bitmap, CGRectMake(-1.07*size/2*Prc, -1*size/2*Prc,size*Prc,size*Prc), [[UIImage imageNamed:@"ActiveIcon.png"]CGImage]);

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;

 }

在此链接的帮助下,我为滑块Get Pixel Color of Uiimage

创建了一系列颜色
- (UIColor *)GetColorAtValue:(float)value{

long pixelInfo = (long)floorf(_sliderImage.size.width  * _sliderImage.size.height/2 + _sliderImage.size.width * value) * 4  ;

UInt8 red = data[pixelInfo];         // If you need this info, enable it
UInt8 green = data[(pixelInfo + 1)]; // If you need this info, enable it
UInt8 blue = data[pixelInfo + 2];    // If you need this info, enable it
//UInt8 alpha = data[pixelInfo + 3];     // I need only this info for my maze game
//CFRelease(pixelData);

UIColor* color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1]; // The pixel color info

return color;

}

enter image description here

enter image description here

enter image description here