Quartz drawing Use examples

Overview

This chapter focuses on drawing quartz using iOS, including simple lines, pictures, text, circles, rectangles, and Bezier curves, including some basic methods of use.

results show

Process Overview

1. The drawing appears to be drawn directly inside the UIView class, and no attempt is drawn in the control class.

2. Create a new class based on UIView, found that the new class automatically generated the DrawRect method, directly in this method to write code can be automatically called

3. Note that you draw the path first, and then use the paint function (eg. Cgcontextdrawpath,cgcontextfillpath, etc.) to be displayed on the interface.

Main codem files for UIView-based classes

myview.m//customdraw////Created by Arbboter on 14/12/18.//Copyright (c) 2014 Arbboter. All rights reserved.//#import "MyView.h" @interface MyView () @property (nonatomic, ReadWrite) CGRect myframe;@    End@implementation myview-(void) setmyframe{cgfloat x = self.frame.origin.x;    CGFloat y = self.frame.origin.y;    CGFloat w = self.frame.size.width;        CGFloat h = self.frame.size.height;    x = x + 5;    y = y + 20;    W = w-10;        h = h-25; _myframe = CGRectMake (x, Y, W, h);}        /** The method is UIView built-in method */-(void) DrawRect: (cgrect) rect{//Set drawing area [self setmyframe];    /** Paint */nsstring* FilePath = [[NSBundle mainbundle] pathforresource:@ "sad" oftype:@ "jpeg"];    uiimage* image = [[UIImage alloc] initwithcontentsoffile:filepath];    [Image Drawatpoint:cgpointmake (self.frame.origin.x, SELF.FRAME.ORIGIN.Y)];    [Image release];        image = Nil;    /** Write (set font size and color) */nsarray* array = [Uifont familynames]; uifont* font = [Uifont Fontwithname:[arrAy objectatindex:35] size:42]; nsdictionary* dict = [[Nsdictionary alloc] Initwithobjectsandkeys:font, Nsfontattributename, [UIC    Olor Bluecolor], nsforegroundcolorattributename, nil];    nsstring* title = [[NSString alloc] initwithstring:@ "positive cosine curve"];    [Title Drawatpoint:cgpointmake (withattributes:dict)];    [Dict release];            Dict = nil;    CGFloat x = self.myframe.origin.x;    CGFloat y = self.myframe.origin.y;    CGFloat w = self.myFrame.size.width;        CGFloat h = self.myFrame.size.height;        Cgcontextref CTX = Uigraphicsgetcurrentcontext ();    /** = = Draw rectangular Box = = *//** set PATH */Cgcontextmovetopoint (CTX, x, y);    Cgcontextaddlinetopoint (CTX, x + W, y);    Cgcontextaddlinetopoint (CTX, x + W, y + h);    Cgcontextaddlinetopoint (CTX, x, y + h);        Cgcontextaddlinetopoint (CTX, x, y);        /** Set Paint color */[[Uicolor Blackcolor] setstroke];        /** Set Brush Size */cgcontextsetlinewidth (CTX, 2.0); /** based on the path setDraw path */Cgcontextstrokepath (CTX);    /** = = Draw rectangular block = = *//* SET PATH */Cgcontextmovetopoint (CTX, x + w-50, y + 5);    Cgcontextaddlinetopoint (CTX, x + w-10, y + 5);    Cgcontextaddlinetopoint (CTX, x + w-10, y + 45);    Cgcontextaddlinetopoint (CTX, x + w-50, y + 45);    /* You can choose to draw a closed path yourself, or you can use Cgcontextclosepath to automatically draw */#if 0/* Draw a closed path */Cgcontextaddlinetopoint (CTX, x + 5, y + 5); #else    /** automatically draws a closed path */Cgcontextclosepath (CTX); #endif/* Set drawing brush color */[[Uicolor Yellowcolor] setstroke];    /* Set Drawing Fill Color */[[Uicolor Redcolor] setfill];        /** Set Brush Size */cgcontextsetlinewidth (CTX, 1.0);    /* Draw by painting * kcgpathfillstroke, fill + stroke * kcgpathfill, fill * kcgpathstroke, stroke */            Cgcontextdrawpath (CTX, Kcgpathfillstroke);    /** = = Draw the bottom border of the circle also = = */cgfloat r1 = 12;    CGFloat r2 = 6;    CGFloat x1 = x + r1 + 2;        CGFloat y1 = y + h-r1-2;   for (CGFloat xmax=x1+r1; xmax < x + W; xmax=x1+r1) {     /** the circle by first drawing a great circle and then drawing the same small circle with the same background color. *//** move to a point on the circumference, or the last point of the current circle and before it will be connected */Cgcontextmovetopoint (CTX, X1+R1,                y1);                /* Draw a big circle path */Cgcontextaddarc (CTX, x1, y1, r1, 0, m_pi*2, 0);        /* Set Color */Cgcontextsetfillcolor (CTX, Cgcolorgetcomponents ([[[Uicolor Bluecolor] cgcolor]));                Cgcontextsetstrokecolor (CTX, Cgcolorgetcomponents ([[[Uicolor Greencolor] cgcolor]);                /** Drawing Graphics */Cgcontextdrawpath (CTX, Kcgpathfillstroke);                /** move to a point on the circumference */Cgcontextmovetopoint (CTX, X1+R2, y1);                /** Draw Small Circle Path */Cgcontextaddarc (CTX, x1, y1, R2, 0, m_pi*2, 0); /** Set the small circle fill color [color value to get the background color using the system's own digital Color picker] */[[Uicolor colorwithred:170.0/255 green:166.0/255 blue:102.0/255 alpha:1.0] Set                Fill];                /** Drawing Graphics */Cgcontextfillpath (CTX);    X1 + = (2*r1+2);    } [self drawcoordinate];    [Self drawsin]; }/** drawing Axis */-(void) drawcoordinate{cgfloat x =self.myframe.origin.x;    CGFloat y = self.myframe.origin.y;    CGFloat w = self.myFrame.size.width;        CGFloat h = self.myFrame.size.height;    /* Coordinate system Origin */cgfloat x1 = x + 5 + 20;        CGFloat y1 = y + h-40;        Cgcontextref CTX = Uigraphicsgetcurrentcontext ();    /** set the drawing color */Cgcontextsetstrokecolorwithcolor (CTX, [[Uicolor Blackcolor] cgcolor]);        Cgcontextsetlinewidth (CTX, 3.0);    /** set the standard font *//** write (set font size and color) */nsarray* array = [Uifont familynames];    uifont* font = [Uifont fontwithname:[array objectatindex:1] size:12]; nsdictionary* dict = [[Nsdictionary alloc] Initwithobjectsandkeys:font, Nsfontattributename, [UIC    Olor Redcolor], nsforegroundcolorattributename, nil];        /** First Draw coordinates */Cgcontextmovetopoint (CTX, x1, y1);    /** Horizontal Line */Cgcontextaddlinetopoint (CTX, x + W, y1);        Cgcontextstrokepath (CTX);    /* Draw Dimensions */cgfloat h1 = 0;    Nsinteger wid = 20; for (Nsinteger x2= x1+wid; X2 < x1 + W;        X2+=WID) {Nsinteger num = (x2-x1)/wid;            if (num%2) {h1 = 4;        Cgcontextsetlinewidth (CTX, 1.0);            } else {H1 = 6;                        Cgcontextsetlinewidth (CTX, 2.0);            nsstring* strnum = [[NSString alloc] initwithformat:@ "%ld", NUM/2];            [Strnum drawatpoint:cgpointmake (x2, y1) withattributes:dict];        [Strnum release];        } cgcontextmovetopoint (CTX, x2, y1-2);        Cgcontextaddlinetopoint (CTX, x2, Y1-H1);    Cgcontextstrokepath (CTX);    }/** Ordinate System */Cgcontextsetstrokecolorwithcolor (CTX, [[[Uicolor Blackcolor] cgcolor]);    Cgcontextsetlinewidth (CTX, 3.0);    Cgcontextmovetopoint (CTX, X1, y1+1.5);    Cgcontextaddlinetopoint (CTX, x1, y);        Cgcontextstrokepath (CTX);        /* Draw dimensioning */for (Nsinteger y2=y1-wid; y2 > y; y2-=wid) {Nsinteger num = (y1-y2)/wid; if (num%2) {H1 = 4;        Cgcontextsetlinewidth (CTX, 1.0);            } else {H1 = 6;                        Cgcontextsetlinewidth (CTX, 2.0);                if (num>1) {nsstring* strnum = [[NSString alloc] initwithformat:@ "%ld", NUM/2];                [Strnum Drawatpoint:cgpointmake (x1-20, y2-6) withattributes:dict];            [Strnum release];        }} cgcontextmovetopoint (CTX, x1+2, y2);        Cgcontextaddlinetopoint (CTX, x1+h1, y2);    Cgcontextstrokepath (CTX);    } [Dict release]; Dict = nil;}    -(void) drawsin{/** uses the quadratic Bezier curve to simulate the sine cosine */cgfloat x = self.myframe.origin.x;    CGFloat y = self.myframe.origin.y;    CGFloat w = self.myFrame.size.width;        CGFloat h = self.myFrame.size.height;    /* Coordinate system Origin */cgfloat x1 = x + 5 + 20;    CGFloat y1 = y + h-40;    CGFloat w1 = 20;        CGFloat H1 = 200;        Cgcontextref CTX = Uigraphicsgetcurrentcontext (); /** sine */cgcontextsEtstrokecolorwithcolor (CTX, [[Uicolor Redcolor] cgcolor]);    CGFloat yshift =-300;        for (CGFloat x2=x1-2*w1; x2<x+w; x2+=2*w1) {H1 *=-1;        Cgcontextmovetopoint (CTX, x2, Y1+yshift);        Cgcontextaddquadcurvetopoint (CTX, X2+W1, Y1-h1+yshift, X2+2*W1, Y1+yshift);    Cgcontextstrokepath (CTX);    }/** Cosine */Cgcontextsetstrokecolorwithcolor (CTX, [[[Uicolor Yellowcolor] cgcolor]);        for (CGFloat x2=x1-w1; x2<x+w; x2+=2*w1) {cgcontextmovetopoint (CTX, x2, Y1+yshift);        Cgcontextaddquadcurvetopoint (CTX, X2+W1, Y1-h1+yshift, X2+2*W1, Y1+yshift);                Cgcontextstrokepath (CTX);    H1 *=-1;    /** add a baseline to the curve *//** Specify the small solid line of the dash and the length of the white space */cgfloat fpdash[] = {5,5};    Cgcontextsetstrokecolorwithcolor (CTX, [[Uicolor Blackcolor] cgcolor]);    Cgcontextsetlinewidth (CTX, 1.0); /** set the draw line format as dashed: parameter meaning * context– This needless to say * phase parameter indicates how many points are skipped when the first dashed line is drawn * lengths– indicates how the dashed line is drawn alternately, above the array Fpdash * C   The length of the ount–lengths array  */Cgcontextsetlinedash (CTX, 0, Fpdash, 2);    Cgcontextmovetopoint (CTX, 0, Y1+yshift);    Cgcontextaddlinetopoint (CTX, X+w, Y1+yshift);        Cgcontextstrokepath (CTX);    /** Text Callout *//** Write (set font size and color) */nsarray* array = [Uifont familynames];    uifont* font = [Uifont fontwithname:[array objectatindex:20] size:16]; nsdictionary* dict = [[Nsdictionary alloc] Initwithobjectsandkeys:font, Nsfontattributename, [UIC    Olor Redcolor], nsforegroundcolorattributename, nil];    nsstring* title = [[NSString alloc] initwithstring:@ "----sinusoidal curve"];    [Title Drawatpoint:cgpointmake (x + w-100, y + h/8) withattributes:dict];    [Dict release];        Dict = nil; Dict = [[Nsdictionary alloc] Initwithobjectsandkeys:font, Nsfontattributename, [Uicolor Yellowcolor], NSForegro    Undcolorattributename, nil];    title = [[NSString alloc] initwithstring:@ "----cosine curve"]; [Title Drawatpoint:cgpointmake (x + w-100, y + h/8+ (+) withattributes:dict];    [Dict release];    Dict = nil; } @end

Project Engineering

Quartz drawing Use examples