简体   繁体   中英

Change UIslider thumb image while sliding

I want to change UISlider thumb image during the slide.
Basically to set thumbImage acording to the value.
在此输入图像描述

The idea was to rotate the image according to the value and set it to the thumb.
So I tried to set the thumb image by overriding

-(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
 [self setThumbImage:[self imageRotatedByDegrees:50] forState:UIControlStateHighlighted];

and I also tried the same thing when I added an action to my slider. Unfortunately in both implementations the image simply disappears.
Do you think it possible to achieve in the way I do it? If NO please explain and suggest an alternative way (hopefully not one that will customize and replace the whole slider)
If Yes I will really appreciate code sample. The more close answer that I found here

Thanks a lot.

I found a mistake in my Code. Apparently I was releasing one of the image before calling CGContextDrawImage . (I still need to improve my GUI appearance to make it more nice, for instance to make the track image as I planed I made the original one transparent and added the as subview the one I need.)

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

 }

with some help from this link I create an array of colours for my slider 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;

}

在此输入图像描述

在此输入图像描述

在此输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM