Back to Skia

SkPath Overview

site/docs/user/api/SkPath_Overview.md

latest8.0 KB
Original Source

<a href='https://api.skia.org/classSkPath.html'>Path</a> contains <a href='undocumented#Line'>Lines</a> and <a href='undocumented#Curve'>Curves</a> which can be stroked or filled. <a href='#Contour'>Contour</a> is composed of a series of connected <a href='undocumented#Line'>Lines</a> and <a href='undocumented#Curve'>Curves</a>. <a href='https://api.skia.org/classSkPath.html'>Path</a> may contain zero, one, or more <a href='#Contour'>Contours</a>. Each <a href='undocumented#Line'>Line</a> and <a href='undocumented#Curve'>Curve</a> are described by Verb, <a href='https://api.skia.org/structSkPoint.html'>Points</a>, and optional <a href='#Path_Conic_Weight'>Path_Conic_Weight</a>.

Each pair of connected <a href='undocumented#Line'>Lines</a> and <a href='undocumented#Curve'>Curves</a> share common <a href='https://api.skia.org/structSkPoint.html'>Point</a>; for instance, <a href='https://api.skia.org/classSkPath.html'>Path</a> containing two connected <a href='undocumented#Line'>Lines</a> are described the <a href='#Path_Verb'>Path_Verb</a> sequence: <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kMove_Verb'>kMove_Verb</a>, <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kLine_Verb'>kLine_Verb</a>, <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kLine_Verb'>kLine_Verb</a>; and a <a href='https://api.skia.org/structSkPoint.html'>Point</a> sequence with three entries, sharing the middle entry as the end of the first <a href='undocumented#Line'>Line</a> and the start of the second <a href='undocumented#Line'>Line</a>.

<a href='https://api.skia.org/classSkPath.html'>Path</a> components <a href='undocumented#Arc'>Arc</a>, <a href='https://api.skia.org/classSkPath.html#af037025a1adad16072abbbcd83b621f2'>Rect</a>, <a href='#RRect'>Round_Rect</a>, <a href='undocumented#Circle'>Circle</a>, and <a href='undocumented#Oval'>Oval</a> are composed of <a href='undocumented#Line'>Lines</a> and <a href='undocumented#Curve'>Curves</a> with as many <a href='https://api.skia.org/classSkPath.html#ac36f638ac96f3428626e993eacf84ff0'>Verbs</a> and <a href='https://api.skia.org/structSkPoint.html'>Points</a> required for an exact description. Once added to <a href='https://api.skia.org/classSkPath.html'>Path</a>, these components may lose their identity; although <a href='https://api.skia.org/classSkPath.html'>Path</a> can be inspected to determine if it describes a single <a href='https://api.skia.org/classSkPath.html#af037025a1adad16072abbbcd83b621f2'>Rect</a>, <a href='undocumented#Oval'>Oval</a>, <a href='#RRect'>Round_Rect</a>, and so on.

Example

<div><fiddle-embed-sk name="93887af0c1dac49521972698cf04069c"><div><a href='https://api.skia.org/classSkPath.html'>Path</a> contains three <a href='#Contour'>Contours</a>: <a href='undocumented#Line'>Line</a>, <a href='undocumented#Circle'>Circle</a>, and <a href='https://api.skia.org/classSkPath.html#ad75d5a934476ac6543d6d7ddd8dbb90a'>Quad</a>. <a href='undocumented#Line'>Line</a> is stroked but not filled. <a href='undocumented#Circle'>Circle</a> is stroked and filled; <a href='undocumented#Circle'>Circle</a> stroke forms a loop. <a href='https://api.skia.org/classSkPath.html#ad75d5a934476ac6543d6d7ddd8dbb90a'>Quad</a> is stroked and filled, but since it is not closed, <a href='https://api.skia.org/classSkPath.html#ad75d5a934476ac6543d6d7ddd8dbb90a'>Quad</a> does not stroke a loop. </div></fiddle-embed-sk></div>

<a href='https://api.skia.org/classSkPath.html'>Path</a> contains a <a href='#Path_Fill_Type'>Path_Fill_Type</a> which determines whether overlapping <a href='#Contour'>Contours</a> form fills or holes. <a href='#Path_Fill_Type'>Path_Fill_Type</a> also determines whether area inside or outside <a href='undocumented#Line'>Lines</a> and <a href='undocumented#Curve'>Curves</a> is filled.

Example

