कोनों को संरक्षित करते समय एक यूआईएममेज को खींचना

Question

किनारों को संरक्षित करते समय मैं नेविगेशन तीर छवि को फैलाने की कोशिश कर रहा हूं ताकि बीच फैलाए और सिरों को ठीक किया जा सके।

निम्नलिखित iOS 5 कोड छवि जब छवि UIEdgeInsets द्वारा परिभाषित के केंद्र भागों फैलाने के लिए आकृति परिवर्तन की अनुमति देता है:

यहाँ छवि है कि मैं फैलाने के लिए कोशिश कर रहा हूँ है।

[[UIImage imageNamed:@"arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 7, 15, 15)]; 

इस (छवि के फ्रेम 70 विस्तृत पिक्सल पर सेट है) एक छवि है कि इस तरह दिखता है में परिणाम है:

यह वास्तव में है कि मैं क्या चाहते हैं, लेकिन resizableImageWithCapInsets केवल पर समर्थित है आईओएस 5 और बाद में।

आईओएस 5 से पहले एकमात्र समान विधि stretchableImageWithLeftCapWidth:topCapHeight है, लेकिन आप केवल शीर्ष और बाएं इन्सेट निर्दिष्ट कर सकते हैं जिसका अर्थ है कि छवि के बराबर आकार के किनारों का होना चाहिए।

क्या आईओएस 5 की resizableImageWithCapInsets विधि, या ऐसा करने का दूसरा तरीका जैसी छवि का आकार बदलने का आईओएस 4 तरीका है?

Answer 1

यहां दिखाई देने वाले इस धारणा गलत है: topCapHeight लेकिन आप केवल ऊपर और बाईं सन्निवेश वाली जिसका मतलब है कि छवि बराबर आकार किनारों होना आवश्यक है निर्दिष्ट कर सकते हैं:

पहले केवल iOS 5 समान विधि के लिए stretchableImageWithLeftCapWidth है।

कैप्स को निम्नानुसार पता लगाया गया है - मैं बाएं टोपी के माध्यम से कदम उठाऊंगा, लेकिन एक ही सिद्धांत शीर्ष टोपी पर लागू होता है।

कहें कि आपकी छवि 20px चौड़ी है।

• बाएं टोपी चौड़ाई - यह छवि के बाईं ओर भाग है जिसे फैलाया नहीं जा सकता है। stretchableImage विधि में आप इसके लिए 10 का मान भेजते हैं।
• स्केलेबल हिस्सा - यह एक बेहतर वर्णन
• के अभाव में चौड़ाई में एक पिक्सेल माना जाता है, तो यह कॉलम "11" पिक्सल हो जाएगा, इसका मतलब यह है की शेष 9px की एक गर्भित सही टोपी है आपकी छवि - यह विकृत भी नहीं होगा।

यह एक छवि है कि जब एक छवि खींची जाती है आकार नहीं बदला जाना चाहिए के भाग निर्दिष्ट documentation

leftCapWidth

अंत टोपियां से लिया जाता है। इस तकनीक का उपयोग बटन और अन्य आकार बदलने योग्य छवि-आधारित इंटरफ़ेस तत्वों को लागू करने के लिए किया जाता है। जब अंत कैप्स वाले बटन का आकार बदलता है, तो अंतराल अंतराल के बीच के क्षेत्र में, आकार के बटन के बीच ही होता है। अंत कैप्स स्वयं अपने मूल आकार और उपस्थिति रखते हैं।

यह संपत्ति बाएं अंत टोपी के आकार को निर्दिष्ट करती है।मध्य (खिंचाव) भाग 1 पिक्सेल चौड़ा माना जाता है। सही अंत टोपी इसलिए एक साथ बाएं छोर टोपी और मध्य भाग के आकार को जोड़ने और फिर छवि की चौड़ाई से है कि मूल्य को घटाकर की गणना की जाती है:

rightCapWidth = image.size.width - (image.leftCapWidth + 1);

Answer 2

आपका उदाहरण पूरी तरह से उपयोग करते हुए संभव है 1512 की बाएं टोपी के साथ stretchableImageWithLeftCapWidth:topCapHeight: (जाहिर है, अपने कोड को पढ़ने से)। वह क्षैतिज रूप से मध्यम कॉलम दोहराकर बटन को फैलाएगा।

Answer 3

आप UIImage विस्तार कर सकते हैं कस्टम किनारे सुरक्षा के साथ एक छवि खींच (जिससे, छवि के इंटीरियर खींच बजाय यह खपरैल का छत की) अनुमति देने के लिए:

UIImage + utils.h:

#import <UIKit/UIKit.h> 
@interface UIImage(util_extensions) 
//extract a portion of an UIImage instance 
-(UIImage *) cutout: (CGRect) coords; 
//create a stretchable rendition of an UIImage instance, protecting edges as specified in cornerCaps 
-(UIImage *) stretchImageWithCapInsets: (UIEdgeInsets) cornerCaps toSize: (CGSize) size; 
@end 

UIImage + utils.m:

#import "UIImage+utils.h" 
@implementation UIImage(util_extensions) 
-(UIImage *) cutout: (CGRect) coords { 
    UIGraphicsBeginImageContext(coords.size); 
    [self drawAtPoint: CGPointMake(-coords.origin.x, -coords.origin.y)]; 
    UIImage *rslt = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return rslt; 
} 

-(UIImage *) stretchImageWithCapInsets: (UIEdgeInsets) cornerCaps toSize: (CGSize) size { 
    UIGraphicsBeginImageContext(size); 

    [[self cutout: CGRectMake(0,0,cornerCaps.left,cornerCaps.top)] drawAtPoint: CGPointMake(0,0)]; //topleft 
    [[self cutout: CGRectMake(self.size.width-cornerCaps.right,0,cornerCaps.right,cornerCaps.top)] drawAtPoint: CGPointMake(size.width-cornerCaps.right,0)]; //topright 
    [[self cutout: CGRectMake(0,self.size.height-cornerCaps.bottom,cornerCaps.left,cornerCaps.bottom)] drawAtPoint: CGPointMake(0,size.height-cornerCaps.bottom)]; //bottomleft 
    [[self cutout: CGRectMake(self.size.width-cornerCaps.right,self.size.height-cornerCaps.bottom,cornerCaps.right,cornerCaps.bottom)] drawAtPoint: CGPointMake(size.width-cornerCaps.right,size.height-cornerCaps.bottom)]; //bottomright 

    [[self cutout: CGRectMake(cornerCaps.left,0,self.size.width-cornerCaps.left-cornerCaps.right,cornerCaps.top)] 
drawInRect: CGRectMake(cornerCaps.left,0,size.width-cornerCaps.left-cornerCaps.right,cornerCaps.top)]; //top 

    [[self cutout: CGRectMake(0,cornerCaps.top,cornerCaps.left,self.size.height-cornerCaps.top-cornerCaps.bottom)] 
drawInRect: CGRectMake(0,cornerCaps.top,cornerCaps.left,size.height-cornerCaps.top-cornerCaps.bottom)]; //left 

    [[self cutout: CGRectMake(cornerCaps.left,self.size.height-cornerCaps.bottom,self.size.width-cornerCaps.left-cornerCaps.right,cornerCaps.bottom)] 
drawInRect: CGRectMake(cornerCaps.left,size.height-cornerCaps.bottom,size.width-cornerCaps.left-cornerCaps.right,cornerCaps.bottom)]; //bottom 

    [[self cutout: CGRectMake(self.size.width-cornerCaps.right,cornerCaps.top,cornerCaps.right,self.size.height-cornerCaps.top-cornerCaps.bottom)] 
drawInRect: CGRectMake(size.width-cornerCaps.right,cornerCaps.top,cornerCaps.right,size.height-cornerCaps.top-cornerCaps.bottom)]; //right 

    [[self cutout: CGRectMake(cornerCaps.left,cornerCaps.top,self.size.width-cornerCaps.left-cornerCaps.right,self.size.height-cornerCaps.top-cornerCaps.bottom)] 
drawInRect: CGRectMake(cornerCaps.left,cornerCaps.top,size.width-cornerCaps.left-cornerCaps.right,size.height-cornerCaps.top-cornerCaps.bottom)]; //interior 

    UIImage *rslt = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return [rslt resizableImageWithCapInsets: cornerCaps]; 
} 

@end 

Answer 4

UIImage *image = [UIImage imageNamed:@"img_loginButton.png"]; 
    UIEdgeInsets edgeInsets; 
    edgeInsets.left = 0.0f; 
    edgeInsets.top = 0.0f; 
    edgeInsets.right = 5.0f; //Assume 5px will be the constant portion in your image 
    edgeInsets.bottom = 0.0f; 
    image = [image resizableImageWithCapInsets:edgeInsets]; 
//Use this image as your controls image 

Answer 5

स्विफ्ट 3.0 विक्की के जवाब का संस्करण।

var imageInset:UIEdgeInsets = UIEdgeInsets() 
     imageInset.left = 10.0 
     imageInset.top = 10.0 
     imageInset.bottom = 10.0 
     imageInset.right = 10.0 
     self.myImageView.image = myimage.resizableImage(withCapInsets: imageInset)