Я пытаюсь нарисовать цветное колесо для iPhone, но я не могу заставить градиент вращаться вокруг точки. Я пытаюсь использовать градиенты, но objective-c обеспечивает линейный градиент, который рисует градиент в прямой линии следующим образом:
и радиальный градиент, который рисует градиент, начиная с точки и излучая во всех направлениях, как это:
Я хочу нарисовать линейный градиент, который вращается вокруг такой точки:
Следующее рисует цветовое колесо HSL в подклассе UIView. Он делает это, генерируя растровое изображение, вычисляя для каждого пикселя правильное значение цвета. Это не совсем то, что вы пытаетесь сделать (похоже, что только оттенок изменяется в круге с постоянной яркостью/насыщенностью), но вы должны быть в состоянии адаптировать его для своих нужд.
Обратите внимание, что это может не иметь оптимальной производительности, но вам нужно начать. Кроме того, вы можете использовать getColorWheelValue() для обработки пользовательского ввода (клики/касания при заданной координате).
- (void)drawRect:(CGRect)rect
{
int dim = self.bounds.size.width; // should always be square.
bitmapData = CFDataCreateMutable(NULL, 0);
CFDataSetLength(bitmapData, dim * dim * 4);
generateColorWheelBitmap(CFDataGetMutableBytePtr(bitmapData), dim, luminance);
UIImage *image = createUIImageWithRGBAData(bitmapData, self.bounds.size.width, self.bounds.size.height);
CFRelease(bitmapData);
[image drawAtPoint:CGPointZero];
[image release];
}
void generateColorWheelBitmap(UInt8 *bitmap, int widthHeight, float l)
{
// I think maybe you can do 1/3 of the pie, then do something smart to generate the other two parts, but for now we'll brute force it.
for (int y = 0; y < widthHeight; y++)
{
for (int x = 0; x < widthHeight; x++)
{
float h, s, r, g, b, a;
getColorWheelValue(widthHeight, x, y, &h, &s);
if (s < 1.0)
{
// Antialias the edge of the circle.
if (s > 0.99) a = (1.0 - s) * 100;
else a = 1.0;
HSL2RGB(h, s, l, &r, &g, &b);
}
else
{
r = g = b = a = 0.0f;
}
int i = 4 * (x + y * widthHeight);
bitmap[i] = r * 0xff;
bitmap[i+1] = g * 0xff;
bitmap[i+2] = b * 0xff;
bitmap[i+3] = a * 0xff;
}
}
}
void getColorWheelValue(int widthHeight, int x, int y, float *outH, float *outS)
{
int c = widthHeight / 2;
float dx = (float)(x - c) / c;
float dy = (float)(y - c) / c;
float d = sqrtf((float)(dx*dx + dy*dy));
*outS = d;
*outH = acosf((float)dx / d) / M_PI / 2.0f;
if (dy < 0) *outH = 1.0 - *outH;
}
UIImage *createUIImageWithRGBAData(CFDataRef data, int width, int height)
{
CGDataProviderRef dataProvider = CGDataProviderCreateWithCFData(data);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGImageRef imageRef = CGImageCreate(width, height, 8, 32, width * 4, colorSpace, kCGImageAlphaLast, dataProvider, NULL, 0, kCGRenderingIntentDefault);
UIImage *image = [[UIImage alloc] initWithCGImage:imageRef];
CGDataProviderRelease(dataProvider);
CGColorSpaceRelease(colorSpace);
CGImageRelease(imageRef);
return image;
}
// Adapted from Apple sample code. See http://en.wikipedia.org/wiki/HSV_color_space#Comparison_of_HSL_and_HSV
void HSL2RGB(float h, float s, float l, float* outR, float* outG, float* outB)
{
float temp1, temp2;
float temp[3];
int i;
// Check for saturation. If there isn't any just return the luminance value for each, which results in gray.
if(s == 0.0)
{
*outR = l;
*outG = l;
*outB = l;
return;
}
// Test for luminance and compute temporary values based on luminance and saturation
if(l < 0.5)
temp2 = l * (1.0 + s);
else
temp2 = l + s - l * s;
temp1 = 2.0 * l - temp2;
// Compute intermediate values based on hue
temp[0] = h + 1.0 / 3.0;
temp[1] = h;
temp[2] = h - 1.0 / 3.0;
for(i = 0; i < 3; ++i)
{
// Adjust the range
if(temp[i] < 0.0)
temp[i] += 1.0;
if(temp[i] > 1.0)
temp[i] -= 1.0;
if(6.0 * temp[i] < 1.0)
temp[i] = temp1 + (temp2 - temp1) * 6.0 * temp[i];
else {
if(2.0 * temp[i] < 1.0)
temp[i] = temp2;
else {
if(3.0 * temp[i] < 2.0)
temp[i] = temp1 + (temp2 - temp1) * ((2.0 / 3.0) - temp[i]) * 6.0;
else
temp[i] = temp1;
}
}
}
// Assign temporary values to R, G, B
*outR = temp[0];
*outG = temp[1];
*outB = temp[2];
}
Использование только методов UIKit:
// ViewController.m; assuming ViewController is the app root view controller
#include "ViewController.h"
@interface ViewController ()
{
UIImage *img;
UIImageView *iv;
}
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
CGSize size = CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height);
UIGraphicsBeginImageContextWithOptions(CGSizeMake(size.width, size.height), YES, 0.0);
[[UIColor whiteColor] setFill];
UIRectFill(CGRectMake(0, 0, size.width, size.height));
int sectors = 180;
float radius = MIN(size.width, size.height)/2;
float angle = 2 * M_PI/sectors;
UIBezierPath *bezierPath;
for ( int i = 0; i < sectors; i++)
{
CGPoint center = CGPointMake(size.width/2, size.height/2);
bezierPath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:i * angle endAngle:(i + 1) * angle clockwise:YES];
[bezierPath addLineToPoint:center];
[bezierPath closePath];
UIColor *color = [UIColor colorWithHue:((float)i)/sectors saturation:1. brightness:1. alpha:1];
[color setFill];
[color setStroke];
[bezierPath fill];
[bezierPath stroke];
}
img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
iv = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:iv];
}
@end
В основном все, что делает вышеприведенный код, - это обход круга вокруг узких секторов, заполняющих их цветами постепенно возрастающего оттенка.
Конечно, вы можете сделать весь рисунок непосредственно в графическом контексте представления с помощью drawRect() и не создавать явный контекст изображения.
Я сделал что-то вроде этого, создав большое растровое изображение RGBA, окрашивая каждый пиксель в зависимости от его местоположения, преобразованного в полярные координаты, затем преобразуя растровое изображение в изображение и уменьшая изображение. Уменьшение масштаба состояло в том, чтобы помочь пикселированию сглаживания вблизи центра.
Вам нужно сделать растровое изображение, как было предложено hotpaw2. Наиболее эффективным способом расчета этого является использование цветового пространства HSL. Это позволит вам создать функцию, которая принимает входное местоположение пикселя и выплескивает значение RGB, используя только несколько простых арифметических операций и немного триггеров для его вычисления.
Если вам нужны произвольные цвета вдоль "спиц" колеса, это требует больше работы. Вам нужно рассчитать значения смешивания для каждого пикселя, и это связано с более высокой степенью тригонометрии и не так быстро. Когда я это сделал, мне пришлось векторизовать и распараллелить его, чтобы удалить небольшую (хотя и заметную) задержку обновления от пересчета растрового изображения - на MacBook Pro. На iPhone у вас нет этих параметров, поэтому вам придется жить с задержкой.
Сообщите мне, если вам нужно более подробное объяснение этих методов; Я буду рад помочь.
Я не знаю ничего, что сделает это за вас. Вы можете аппроксимировать его рисованием треугольников, которые идут от (желтый- > красный, красный- > пурпурный, purp- > синий и т.д.), А затем a круговая маска над ним. Посмотрите CGGradient.
Извините, я не могу больше помочь.