IOS पर कोर ग्राफिक्स का परिचय

मुझे हाल ही में पता चला है कि हब पर आईओएस में कोर ग्राफिक्स के साथ काम करने पर कोई लेख नहीं है, जैसे कि मुझे रूसी में ऐसे लेख नहीं मिले। डेवलपर्स के लिए ऐप्पल वेबसाइट पर, आईओएस में 2 डी ग्राफिक्स के साथ काम करने पर प्रलेखन है - कोर ग्राफिक्स फ्रेमवर्क रेफरेंस, जिसमें 400 पेज के प्रलेखन शामिल हैं जो संदर्भ के रूप में उपयोगी है, लेकिन विचारों और ड्राइंग के साथ काम करने का प्रारंभिक विचार नहीं देता है। इसलिए मैंने आईओएस में 2 डी ग्राफिक्स के साथ काम करने पर एक परिचयात्मक लेख लिखने का फैसला किया।

परिचय

यह ज्ञात है कि कोको टच में एपकिट शामिल नहीं है, जो मैक ओएस एक्स में इंटरफेस के साथ काम करने के लिए कक्षाएं और तरीके प्रदान करता है। आईओएस प्लेटफॉर्म पर ऐपकिट के बजाय, 2 डी निम्न-स्तरीय कोर ग्राफिक्स सी फ्रेमवर्क का उपयोग करता है, जो मैक ओएस एक्स एसडीके का भी हिस्सा है, लेकिन इसका उपयोग अक्सर कम किया जाता है। , चूंकि C फ़ंक्शन और मेमोरी के साथ काम करना AppKit में ऑब्जेक्टिव-सी कक्षाओं जितना सुविधाजनक और लचीला नहीं है। इसके अलावा, यह स्पष्ट है कि कोर ग्राफिक्स के साथ काम करते समय आपको अधिक कोड लिखना पड़ता है, जिसे विस्तारित करना और बनाए रखना अधिक कठिन होता है। इस लेख में, हम एक कस्टम दृश्य बनाएंगे और रूपरेखा की क्षमताओं से परिचित होंगे।

शुरुआत हो रही है

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


Our अगला, हमारा दृश्य (Cmd + N) जोड़ें और इसे MyCanvas,

जो एक उद्देश्य-सी वर्ग और UIView का एक उपवर्ग होगा।

सभी "ड्राइंग" विधि में होती है:

- (void)drawRect:(CGRect)rect
{
//
}

याद रखें कि हम कभी भी सीधे-आहरण को वापस नहीं लेते: विधि। हम केवल इस पद्धति को लागू करते हैं, जिसे व्यू इनिशियलाइज़ होने पर निष्पादित किया जाता है।
सामग्री को अद्यतन करने के लिए, जब हमें इस दृश्य या इसके कुछ भाग (अद्यतन) को अद्यतन करने की आवश्यकता होती है, हम UIVIV विधियों का उपयोग करते हैं
-(void)setNeedsDisplay;
-(void)setNeedsDisplayInRect:(CGRect)aRect;
क्रमशः।

ड्राअर: विधि का उपयोग करके एक साधारण वर्ग बनाएं। सभी ड्राइंग एक संदर्भ में जगह लेते हैं, जो निर्धारित करता है कि ड्राइंग कहां है। संदर्भ प्राप्त करने के लिए, UIGraphicsGetCurrentContext C फ़ंक्शन का उपयोग किया जाता है। आईओएस पर, संदर्भ का केंद्र जब ड्राइंग ऊपरी बाईं ओर होता है, और निचले ओएस में नहीं, जैसे मैक ओएस एक्स।

- (void)drawRect:(CGRect)rect
{
// context
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect); // context

CGContextSetRGBFillColor(context, 255, 0, 0, 1);
CGContextFillRect(context, CGRectMake(20, 20, 100, 100));
}

इस मामले में संदर्भ को स्पष्ट करने की आवश्यकता नहीं है, क्योंकि हम अपने ग्राफिक्स को फिर से नहीं बनाएंगे, हालांकि, ड्राइंग से पहले ग्राफिक तत्वों को साफ करने के लिए यह अच्छा अभ्यास है। कृपया ध्यान दें कि सफाई के बाद दृश्य काला हो जाएगा।

CGContextSetRGBFillColor फ़ंक्शन इस संदर्भ के लिए रंग भरता है, और CGContextFillRect फ़ंक्शन एक वर्ग खींचता है।

