Path to the IOS 2D drawing (Quartz 2D) (stroke,fill,clip,subpath,blend)

stroke-Strokes

Factors that affect strokes

• The width of the line-cgcontextsetlinewidth
• How the intersection line is handled-cgcontextsetlinejoin
• How to handle the top of the line-cgcontextsetlinecap
• Further limiting the way the intersection is handled-cgcontextsetmiterlimit
• Do you want dashed-line dash pattern
• Color Control-cgcontextsetstrokecolorspace
• Brush Color-cgcontextsetstrokecolor/cgcontextsetstrokecolorwithcolor
• Stroke Mode-cgcontextsetstrokepattern

Dashed lines, brush colors, cross processing, top processing, line width in the previous article has been said, here no longer repeat.

Cgcontextsetmiterlimit

If the current intersection drawing mode is Kcglinejoinmiter (cgcontextsetlinejoin), Quartz determines that the line join is bevel or miter based on the miter value set. The specific pattern is: Divide the length of the miter by the width of the line, and if it is less than the Mitetlimit value set, the join style is bevel;

Look at the three join effects first

As an example, I understand.

    CGContextMoveToPoint(context,10,10);    CGContextAddLineToPoint(context, 50, 50); CGContextAddLineToPoint(context, 10, 90); CGContextSetLineWidth(context, 10.0); CGContextSetLineJoin(context, kCGLineJoinMiter); CGContextSetMiterLimit(context,20.0); CGContextStrokePath(context);

Effect

Set Miter to 1, the effect is as follows

Cgcontextsetstrokecolorspace and pattern will be elaborated in a later article, here for the time being omitted first

fill-Fill

When quartz fills, it is assumed that Subpath is closed and then populated according to the rules. There are two kinds of rules:

Nonzero winding number rule. Along the current point, draw a line outside the area, check the intersection, if the intersection is from left to right, then add one, right to left, minus one. If the result is not 0, it is drawn. See this link

Even-odd rule, along the current point, takes a line outside the area, checks the intersecting path, the even number is drawn, and the odd number is not drawn.
The specific effect is as follows

Related functions

• Cgcontexteofillpath-Fill with even-odd rule
• Cgcontextfillpath-populated with nonzero winding number rule method
• Cgcontextfillrect/cgcontextfillrects-fills the path within the specified rectangular region
• Cgcontextfillellipseinrect-Fill Ellipse
• Cgcontextdrawpath-Draw Current path (based on parameter Stroke/fill)

clip-Cutting

As the name implies, only the specified area is drawn according to path and is not drawn outside the region.
For example, to intercept a circular area
Effect

Note that the cut is related to the state, assuming that the cut is drawn later in the context of the cut.
If you want to save the State, refer to the press stack and the stack in this article

-(void) DrawRect:(CGRect) Rect {cgcontextref context = Uigraphicsgetcurrentcontext (); Cgcontextbeginpath (context);Cgcontextaddarc (Context,50,50,20,0, M_pi *2,true); Cgcontextclosepath (context); Cgcontextclip (context);Cgcontextsetfillcolorwithcolor (context, [Uicolor Lightgraycolor]. Cgcolor);Cgcontextfillrect (context, rect);New CodeCgcontextsetstrokecolorwithcolor (context, [Uicolor Whitecolor]. Cgcolor);cgcontextmovetopoint (context,Ten,10); cgcontextaddlinetopoint (context,  50); cgcontextaddlinetopoint (context, Ten, 90); cgcontextsetlinewidth (context, 10.0); cgcontextsetlinejoin (context, kcglinejoinmiter); cgcontextsetmiterlimit (context,20.0); Cgcontextstrokepath (context);} -(instancetype) initwithframe:(CGRect) frame{if (self = [Super Initwithframe:frame]) {self.opaque = NO;} retur n Self;}                

Related functions

• Cgcontextclip cut according to nonzero winding number rule rule
• Cgcontexteoclip cut according to even-odd rules
• Cgcontextcliptorect cutting to the specified rectangle
• Cgcontextcliptorects cutting to a specified rectangular group
• Cgcontextcliptomask Cut to mask

Subpath-sub-path

Very simply, after Stroke/fill or Cgcontextbeginpath/cgcontextclosepath, a new sub-path is opened.

Attention:

Cgcontextclosepath, the first point and the last point are connected

blend-Blending Mode

In quartz, the default color blending mode uses the following formula
result = (Alpha * foreground) + (1-alpha) * background

You can use Cgcontextsetblendmode to set different color blending modes, and note that setting blend is related to the context drawing state , and all state-related settings have to think about the state stack (if you don't understand this sentence, Look at my two previous articles).

First look at the examples in the official documentation, and finally I'll write an example of myself.
Background

ForeGround

Normal Blend Mode

Effect

Multiply Blend Mode

The cross-section will appear darker, multiplying with the upper and lower layers, at least as dark as a layer.

Screen Blend Mode

The cross section is brighter, the upper reverse and the lower reverse multiply, at least as bright as one

There are more blend modes, which are not listed here, see the official documentation

Path to the IOS 2D drawing (Quartz 2D) (stroke,fill,clip,subpath,blend)