oc-8.quartz2d Core points

Brief introduction

• Role

• Draw
• Drawing: lines \ triangles \ rectangles \ Circles \ Arcs, etc.
• Draw text
• Draw \ Generate picture (image)
• Read \ Generate PDF
• \ crop a picture
• Custom UI controls (typically controls with more complex internal structures)
• Most of the controls in Uikit are drawn by the system
• Matrix operation (causes all paths in the drawing to the drawing to be changed)
• Scaling
• Rotating
• Translation

• Brief introduction

  • Quartz2d is part of the core graphic framework, which is a two-dimensional drawing engine that is directed to layer (layers), typically gets the context in the-drawrect: method, draws the content that needs to be drawn into the graphics context, renders the layer to the control, and finally closes the graphics context.
  • -(void) DrawRect: (cgrect) Rect, the method will only be called once when the interface is about to be displayed, to call the redraw method if called (void) Setneedsdisplay

Common drawing operations

• Draw a line (three methods)

  • Draw a line by adding a path, and finally the context in which the path is rendered

  • Open context

    • Cgcontextref context = Uigraphicsgetcurrentcontext ()

  • Describe the path you want to draw

    • Create path
      Cgmutablepathref cgpathcreatemutable (void)
    • Set the starting point
      void Cgpathmovetopoint (cgmutablepathref path, const cgaffinetransform *m, CGFloat x, cgfloat y)
    • Connection
      void Cgpathaddlinetopoint (cgmutablepathref path, const cgaffinetransform *m, CGFloat x, cgfloat y)

  • To add a path to the context

    • void Cgcontextaddpath (cgcontextref context, cgpathref path)

  • Render context

    • void Cgcontextstrokepath (Cgcontextref c)
  • Draw straight lines directly in the context

  • Open context

    • Cgcontextref context = Uigraphicsgetcurrentcontext ()

  • Describe the path you want to draw

    • Set the starting point
      void Cgcontextmovetopoint (Cgcontextref C, CGFloat x, cgfloat y)
    • Connection
      void Cgcontextaddlinetopoint (Cgcontextref C, CGFloat x, cgfloat y)

  • Render context

    • void Cgcontextstrokepath (Cgcontextref c)
  • Draw a line through Bethel

  • Common Bethel Path (most common path)

    • (Uibezierpath *) Bezierpath

  • Set the starting point

    • (void) moveToPoint: (cgpoint) point

  • Connection

    • (void) Addlinetopoint: (cgpoint) point

  • Rendering

    • (void) Stroke

• Drawing curves

  • Get context
  • Cgcontextref uigraphicsgetcurrentcontext (void)
  • Draw Path
  • Set the starting point
    void Cgcontextmovetopoint (Cgcontextref C, CGFloat x, cgfloat y)
  • Connection
    void Cgcontextaddquadcurvetopoint (Cgcontextref C, CGFloat CPX, CGFloat cpy, CGFloat x, cgfloat y)
  • Render context
    void Cgcontextstrokepath (Cgcontextref c)

• Draw arcs (via Bethel Path)

  • Create Bethel Path
  • + (Uibezierpath *) Bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius startangle: (cgfloat) startangle Endangle: (cgfloat) Endangle clockwise: (BOOL) clockwise
  • -(void) stroke

• Draw a pie chart

  • Ideas:
    1) The pie chart is actually completed by adding two lines on the basis of the arc.
  • Implementation steps

  • Drawing arcs with Bethel paths

    • + (Uibezierpath *) Bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius startangle: (cgfloat) startangle Endangle: (cgfloat) Endangle clockwise: (BOOL) clockwise

  • Add a line to enclose the path

    • Add a line from the end of the path to the center of the arc
    • -(void) Addlinetopoint: (cgpoint) point
    • The line from the beginning of the path to the center of the arc is automatically added
      The call-(void) Fill method is automatically added

  • Set Fill Color

    • -(void) Set, this method is a method of the Uicolor object that sets the color of the context fill or render

  • Fill and close paths and render

    • -(void) Fill, call the method through the Bethel path

• Draw a bar chart

  • Ideas
    1) The histogram can be drawn directly through the Bethel Path
  • Implementation steps

  • Create Bethel Path

    • + (Uibezierpath *) Bezierpathwithrect: (cgrect) rect

  • Set Fill Color

    • -(void) Set, this method is a method of the Uicolor object that sets the color of the fill or render in the context

  • Fill and close paths and render

    • -(void) Fill

