Android Paint Patheffect Detailed

respect for the original, reproduced please indicate the source http://blog.csdn.net/abcdef314159

In the previous description of the use of Android paint, there is a method Setpatheffect (Patheffect effect) is not described in detail, this is a combination of code to introduce, As I said before, there are 6 subcategories of Patheffect Composepatheffect,cornerpatheffect,dashpatheffect,discretepatheffect,pathdashpatheffect, Sumpatheffect, these kinds of code are very small, here first introduced

Cornerpatheffect turns the angle between the segments of the path into rounded corners. constructor, where radius is the radius of rounded corners

    /**     * Transforms geometries that is drawn (either STROKE or FILL styles) by     * Replacing any sharp angles between Line segments into rounded angles of     * The specified radius.     * @param radius Amount to round sharp angles between line segments.     *    /Public Cornerpatheffect (float radius) {        native_instance = nativecreate (RADIUS);    }

Check the code.

public class Patheffectview extends View {private Paint mpaint;private int marging = 82;private Cornerpatheffect mcornerpa Theffect[];p rivate Path mpath[];p ublic patheffectview (context context, AttributeSet Attrs) {Super (context, attrs); init ();} private void Init () {mpaint = new Paint (paint.anti_alias_flag); Mpaint.setcolor (Color.Black); Mpaint.setstyle ( Style.stroke); Mpaint.setstrokewidth (6); mcornerpatheffect = new Cornerpatheffect[8];mpath = new Path[8];for (int i = 0; I & Lt Mpath.length; i++) {Path PATH = new Path ();p ath.moveto (i * marging, marging);p Ath.lineto (+ i * marging,);p Ath.lineto (+ i * m) Arging,;p Ath.lineto (+ i * marging, +);p Ath.lineto (+ i * marging, +); Mpath[i] = Path;mcornerpatheffect[i ] = new Cornerpatheffect (i * 10);}} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Canvas.drawcolor (Color.White); for (int i = 0; i < Mpath.length; i++) {mpaint.setpatheffect (mcornerpatheffect[i]); Canvas.drawpath (Mpath[i], mpaint);}}

Run the result as

Dashpatheffect is mainly used to draw dashed lines. constructor, see note, intervals must be greater than 2,phase is offset

    /**     * The intervals array must contain an even number of entries (>=2), with * The even indices specifying the     "On" intervals, and the odd indices     * Specifying the "off" intervals. Phase is a offset into the intervals     * ARRA Y (mod the sum of all of the intervals). The intervals array     * Controls the length of the dashes. The paint ' s strokewidth controls the     * thickness of the dashes.     * Note:this Patheffect only affects drawing with the paint ' s style are set     * to STROKE or fill_and_stroke. It is ignored if the drawing is do with     * style = = FILL.     * @param intervals array of on and OFF distances     * @param phase offset into the intervals array */public    D Ashpatheffect (float intervals[], float phase) {        if (Intervals.length < 2) {            throw new ArrayIndexOutOfBoundsException ();        }        Native_instance = nativecreate (intervals, phase);    }

Check the code.

public class Patheffectview extends View {private Paint mpaint;private int marging = 82;private Dashpatheffect Mcornerpath Effect[];p rivate Path mpath[];p ublic patheffectview (context context, AttributeSet Attrs) {Super (context, attrs); Init () ;} private void Init () {mpaint = new Paint (paint.anti_alias_flag); Mpaint.setcolor (Color.Black); Mpaint.setstyle ( Style.stroke); Mpaint.setstrokewidth (6); mcornerpatheffect = new Dashpatheffect[8];mpath = new Path[8];for (int i = 0; I &lt ; Mpath.length; i++) {Path PATH = new Path ();p ath.moveto (i * marging, marging);p Ath.lineto (+ i * marging,);p Ath.lineto (+ i * m) Arging,;p Ath.lineto (+ i * marging, +);p Ath.lineto (+ i * marging, +); Mpath[i] = Path;mcornerpatheffect[i ] = new Dashpatheffect (new float[] {1, 2, 4, 8}, 1);}} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Canvas.drawcolor (Color.White); for (int i = 0; i < Mpath.length; i++) {mpaint.setpatheffect (mcornerpatheffect[i]); Canvas.drawpath (Mpath[i], MPaint);}}} 

