2012-05-30 4 views
21

Я работаю над типом головоломки игры, где у меня есть два изображения для маскирования, я реализовал этот код для маскировкиОбрезка изображения с прозрачностью в iPhone

- (UIImage*) maskImage:(UIImage *)image withMaskImage:(UIImage*)maskImage { 

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGImageRef maskImageRef = [maskImage CGImage]; 

    CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast); 

    if (mainViewContentContext==NULL) 
     return NULL; 

    CGFloat ratio = 0; 
    ratio = maskImage.size.width/ image.size.width; 
    if(ratio * image.size.height < maskImage.size.height) { 
     ratio = maskImage.size.height/ image.size.height; 
    } 

    CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}}; 
    CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2,-((image.size.height*ratio)-maskImage.size.height)/2},{image.size.width*ratio, image.size.height*ratio}}; 

    CGContextClipToMask(mainViewContentContext, rect1, maskImageRef); 
    CGContextDrawImage(mainViewContentContext, rect2, image.CGImage); 

    CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext); 
    CGContextRelease(mainViewContentContext); 

    UIImage *theImage = [UIImage imageWithCGImage:newImage]; 
    CGImageRelease(newImage); 
    return theImage; 
} 

enter image description here

+

enter image description here

Это окончательный результат, который я получил после маскировки.

enter image description here

теперь я хотел бы, чтобы обрезать изображение в части, как enter image description here и enter image description here и так далее параметрический (обрезать изображение по прозрачности).

Если кто-либо реализовал такой код или какую-либо идею по этому сценарию, пожалуйста, поделитесь.

Спасибо.

Я использую эту строку коды по предложению Гунтис Treulands в

int i=1; 
    for (int x=0; x<=212; x+=106) { 
     for (int y=0; y<318; y+=106) { 
      CGRect rect = CGRectMake(x, y, 106, 106); 
      CGRect rect2x = CGRectMake(x*2, y*2, 212, 212); 

      UIImage *orgImg = [UIImage imageNamed:@"[email protected]"]; 
      UIImage *frmImg = [UIImage imageNamed:[NSString stringWithFormat:@"%[email protected]",i]]; 
      UIImage *cropImg = [self cropImage:orgImg withRect:rect2x]; 

      UIImageView *tmpImg = [[UIImageView alloc] initWithFrame:rect]; 
      [tmpImg setUserInteractionEnabled:YES]; 
      [tmpImg setImage:[self maskImage:cropImg withMaskImage:frmImg]]; 

      [self.view addSubview:tmpImg]; 
      i++; 
     } 
    } 

orgImg оригинальна кошка изображение, frmImg рамка для проведения отдельного фрагмента, маскируется в фотошопе и cropImg является 106x106 обрезанного изображения оригинальной кошки @ 2x.png.

моя функция кадрирования выглядит следующим образом

- (UIImage *) cropImage:(UIImage*)originalImage withRect:(CGRect)rect { 
    return [UIImage imageWithCGImage:CGImageCreateWithImageInRect([originalImage CGImage], rect)]; 
} 
+3

Я думаю, что лучший способ сделать это, чтобы замаскировать каждый кусок, а затем создать новую картину каждую новой части. – Simon

+0

@Simon: Это то, о чем я беспокоюсь. Как я могу обрезать изображение на куски по прозрачности. – iCoder86

+0

@ iCoder86: вы получили решение для обрезки изображения? Я тоже придерживаюсь этого. Можете ли вы поделиться своим кодом, если у вас есть работа? –

ответ

16

UPDATE 2

я стал по-настоящему интересно, чтобы найти лучший способ для создания головоломки, так что я провел два выходных и создал демо проект Jigsaw puzzle.

Она содержит:

  • обеспечивают подсчет столбца/строки, и он будет генерировать необходимые части головоломки с правильной ширины/высоты. Чем больше столбцов/строк - тем меньше ширина/высота и контур/встроенная головоломка.
  • каждый раз генерировать случайным образом стороны
  • может произвольно позиционировать/вращать штук в начале запуска
  • каждая часть может поворачиваться на кране, или двумя пальцами (как реальный кусок) - но после освобождения, он будет Привязка к 90/180/270/360 градусам
  • каждой часть может быть перемещена, если затрагивал его «осязаемая форму» границ (что в основном - это же видна головоломка форма, но без встроенных форм)