अब हमारे एप्लिकेशन को सिम्युलेटर (Cmd + R) में चलाएं, और जैसा कि हम देखते हैं, कुछ भी नहीं हुआ। तथ्य यह है कि हमने अपना व्यू नहीं बनाया और इसे पदानुक्रम में नहीं जोड़ा।
व्यू बनाने के दो तरीके हैं, जिसमें कस्टम व्यू - इंटरफ़ेस बिल्डर और सीधे कोड का उपयोग करना शामिल है। IB के लिए, सब कुछ सरल है, खींचें और ड्रॉप द्वारा UIView तत्व जोड़ें और इसे पहचानकर्ता निरीक्षक में कस्टम वर्ग: MyView पर सेट करें।
हमारे दृश्य को मैन्युअल रूप से बनाने के लिए, इसे GraphicsViewController.m में बनाएं:

- (void)viewDidLoad
{
[super viewDidLoad];
MyCanvas *myView = [[MyCanvas alloc] initWithFrame:self.view.bounds];
[self.view addSubview:myView];
}

AddSubview: का उपयोग पदानुक्रम में दृश्य जोड़ने के लिए किया जाता है; निष्कासन को हटाने के लिए किया जाता है: पदानुक्रम से। इस मामले में, पहली विधि पर्यवेक्षक को भेजी जाती है, और दूसरा दृश्य, जिसे हटा दिया जाना चाहिए।

स्मृति के साथ काम करने के बारे में अधिक जानकारी लेख के अंत में चर्चा की जाएगी; यहां मैं ध्यान देता हूं कि जब हम पदानुक्रम में शीर्ष दृश्य से जारी करते हैं, तो हमें ध्यान में रखने की आवश्यकता है, हम इसके सभी साक्षात्कार भी जारी करते हैं, और यदि हम बाद में उनकी ओर मुड़ते हैं, तो एप्लिकेशन क्रैश हो जाएगा।

अब, यदि हम अपना एप्लिकेशन लॉन्च करते हैं, तो हमें 20 बिंदुओं के साथ एक लाल वर्ग दिखाई देगा।
ड्राइंग करते समय, हम अंक (पीटी) का उपयोग करते हैं, न कि पिक्सल (पीएक्स) का, ताकि रेटिना और सामान्य प्रदर्शन के लिए आकार समान हों। पिक्सल के साथ काम करना भी संभव है। किसी विशेष उपकरण के लिए स्क्रीन के प्रकार को निर्धारित करने के लिए, @property CGFloat contentScaleFactor गुण का उपयोग किया जाता है; जो "स्केल" (स्क्रीन पर दिए गए दृश्य के लिए बिंदु में कितने पिक्सेल) देता है। एक नियमित स्क्रीन के लिए मूल्य 2.0 या रेटिना के लिए 1.0 हो सकता है।


अन्य आदिम लोगों के साथ काम करने पर विचार करें:
1) एक ब्लू फिल के साथ एक चक्र CGContextFillEllipseInRect विधि द्वारा बनाया गया है, और एक आयत में फिट बैठता है, जिससे आप दीर्घवृत्त बना सकते हैं।

CGContextSetRGBFillColor(context, 0, 0, 255, 1);
CGContextFillEllipseInRect(context, CGRectMake(30, 140, 80, 80));

2) हरे रंग की रूपरेखा और 3 की एक लाइन मोटाई के साथ एक भरने के बिना एक चक्र, CGContextSetLineWidth विधि का उपयोग करके लाइन की मोटाई निर्धारित की जाती है, और बिना भराव के एक चक्र CGContextStateEllipseInRect विधि का उपयोग करके तैयार किया जाता है।

CGContextSetRGBStrokeColor(context, 0, 255, 0, 1);
CGContextSetLineWidth(context, 3.0);
CGRect circleRect = CGRectMake(140, 20, 100, 100);
CGContextStrokeEllipseInRect(context, circleRect);

3) एक लाल वर्ग में उत्कीर्ण एक त्रिभुज सरणी से बिंदुओं पर खींचा गया है।

CGContextSetRGBStrokeColor(context, 255, 0, 255, 1);
CGPoint points[6] = {CGPointMake(70, 20), CGPointMake(120, 120),
CGPointMake(120, 120), CGPointMake(20, 120),
CGPointMake(20, 120), CGPointMake(70, 20)};
CGContextStrokeLineSegments(context, points, 6);

4) बेज़ियर तख़्ता। इस मामले में, आपको प्रारंभ और समाप्ति बिंदुओं को निर्दिष्ट करने की आवश्यकता है, साथ ही उन बिंदुओं के निर्देशांक भी हैं जो वक्रता को निर्दिष्ट करते हैं। उन लोगों के लिए जो बेज़ियर कर्व्स से परिचित नहीं हैं, एक संक्षिप्त क्रैश कोर्स:

अंकों को अलग-अलग CGPoints के रूप में सेट करें ताकि भ्रमित न हों:

CGPoint bezierStart = {20, 260};
CGPoint bezierEnd = {300, 260};
CGPoint bezierHelper1 = {80, 320};
CGPoint bezierHelper2 = {240, 320};
CGContextBeginPath(context);
CGContextMoveToPoint(context, bezierStart.x, bezierStart.y);
CGContextAddCurveToPoint(context,
bezierHelper1.x, bezierHelper1.y,
bezierHelper2.x, bezierHelper2.y,
bezierEnd.x, bezierEnd.y);
CGContextStrokePath(context);