Run the result as

Here the phase offset is the offset of the specified length of the beginning of the painting, but the total length is still unchanged, let's change it and then see

Mcornerpatheffect[i] = new Dashpatheffect (new float[] {ten, 40,80}, I * 10);

Run results

First draw a solid line length of 10, and then draw a dashed line length of 20, and then draw a solid length of 40, the last draw the length of 80 dashed lines, look at the starting position, each time the beginning is different, because each offset is different, but the total length is constant, because the line is only left and right translation, the length is not reduced See the above line is getting shorter, in fact, this is a coincidence, because the back to the dashed line, can not see. In layman's terms, the starting and ending positions of the line are unchanged, and the line is like an infinitely long rope, and the offset is the distance from the downward (rear) drag of the rope. Let's print a look at the length and we'll know.

for (int i = 0; i < mpath.length; i++) {mpaint.setpatheffect (mcornerpatheffect[i]); Canvas.drawpath (Mpath[i], mPaint); Pathmeasure measure = new Pathmeasure (Mpath[i], false); LOG.D ("wld_________", measure.getlength () + "");}

Look at log, the length is the same, unchanged.

Discretepatheffect cut off the line, Segmentlength is the length of the specified cut, deviation is cut off after the line offset, random, less than or equal to deviation.

    /**     * Chop the path into lines of segmentlength, randomly deviating from the     * original path by deviation.     *    /Public discretepatheffect (float segmentlength, float deviation) {        native_instance = nativecreate ( Segmentlength, deviation);    }

Check the code.

public class Patheffectview extends View {private Paint mpaint;private int marging = 82;private Discretepatheffect Mpathef Fect[];p rivate Path mpath[];p ublic patheffectview (context context, AttributeSet Attrs) {Super (context, attrs); init ();} private void Init () {mpaint = new Paint (paint.anti_alias_flag); Mpaint.setcolor (Color.Black); Mpaint.setstyle ( Style.stroke); Mpaint.setstrokewidth (6); mpatheffect = new Discretepatheffect[8];mpath = new Path[8];for (int i = 0; i < Mpath.length; i++) {Path PATH = new Path ();p ath.moveto (i * marging, marging);p Ath.lineto (+ i * marging,);p Ath.lineto (+ i * m) Arging,;p Ath.lineto (+ i * marging, +);p Ath.lineto (+ i * marging, +); Mpath[i] = path;mpatheffect[i] = NE W Discretepatheffect (Ten, 3 * i);}} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Canvas.drawcolor (Color.White); for (int i = 0; i < Mpath.length; i++) {mpaint.setpatheffect (mpatheffect[i]); Canvas.drawpath (Mpath[i], mpaint);}}

Run results

The first line offset is 0, so I can't see what's changed. Let's change it again, interrupt every length of 1, 3*i is the maximum length of the offset,

Mpatheffect[i] = new Discretepatheffect (1, 3 * i);

Feels a bit like a magnet, let's measure his length.

for (int i = 0; i < mpath.length; i++) {mpaint.setpatheffect (mpatheffect[i]); Canvas.drawpath (Mpath[i], mpaint); Pathmeasure measure = new Pathmeasure (Mpath[i], false); LOG.D ("wld__________", measure.getlength () + "");}

Incredibly, every length is the same, and it hasn't changed at all, as it did before.

Pathdashpatheffect and Dashpatheffect, the difference is that Pathdashpatheffect can draw the path through a custom graphic, first look at his code

    public enum Style {TRANSLATE (0),//!< TRANSLATE the shape to each position ROTATE (1),//!<       Rotate the shape about its center MORPH (2); !< transform each point, and turn lines into curves Style (int value) {Native_style = value        ;    } int Native_style; }/** * Dash the drawn path by stamping it with the specified shape.     This has * applies to drawings when the paint's style is a STROKE or Stroke_and_fill. * If The paint ' s style is FILL and then this effect is ignored.     The paint ' s * strokewidth does not affect the results. * @param shape the path to stamp along * @param advance spacing between each stamp of shape * @param phase Amount To offset before the first shape was stamped * @param style how to transform the shape at each position as it is Stampe d */Public pathdashpatheffect (Path shape, float advance, float phase, style style) {       Native_instance = Nativecreate (Shape.ni (), advance, phase, Style.native_style    );                                           } private static native long Nativecreate (long native_path, float advance, float phase, int native_style);