Недостатки :

  • Нет проверки, если штука находится в правильном месте.
  • Если более 100 штук - она ​​начинает отставать, потому что, поднимая кусок, она проходит через все подземелья, пока не найдет правильную деталь.

UPDATE

Спасибо за обновленный вопрос.

мне удалось получить это:

enter image description here

Как вы можете видеть - элемент головоломки обрезается правильно, и это в квадратном ImageView (зеленый цвет UIImageView BackgroundColor).

Так - то, что я сделал:

CGRect rect = CGRectMake(105, 0, 170, 170); //~ location on cat image where second Jigsaw item will be. 

UIImage *originalCatImage = [UIImage imageNamed:@"cat.png"];//original cat image 

UIImage *jigSawItemMask = [UIImage imageNamed:@"JigsawItemNo2.png"];//second jigsaw item mask (visible in my answer) (same width/height as cat image.) 

UIImage *fullJigSawItemImage = [jigSawItemMask maskImage:originalCatImage];//masking - so that from full cat image would be visible second jigsaw item 

UIImage *croppedJigSawItemImage = [self fullJigSawItemImage withRect:rect];//cropping so that we would get small image with jigsaw item centered in it. 

Для маскирования изображения Я использую функцию категории UIImage:

(но, вероятно, можно использовать функцию маскирования Но я отправлю его в любом случае.).
- (UIImage*) maskImage:(UIImage *)image 
{  
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 

    UIImage *maskImage = self; 
    CGImageRef maskImageRef = [maskImage CGImage]; 

    // create a bitmap graphics context the size of the image 
    CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast); 


    if (mainViewContentContext==NULL) 
      return NULL; 

    CGFloat ratio = 0; 

    ratio = maskImage.size.width/ image.size.width; 

    if(ratio * image.size.height < maskImage.size.height) { 
      ratio = maskImage.size.height/ image.size.height; 
    } 

    CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}}; 
    CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2 , -((image.size.height*ratio)-maskImage.size.height)/2}, {image.size.width*ratio, image.size.height*ratio}}; 


    CGContextClipToMask(mainViewContentContext, rect1, maskImageRef); 
    CGContextDrawImage(mainViewContentContext, rect2, image.CGImage); 


    // Create CGImageRef of the main view bitmap content, and then 
    // release that bitmap context 
    CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext); 
    CGContextRelease(mainViewContentContext); 

    UIImage *theImage = [UIImage imageWithCGImage:newImage]; 

    CGImageRelease(newImage); 

    // return the image 
    return theImage; 
} 

ПРЕДЫДУЩИЙ ОТВЕТ

вы можете приготовить маску для каждой части?

Например, у вас есть изображение с рамкой. Можете ли вы разрезать его в Photoshop в 9 отдельных изображениях, где на каждом изображении будет отображаться только соответствующая фигура. (все остальное - удалить).

Примера - вторая часть маски:

enter image description here

Затем вы используете каждый из этих вновь созданных масок изображений на кошачьем изображении - каждая часть будет маскировать все изображение, но один мира. Таким образом, у вас будет 9 штук изображений с использованием 9 различных масок.

Для больших или разных лобзиковых фреймов - снова создайте отдельные маски для изображений.

Это базовое решение, но не идеальное, так как вам необходимо подготовить каждую маска для лица отдельно.

Надеется, что это помогает ..

+0

Treilands: Я уже реализовал то, что вы предложили, но у него есть такая же проблема с обрезкой, см. Изображение здесь. Http://i.stack.imgur.com/ZN9Qk.png – iCoder86

+0

это Треланды. Если это сложно переписать - скопируйте. Но в любом случае - ваш пример выглядит так, будто у вас есть квадратные изображения, а изображения обрезаны, чтобы соответствовать квадрату. Возможно ли (если вы еще не пробовали) - imageView.contentMode = UIViewContentModeScaleAspectFit; ? –

+0

вы явно устанавливаете неправильную высоту и ширину, можете ли вы предоставить свой код? – Simon