आईओएस 7-स्टाइल स्क्वार्कल को प्रोग्रामेटिक रूप से

Question

ड्रा करें मैं कोर ग्राफिक्स का उपयोग करके प्रोग्रामिंग रूप से आईओएस 7-शैली आइकन 'स्क्वायरकल' आकार खींचने का एक तरीका ढूंढने की कोशिश कर रहा हूं। मैं नहीं पूछ रहा हूं कि गोलाकार आयताकार कैसे आकर्षित करें।

जो एक नियमित रूप से गोलाकार आयत से थोड़ी अलग है:

यह सटीक सूत्र is readily available है एक squircle एक superelipse है। हालांकि, मैं यह नहीं समझ सकता कि इसका उपयोग कैसे किया जाए, उदाहरण के लिए, एक CGPath, इसे अकेले भरने दें, और इसे आसानी से आकार देने में सक्षम हो। यह सब सूत्र के साथ पूरी तरह सटीक होने के दौरान। कोई उपाय?

Answer 1

उद्धरण विकिपीडिया से: लिंक पोस्ट @millimoose देखें Superellipse

एन = 1/2 के लिए, विशेष रूप से, चार आर्क्स से प्रत्येक एक द्विघात Bézier वक्र द्वारा दो परिभाषित किया गया है कुल्हाड़ियों; नतीजतन, प्रत्येक चाप एक पैराबोला का एक खंड है।

तो बेजियर वक्र का उपयोग करके स्क्वायरकल का अनुमान लगाने का प्रयास क्यों न करें? दोनों घटता (बेजियर और स्क्वायरकल) पैरामीट्रिक समीकरणों द्वारा परिभाषित किए जाते हैं।addCurveToPoint:controlPoint1:controlPoint2:

रिसीवर के पथ के लिए एक घन Bézier वक्र जोड़ता:

UIBezierPath Class विधि है।

नोट: addQuadCurveToPoint:controlPoint: विधि का उपयोग खराब परिणाम देता है - परीक्षण।

मैं इस विधि का इस्तेमाल किया और कहा कि क्या एक परिणाम के रूप हुआ:

red line - गोलाकार आयत, blue line - चौके से आयत बेज़ियर घटता

यदि यह परिणाम रुचि रखता है - ड्राइंग नीचे कोड ।

नोट: अधिक सटीक मिलान प्राप्त करने के लिए चार corner points के निर्देशांक को बदलने के लिए बेजियर वक्र की आवश्यकता हो सकती है (अब वे आयताकार के कोण के अनुरूप हैं जिसमें आकृति अंकित है)।

CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSaveGState(context); 

//set rect size for draw 
float rectSize = 275.; 
CGRect rectangle = CGRectMake(CGRectGetMidX(rect) - rectSize/2, CGRectGetMidY(rect) - rectSize/2, rectSize, rectSize); 

//Rounded rectangle 
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); 
UIBezierPath* roundedPath = [UIBezierPath bezierPathWithRoundedRect:rectangle cornerRadius:rectSize/4.7]; 
[roundedPath stroke]; 

//Rectangle from Fours Bezier Curves 
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); 
UIBezierPath *bezierCurvePath = [UIBezierPath bezierPath]; 

//set coner points 
CGPoint topLPoint = CGPointMake(CGRectGetMinX(rectangle), CGRectGetMinY(rectangle)); 
CGPoint topRPoint = CGPointMake(CGRectGetMaxX(rectangle), CGRectGetMinY(rectangle)); 
CGPoint botLPoint = CGPointMake(CGRectGetMinX(rectangle), CGRectGetMaxY(rectangle)); 
CGPoint botRPoint = CGPointMake(CGRectGetMaxX(rectangle), CGRectGetMaxY(rectangle)); 

//set start-end points 
CGPoint midRPoint = CGPointMake(CGRectGetMaxX(rectangle), CGRectGetMidY(rectangle)); 
CGPoint botMPoint = CGPointMake(CGRectGetMidX(rectangle), CGRectGetMaxY(rectangle)); 
CGPoint topMPoint = CGPointMake(CGRectGetMidX(rectangle), CGRectGetMinY(rectangle)); 
CGPoint midLPoint = CGPointMake(CGRectGetMinX(rectangle), CGRectGetMidY(rectangle)); 