Shape is a filled shape, the shape can be drawn by itself, advance is the spacing between the graphs, phase is the offset of path, there are 3 kinds of style,translate refers to the shape of a translation to fill the path,rotate will be rotated according to the path of the rotation , morph and rotate similar, but one thing is morph will be in the corner of the connection in a smooth way to connect, look at the code below

public class Patheffectview extends View {private Paint mpaint;private int marging = 82;private Patheffect mpatheffect1;pr Ivate patheffect mpatheffect2;private patheffect mpatheffect3;private Path mpath;public PathEffectView (Context context , AttributeSet Attrs) {Super (context, attrs); init ();} private void Init () {mpaint = new Paint (paint.anti_alias_flag); Mpaint.setstyle (Style.stroke); Mpaint.setstrokewidth (6 ); Mpaint.setcolor (color.red); mPath = new Path (); Mpath.moveto (0, marging); Mpath.lineto (+); Mpath.lineto (400, (Mpath.lineto); Mpath.lineto (800, 1200); Path p = new Path ();p. Addrect (0, 0, p, N, Path.Direction.CCW); mPathEffect1 = new Pathdashpatheffect Aphics. PathDashPathEffect.Style.MORPH); mPathEffect2 = new Pathdashpatheffect (p, 128, 0, Android.graphics.PathDashPathEffect.Style.ROTATE); mPathEffect3 = new Pathdashpatheffect (p, 128, 0, Android.graphics.PathDashPathEffect.Style.TRANSLATE);} @Overrideprotected void OnDraw (canvas canvas) {Super.ondraw (CANVAS); Canvas.drawcolor (Color.White); Mpaint.setpatheffect (MPathEffect1); Canvas.drawpath (MPath, mpaint); Canvas.translate (0); Mpaint.setpatheffect (MPATHEFFECT2); Canvas.drawpath (MPath, Mpaint); Canvas.translate (200, 0); Mpaint.setpatheffect (MPATHEFFECT3); Canvas.drawpath (MPath, Mpaint);}}

Look at the running effect,

Customizing a rectangle, the orientation of the first two rectangles changes with the direction of the path, and the first one transitions in a smooth manner at the junction. The following emphasis on the pathdashpatheffect of several parameters, the first is a custom graphics, this is not much to say, the main analysis of the second and third parameters, the second parameter is the spacing of the graph, this spacing refers to the first shape and the start position of the second graphic spacing, modify the code, All tested with Morph mode.

MPathEffect1 = new Pathdashpatheffect (p, 0, 0,android.graphics.pathdashpatheffect.style.morph); mPathEffect2 = new Pathdashpatheffect (P, N, 0,android.graphics.pathdashpatheffect.style.morph); mPathEffect3 = new Pathdashpatheffect ( P, 228, 0,android.graphics.pathdashpatheffect.style.morph);

Look at the results of the run

The first one is no spacing, the second is equal to the width of the rectangle, so it is just equivalent to the middle of the rectangle is no gap, the last gap. Look at the third parameter, that is, the offset, this and the second parameter, in the middle of 1 to advance, the offset distance is gradually reduced, when the offset is equal to the advance multiples, the offset distance is 0, when the offset is greater than advance, he will be redundant. Let's take a look at the code

private void Init () {mpaint = new Paint (paint.anti_alias_flag); Mpaint.setstyle (Style.stroke); Mpaint.setstrokewidth (6 ); Mpaint.setcolor (color.red); mPath = new Path (); Mpath.moveto (0, marging); Mpath.lineto (+); Mpath.lineto (400, (Mpath.lineto); Mpath.lineto (800, 1200); Path p = new Path ();p. Addrect (0, 0, p, Path.Direction.CCW), MPathEffect1 = new Pathdashpatheffect (P., N, 128,android. Graphics. PathDashPathEffect.Style.MORPH);} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Canvas.drawcolor (Color.White); Mpaint.setpatheffect (MPathEffect1); Canvas.drawpath (MPath, mpaint);}