<div><fiddle-embed-sk name="36a995442c081ee779ecab2962d36e69"><div><a href='https://api.skia.org/classSkPath.html'>Path</a> is drawn filled, then stroked, then stroked and filled. </div></fiddle-embed-sk></div>

<a href='https://api.skia.org/classSkPath.html'>Path</a> contents are never shared. Copying <a href='https://api.skia.org/classSkPath.html'>Path</a> by value effectively creates a new <a href='https://api.skia.org/classSkPath.html'>Path</a> independent of the original. Internally, the copy does not duplicate its contents until it is edited, to reduce memory use and improve performance.

<a name='Contour'></a>


<a href='#Contour'>Contour</a> contains one or more <a href='https://api.skia.org/classSkPath.html#ac36f638ac96f3428626e993eacf84ff0'>Verbs</a>, and as many <a href='https://api.skia.org/structSkPoint.html'>Points</a> as are required to satisfy <a href='#Path_Verb_Array'>Path_Verb_Array</a>. First <a href='#Path_Verb'>Path_Verb</a> in <a href='https://api.skia.org/classSkPath.html'>Path</a> is always <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kMove_Verb'>kMove_Verb</a>; each <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kMove_Verb'>kMove_Verb</a> that follows starts a new <a href='#Contour'>Contour</a>.

Example

<div><fiddle-embed-sk name="0374f2dcd7effeb1dd435205a6c2de6f"><div>Each <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_moveTo'>moveTo</a> starts a new <a href='#Contour'>Contour</a>, and content after <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_close'>close()</a> also starts a new <a href='#Contour'>Contour</a>. Since <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_conicTo'>conicTo</a> is not preceded by <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_moveTo'>moveTo</a>, the first <a href='https://api.skia.org/structSkPoint.html'>Point</a> of the third <a href='#Contour'>Contour</a> starts at the last <a href='https://api.skia.org/structSkPoint.html'>Point</a> of the second <a href='#Contour'>Contour</a>. </div></fiddle-embed-sk></div>

If final <a href='#Path_Verb'>Path_Verb</a> in <a href='#Contour'>Contour</a> is <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kClose_Verb'>kClose_Verb</a>, <a href='undocumented#Line'>Line</a> connects <a href='#Path_Last_Point'>Path_Last_Point</a> in <a href='#Contour'>Contour</a> with first <a href='https://api.skia.org/structSkPoint.html'>Point</a>. A closed <a href='#Contour'>Contour</a>, stroked, draws <a href='#Paint_Stroke_Join'>Paint_Stroke_Join</a> at <a href='#Path_Last_Point'>Path_Last_Point</a> and first <a href='https://api.skia.org/structSkPoint.html'>Point</a>. Without <a href='https://api.skia.org/classSkPath.html'>SkPath</a>::<a href='#SkPath_kClose_Verb'>kClose_Verb</a> as final Verb, <a href='#Path_Last_Point'>Path_Last_Point</a> and first <a href='https://api.skia.org/structSkPoint.html'>Point</a> are not connected; <a href='#Contour'>Contour</a> remains open. An open <a href='#Contour'>Contour</a>, stroked, draws <a href='#Paint_Stroke_Cap'>Paint_Stroke_Cap</a> at <a href='#Path_Last_Point'>Path_Last_Point</a> and first <a href='https://api.skia.org/structSkPoint.html'>Point</a>.

Example

<div><fiddle-embed-sk name="7a1f39b12d2cd8b7f5b1190879259cb2"><div><a href='https://api.skia.org/classSkPath.html'>Path</a> is drawn stroked, with an open <a href='#Contour'>Contour</a> and a closed <a href='#Contour'>Contour</a>. </div></fiddle-embed-sk></div>

<a name='Contour_Zero_Length'></a>


<a href='#Contour'>Contour</a> length is distance traveled from first <a href='https://api.skia.org/structSkPoint.html'>Point</a> to <a href='#Path_Last_Point'>Path_Last_Point</a>, plus, if <a href='#Contour'>Contour</a> is closed, distance from <a href='#Path_Last_Point'>Path_Last_Point</a> to first <a href='https://api.skia.org/structSkPoint.html'>Point</a>. Even if <a href='#Contour'>Contour</a> length is zero, stroked <a href='undocumented#Line'>Lines</a> are drawn if <a href='#Paint_Stroke_Cap'>Paint_Stroke_Cap</a> makes them visible.

Example

<div><fiddle-embed-sk name="62848df605af6258653d9e16b27d8f7f"></fiddle-embed-sk></div>