आइए एक अधिक जटिल तत्व बनाएं, उदाहरण के लिए, एक साइनसॉइड:

CGContextSetRGBStrokeColor(context, 255, 255, 255, 1);
int y;
for(int x=rect.origin.x; x < rect.size.width; x++)
{
y = ((rect.size.height/6) * sin(((x*4) % 360) * M_PI/180)) + 380;
if (x == 0) CGContextMoveToPoint(context, x, y);
else CGContextAddLineToPoint(context, x, y);
}
CGContextStrokePath(context);

5 वीं पंक्ति में, हमने फ़ंक्शन को लंबवत रूप से स्थानांतरित करने के लिए 380 अंक जोड़े।

परिणामस्वरूप, एप्लिकेशन लॉन्च करने के बाद हमारे iPhone की स्क्रीन इस तरह दिखाई देगी:

पाठ के साथ काम करें

पाठ को प्रदर्शित करने का सबसे सुविधाजनक तरीका है UILabel ऑब्जेक्ट का उपयोग करना, जिसमें पाठ को परिवर्तित करने के कई तरीके हैं। हालाँकि, ऐसी स्थितियाँ हैं, जब आपको इन-रेक्टक्ट पद्धति में पाठ को आकर्षित करने की आवश्यकता होती है, उदाहरण के लिए, यदि हम पाठ को घुमाना चाहते हैं।

कोर ग्राफिक्स के साथ ड्राइंग:

char *txt = "My CG text"; // ,
CGContextSelectFont(context, "Helvetica", 18.0, kCGEncodingMacRoman); //
CGContextSetTextDrawingMode(context, kCGTextFill); // : kCGTextFill () kCGTextStroke ()
CGContextShowTextAtPoint(context, 20, 280, txt, strlen(txt)); //

आप फ़ॉन्ट, आकार, प्रदर्शन शैली, मीट्रिक का चयन करने के लिए UIFont ऑब्जेक्ट का उपयोग कर सकते हैं। और [UIFont परिवारनाम] विधि का उपयोग करके, आप उपलब्ध फोंट की एक सरणी प्राप्त कर सकते हैं।

यदि हम UILabel का उपयोग करना चाहते हैं और उसी समय इसे प्रोग्रामेटिक रूप से बना सकते हैं, और इंटरफ़ेस बिल्डर में नहीं, तो हमारे GraphicsViewController.m पर निम्न कोड जोड़ें:

UILabel *scaleNumber = [[UILabel alloc] initWithFrame:CGRectMake(160, 140, 140, 21)]; // , View
scaleNumber.textColor = [UIColor yellowColor]; //
scaleNumber.backgroundColor = [UIColor colorWithWhite:0 alpha:0]; // , ( )
scaleNumber.text = @"Vitaly Ishkulov"; //-
scaleNumber.adjustsFontSizeToFitWidth = YES; // , , , ( , )
[myView addSubview:scaleNumber]; // View
[scaleNumber release]; // , / myView

निष्कर्ष और स्मृति के साथ काम करने के बारे में कुछ शब्द

स्मृति से विचारों को मुक्त करने के लिए, [myView रिलीज़] का उपयोग न करें; इसके बजाय, रिलीज़ऑउटलेट विधि बनाएं:
- (void)releaseOutlets {
self.myView = nil;
}
और हम इस विधि को viewDidUnload और dealloc से कॉल करेंगे:
- (void)viewDidUnload
{
[super viewDidUnload];
[self releaseOutlets];
// Release any retained subviews of the main view.
// eg self.myOutlet = nil;
}
- (void)dealloc
{
[self releaseOutlets];
[super dealloc];
}
थोड़ी अजीब अभिव्यक्ति self.myView = nil; वास्तव में यह स्पष्ट करना आसान है, यदि आप सेटर को देखते हैं, जो हमारे लिए myView कमांड को संश्लेषित करता है:
- (void)setMyView:(MyCanvas *)anObject
{
if (anObject != myView) {
[myView release];
myView = [anObject retain];
}
}
यदि anObject = nil है, तो विधि myView nil के लिए विधि में अंतिम लाइन सेट करती है, और पिछला वाला वर्तमान दृश्य को मेमोरी से मुक्त करता है, जो कि हम करना चाहते थे।

यह कोरग्राफिक्स का संक्षिप्त परिचय बताता है, मुझे उम्मीद है कि यह किसी के लिए उपयोगी होगा।

आगे के अध्ययन के लिए लिंक:
IOS के लिए प्रोग्रामिंग गाइड देखें
कोर ग्राफिक्स फ्रेमवर्क संदर्भ