Look at the results of the operation

We see that there is no offset in modifying the code

MPathEffect1 = new Pathdashpatheffect (p, N, 129,android.graphics.pathdashpatheffect.style.morph);

Look at the results,

We see that the offsets have reached the maximum, in fact the results of 129 and 1 are the same, because 129 to 128 the result of the remainder is also 1, the offset from 1 to 128 increases gradually, the offset distance is gradually reduced, and when the offset is 128, there is no offset. Change the code again.

MPathEffect1 = new Pathdashpatheffect (p, N, 1,android.graphics.pathdashpatheffect.style.morph);

Previously analyzed, when the advance is larger than the size of the custom graphics will appear gap (here is mainly morph this style, when the style is translate, the advance must be greater than the custom shape of the height of the gap will appear, this is also very well understood), So this is going to be a path with no gaps, and there's an offset, let's see

When you change the code,

MPathEffect1 = new Pathdashpatheffect (p, N, 28,android.graphics.pathdashpatheffect.style.morph);

You will see no offset, this is not posted. If you still do not understand, you can also look at the following video Pathdashpatheffect video

Composepatheffect is a combination of the two paths with the characteristics of the combination of the first look at the source code

    /**     * Construct A patheffect whose effect are to apply first the inner effect * and the The     outer patheffect (e.g. Outer (inner (path)).     *    /Public Composepatheffect (Patheffect Outerpe, Patheffect Innerpe) {        native_instance = nativecreate ( Outerpe.native_instance,                                       innerpe.native_instance);    }        private static native long Nativecreate (long Nativeouterpe,                                            long Nativeinnerpe);

He will first show the characteristics of Innerpe, and then increase the effect of Outerpe, we look at the code

public class Patheffectview extends View {private Paint mpaint;private int marging = 82;private patheffect meffects[];p Riv Ate Path mpath;public Patheffectview (context context, AttributeSet Attrs) {Super (context, attrs); init ();} private void Init () {mpaint = new Paint (paint.anti_alias_flag); Mpaint.setstyle (Style.stroke); Mpaint.setstrokewidth (6 ); Mpaint.setcolor (color.red); mPath = new Path (); Mpath.moveto (0, marging); Mpath.lineto (+); Mpath.lineto (400, (Mpath.lineto); Mpath.lineto (800, 1200); Path p = new Path ();p. Addrect (0, 0, p, N, Path.Direction.CCW); meffects = new Patheffect[3];meffects[0] = new Cornerpathe Ffect (meffects[1] = new Dashpatheffect (new float[] {5, 0); meffects[2] = new Composepatheffect (meffects[ 1], meffects[0]);} @Overrideprotected void OnDraw (canvas canvas) {Super.ondraw (canvas), for (int i = 0; i < meffects.length; i++) {Mpaint.s Etpatheffect (Meffects[i]); Canvas.drawpath (MPath, Mpaint); canvas.translate (200, 0);}}

Looking at the results of the operation

The first one is rounded and the second one is dashed, so the third one is rounded to the dotted line. In changing the code, change the position of the combination,

MEFFECTS[2] = new Composepatheffect (Meffects[0], meffects[1]);

Look at the results of the operation

We see that the combination pattern is basically the same, because we first extracted the effect of the second graph, and then the first one, so we can't see the effect, we're changing the code

MEFFECTS[1] = new Dashpatheffect (new float[] {200, 10, 5, 10}, 0);

Looking at the results of the operation

OK, let's take a look at the last Sumpatheffect, which is the equivalent of showing the two effects separately and then combining them. Or simply modify it with the code above

MEFFECTS[1] = new Dashpatheffect (new float[] {5, 0); meffects[2] = new Sumpatheffect (meffects[1], meffects[0 ]);

Look at the effect of the run

OK, so far, all the 6 effects of patheffect have been analyzed. Of course, if you want to make a dynamic effect, you can call the invalidate () method in the OnDraw method, and then change the offset continuously.

Android Paint Patheffect Detailed