//Four Bezier Curve 
[bezierCurvePath moveToPoint:midLPoint]; 
[bezierCurvePath addCurveToPoint:topMPoint controlPoint1:topLPoint controlPoint2:topLPoint]; 
[bezierCurvePath moveToPoint:midLPoint]; 
[bezierCurvePath addCurveToPoint:botMPoint controlPoint1:botLPoint controlPoint2:botLPoint]; 
[bezierCurvePath moveToPoint:midRPoint]; 
[bezierCurvePath addCurveToPoint:topMPoint controlPoint1:topRPoint controlPoint2:topRPoint]; 
[bezierCurvePath moveToPoint:midRPoint]; 
[bezierCurvePath addCurveToPoint:botMPoint controlPoint1:botRPoint controlPoint2:botRPoint]; 

[bezierCurvePath stroke]; 

CGContextRestoreGState(context); 

Answer 2

यह एक बढ़िया जवाब के बाद से यह कैसे एक superellipse आकर्षित करने के लिए है जो कि तुम क्या कह रहे हैं के दिल में नहीं मिलता है प्रोग्राम के रूप में नहीं है **, लेकिन आप कर सकते हैं:

1. डाउनलोड एसवीजी iOS7 आइकन आकार यहाँ: http://dribbble.com/shots/1127699-iOS-7-icon-shape-PSD
2. यह अपने Xcode प्रोजेक्ट करने के लिए आयात
3. अपनी परियोजना के लिए PocketSVG जोड़ें: https://github.com/arielelkin/PocketSVG

4. लोड एसवीजी, और यह एक UIBezierPath में बदलने का, वहाँ से आप का मूल्यांकन करते और फिर भी बदल सकता है आपको पसंद है:

   PocketSVG *myVectorDrawing = [[PocketSVG alloc] initFromSVGFileNamed:@"iOS_7_icon_shape"]; 
   
   UIBezierPath *myBezierPath = myVectorDrawing.bezier; 
   
   // Apply your transforms here: 
   [myBezierPath applyTransform:CGAffineTransformMakeScale(2.5, 2.5)]; 
   [myBezierPath applyTransform:CGAffineTransformMakeTranslation(10, 50)]; 
   
   CAShapeLayer *myShapeLayer = [CAShapeLayer layer]; 
   myShapeLayer.path = myBezierPath.CGPath; 
   myShapeLayer.strokeColor = [[UIColor redColor] CGColor]; 
   myShapeLayer.lineWidth = 2; 
   myShapeLayer.fillColor = [[UIColor clearColor] CGColor]; 
   
   [self.view.layer addSublayer:myShapeLayer]; 
   

** यह ध्यान देने योग्य है कि आकार वैसे भी एक सटीक superellipse नहीं हो सकता है हो सकता है लायक है: http://i.imgur.com/l0ljVRo.png

Answer 3

यह एक शेडर साथ OpenGL ES में करने के लिए बहुत आसान हो जाएगा। बस एक ट्रैक्टर बनाएं और एक्स और वाई में वर्टेक्स विशेषताओं के रूप में पास करें। टुकड़े शेडर में, समीकरण में एक्स और वाई प्लग करें। यदि परिणाम < = 1 है, तो टुकड़ा आकार के अंदर है। अगर मुझे कुछ खाली समय मिल सकता है तो मैं इसे आजमा सकता हूं और इसे यहां पोस्ट कर सकता हूं।

यदि आप CGPath का उपयोग करना चाहते हैं, तो मुझे लगता है कि कुंजी टी के संदर्भ में एक्स और वाई को पैरामीटर करना है, जो 0 से 2π तक जाती है। फिर नियमित अंतराल पर एक्स और वाई का मूल्यांकन करें। मैं इसे अपने खाली समय में भी समझने की कोशिश करूंगा, लेकिन मेरा गणित जंगली प्रकार का है।

बीटीडब्ल्यू, मुझे यकीन है कि ऐप्पल इस सूत्र का उपयोग कर नहीं है। http://blog.mikeswanson.com/post/62341902567/unleashing-genetic-algorithms-on-the-ios-7-icon