• Draw text

  • idea

  • NSString Classification Nsstringdrawing implements the method of drawing the NSString object

    • -(void) Drawatpoint: (cgpoint) POI NT Withattributes: (Nsdictionary *) Attrs, starting at a point to draw the text
    • -(void) Drawinrect: (cgrect) rect withattributes: ( Nsdictionary *) Attrs, drawing text within a rect area
  • in drawing text Yes, you can also set its properties through the Attrs parameter
  • implementation steps
  • Create a NSString object /li>

  • To set the Text property (its property does not exist in a dictionary, to set the corresponding property by the specified key)

    • set text color
      Nsforegroundcolorattributename
    • Set Place font
      Nsfontattributename
    • set width when rendering
      nsstrokewidthattributename
    • set colors for rendering
      Nsstrokecolorattributename
    • Setting background properties
      Nsshadowattributename
      Setting background color: Shadowcolor (uicolor)
      Blur attribute: Shadowblurradius (cgfloat)
      Offset: shadowoffset

  • Drawing text

    • -(void) Drawinrect: (CG Rect) Rect withattributes: (nsdictionary *) attrs
    • -(void) Drawatpoint: (cgpoint) point withattributes: ( Nsdictionary *) Attrs, if you use this method, the text will be displayed in a single line

• Drawing pictures

  • Ideas
    Direct invocation of the UIImage object method for drawing
  • Implementation steps
  • Create a UIImage object
  • Creating a drawing area
  • Set content beyond the drawing area to be cut off
    Uirectclip (CGRect rect)

  • Drawing pictures

    • -(void) Drawaspatterninrect: (cgrect) Rect, tiled to display the picture, covered with the entire drawing area (rect)
    • -(void) Drawatpoint: (Cgpoint) point, showing a picture that is the same size as the original image
    • -(void) Drawinrect: (cgrect) rect, picture stretched, size equal to rect
    • -(void) Drawatpoint: (cgpoint) point blendmode: (cgblendmode) Blendmode Alpha: (cgfloat) Alpha

---restore content ends---

Brief introduction

• Role

  • Draw
  • Drawing: lines \ triangles \ rectangles \ Circles \ Arcs, etc.
  • Draw text
  • Draw \ Generate picture (image)
  • Read \ Generate PDF
  • \ crop a picture
  • Custom UI controls (typically controls with more complex internal structures)
  • Most of the controls in Uikit are drawn by the system
  • Matrix operation (causes all paths in the drawing to the drawing to be changed)
  • Scaling
  • Rotating
  • Translation

• Brief introduction

  • Quartz2d is part of the core graphic framework, which is a two-dimensional drawing engine that is directed to layer (layers), typically gets the context in the-drawrect: method, draws the content that needs to be drawn into the graphics context, renders the layer to the control, and finally closes the graphics context.
  • -(void) DrawRect: (cgrect) Rect, the method will only be called once when the interface is about to be displayed, to call the redraw method if called (void) Setneedsdisplay

Common drawing operations

• Draw a line (three methods)

  • Draw a line by adding a path, and finally the context in which the path is rendered

  • Open context

    • Cgcontextref context = Uigraphicsgetcurrentcontext ()

  • Describe the path you want to draw

    • Create path
      Cgmutablepathref cgpathcreatemutable (void)
    • Set the starting point
      void Cgpathmovetopoint (cgmutablepathref path, const cgaffinetransform *m, CGFloat x, cgfloat y)
    • Connection
      void Cgpathaddlinetopoint (cgmutablepathref path, const cgaffinetransform *m, CGFloat x, cgfloat y)

  • To add a path to the context

    • void Cgcontextaddpath (cgcontextref context, cgpathref path)

  • Render context

    • void Cgcontextstrokepath (Cgcontextref c)
  • Draw straight lines directly in the context

  • Open context

    • Cgcontextref context = Uigraphicsgetcurrentcontext ()

  • Describe the path you want to draw

    • Set the starting point
      void Cgcontextmovetopoint (Cgcontextref C, CGFloat x, cgfloat y)
    • Connection
      void Cgcontextaddlinetopoint (Cgcontextref C, CGFloat x, cgfloat y)

  • Render context

    • void Cgcontextstrokepath (Cgcontextref c)
  • Draw a line through Bethel

  • Common Bethel Path (most common path)

    • (Uibezierpath *) Bezierpath

  • Set the starting point

    • (void) moveToPoint: (cgpoint) point

  • Connection

    • (void) Addlinetopoint: (cgpoint) point

  • Rendering

    • (void) Stroke

• Drawing curves

  • Get context
  • Cgcontextref uigraphicsgetcurrentcontext (void)
  • Draw Path
  • Set the starting point
    void Cgcontextmovetopoint (Cgcontextref C, CGFloat x, cgfloat y)
  • Connection
    void Cgcontextaddquadcurvetopoint (Cgcontextref C, CGFloat CPX, CGFloat cpy, CGFloat x, cgfloat y)
  • Render context
    void Cgcontextstrokepath (Cgcontextref c)

• Draw arcs (via Bethel Path)

  • Create Bethel Path
  • + (Uibezierpath *) Bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius startangle: (cgfloat) startangle Endangle: (cgfloat) Endangle clockwise: (BOOL) clockwise
  • -(void) stroke

• Draw a pie chart

  • Ideas:
    1) The pie chart is actually completed by adding two lines on the basis of the arc.
  • Implementation steps

  • Drawing arcs with Bethel paths

    • + (Uibezierpath *) Bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius startangle: (cgfloat) startangle Endangle: (cgfloat) Endangle clockwise: (BOOL) clockwise

  • Add a line to enclose the path

    • Add a line from the end of the path to the center of the arc
    • -(void) Addlinetopoint: (cgpoint) point
    • The line from the beginning of the path to the center of the arc is automatically added
      The call-(void) Fill method is automatically added

  • Set Fill Color

    • -(void) Set, this method is a method of the Uicolor object that sets the color of the context fill or render

  • Fill and close paths and render

    • -(void) Fill, call the method through the Bethel path

• Draw a bar chart

  • Ideas
    1) The histogram can be drawn directly through the Bethel Path
  • Implementation steps

  • Create Bethel Path

    • + (Uibezierpath *) Bezierpathwithrect: (cgrect) rect

  • Set Fill Color

    • -(void) Set, this method is a method of the Uicolor object that sets the color of the fill or render in the context

  • Fill and close paths and render

    • -(void) Fill

• Draw text

  • idea

  • NSString Classification Nsstringdrawing implements the method of drawing the NSString object

    • -(void) Drawatpoint: (cgpoint) POI NT Withattributes: (Nsdictionary *) Attrs, starting at a point to draw the text
    • -(void) Drawinrect: (cgrect) rect withattributes: ( Nsdictionary *) Attrs, drawing text within a rect area
  • in drawing text Yes, you can also set its properties through the Attrs parameter
  • implementation steps
  • Create a NSString object /li>

  • To set the Text property (its property does not exist in a dictionary, to set the corresponding property by the specified key)

    • set text color
      Nsforegroundcolorattributename
    • Set Place font
      Nsfontattributename
    • set width when rendering
      nsstrokewidthattributename
    • set colors for rendering
      Nsstrokecolorattributename
    • Setting background properties
      Nsshadowattributename
      Setting background color: Shadowcolor (uicolor)
      Blur attribute: Shadowblurradius (cgfloat)
      Offset: shadowoffset

  • Drawing text

    • -(void) Drawinrect: (CG Rect) Rect withattributes: (nsdictionary *) attrs
    • -(void) Drawatpoint: (cgpoint) point withattributes: ( Nsdictionary *) Attrs, if you use this method, the text will be displayed in a single line

• Drawing pictures

  • Ideas
    Direct invocation of the UIImage object method for drawing
  • Implementation steps
  • Create a UIImage object
  • Creating a drawing area
  • Set content beyond the drawing area to be cut off
    Uirectclip (CGRect rect)

  • Drawing pictures

    • -(void) Drawaspatterninrect: (cgrect) Rect, tiled to display the picture, covered with the entire drawing area (rect)
    • -(void) Drawatpoint: (Cgpoint) point, showing a picture that is the same size as the original image
    • -(void) Drawinrect: (cgrect) rect, picture stretched, size equal to rect
    • -(void) Drawatpoint: (cgpoint) point blendmode: (cgblendmode) Blendmode Alpha: (cgfloat) Alpha

oc-8.quartz2d Core points