高级绘画

Canvas  提供了绘图方法，可以向底层的位图绘制基本图形。
       Paint  也称为"刷子"，Paint可以指定如何将基本图形绘制到位图上。
       Bitmap  绘图的表面。

              Android绘图API支持透明度、渐变填充、圆边矩形和抗锯齿。遗憾的是，由于资源限制，它还 不支持矢量图形，它使用的是传统光栅样式的重新绘图 。
           这种光栅方法的结果是提高了效率，但是改变一个Paint对象不会影响已经画好的基本图形，它只会影响新的元素。

           提示：
           如果你拥有Windows开发背景，那么Android的2D绘图能力大致相当于GDI+的能力。

       1. 可以画什么？

           Canvas类封装了用作绘图表面的位图；它还提供了draw*方法来实现设计。

           下面的列表提供了对可用的基本图形的简要说明，但并没有深入地探讨每一个draw方法的详细内容：

           drawARGB / drawRGB / drawColor    使用单一的颜色填充画布。
           drawArc    在一个矩形区域的两个角之间绘制一个弧。
           drawBitmap    在画布上绘制一个位图。可以通过指定目标大小或者使用一个矩阵来改变目标位图的外观。
           drawBitmapMesh    使用一个mesh(网)来绘制一个位图，它可以通过移动网中的点来操作目标的外观。
           drawCircle    以给定的点为圆心，绘制一个指定半径的圆。
           drawLine(s)    在两个点之间画一条(多条)直线。
           drawOval    以指定的矩形为边界，画一个椭圆。
           drawPaint    使用指定的Paint填充整个Canvas
           drawPath    绘制指定的Path。Path对象经常用来保存一个对象中基本图形的集合。
           drawPicture    在指定的矩形中绘制一个Picture对象。
           drawPosText    绘制指定了每一个字符的偏移量的文本字符串。
           drawRect    绘制一个矩形。
           drawRoundRect    绘制一个圆角矩形。
           drawText    在Canvas上绘制一个文本串。文本的字体、大小和渲染属性都设置在用来渲染文本的Paint对象中。
           drawTextOnPath    在一个指定的path上绘制文本。
           drawVertices    绘制一系列三角形面片，通过一系列顶点来指定它们。

           这些绘图方法中的每一个都需要指定一个Paint对象来渲染它。在下面的部分中，将学习如何创建和修改Paint对象，从而在绘图中完成大部分工作。

       2. 从Paint中完成工作

           Paint类相当于一个笔刷和调色板。它可以选择如何使用上面描述的draw方法来渲染绘制在画布上的基本图形。通过修改Paint对象，可以在绘图的时候控制颜色、样式、字体和特殊效果。最简单地，setColor可以让你选择一个Paint的颜色，而 Paint对象的样式(使用setStyle控制)则可以决定是绘制绘图对象的轮廓(STROKE)，还是只填充每一部分(FILL)，或者是两者都做(STROKE_AND_FILL)

           除了这些简单的控制之外，Paint类还支持透明度，另外，它也可以通过使用各种各样的阴影、过滤器和效果进行修改，从而提供由更丰富的、复杂的画笔和颜料组成的调色板。

           Android SDK包含了一些非常好的实例，它们说明了Paint类中可用的大部分功能。你可以在API demos的graphics子目录中找到它们：

         
sdk root folder]\samples\ApiDemos\src\com\android\samples\graphics

           在下面的部分中，将学习和使用其中的部分功能。这些部分只是简单地罗列了它们能实现的效果(例如渐变和边缘浮雕)，而没有详细地列出所有可能的情况。

       使用透明度

              Android中的所有颜色都包含了一个不透明组件(alpha通道)。
              当创建一个颜色的时候， 可以使用argb或者parseColor方法来定义它的alpha值 ，如下所示：

Java代码：

1.     // 使用红色，并让它50%透明
   
2.     int opacity = 127;
   
3.     int intColor = Color.argb(opacity, 255, 0, 0);
   
4.     int parsedColor = Color.parseColor("#7FFF0000");
   
5. 
   

复制代码

              或者， 也可以使用setAlpha方法来设置已存在的Paint对象的透明度 ：

Java代码：

1.     // 让颜色50%透明
   
2.     int opacity = 127;
   
3.     myPaint.setAlpha(opacity);

复制代码

           创建一个不是100%透明的颜色意味着，使用它绘制的任何基本图形都将是部分透明的--也就是说，在它下面绘制的所有基本图形都是部分可见的。

           可以在任何使用了颜色的类或者方法中使用透明效果，包括Paint、Shader和Mask Filter。

       Shader介绍

           Shader类的派生类可以创建允许使用多种固体颜色填充绘图对象的Paint。

           对Shader最常见的使用是定义渐变填充；渐变是在2D图像中添加深度和纹理的最佳方式之一。Android包含了一个Bitmap Shader和一个Compose Shader，同时，还包含了三个渐变的Shader。

       图中从左到右依次代表的是LinearGradient、RadialGradient和 SweepGradient.

提示：

           没有包含的是ComposerShader，它可以创建多个Shader和BitmapShader的组合，从而可以在一个位图图像的基础上创建一个绘图刷。

            要在绘图的时候使用一个Shader，可以使用setShader方法将其应用到一个Paint中 ，你使用这个Paint所绘制的任何东西都将使用你指定的Shader进行填充，而不是使用Paint本身的颜色进行填充。如下面的代码所示：
           Paint shaderPaint = new Paint();   
           shaderPaint.setShader(myLinearGradient);


定义渐变Shader

           如上所示，使用渐变Shader可以让你使用交替改变的颜色来填充图片；你可以将颜色渐变定义为两种颜色的简单交替，如下所示：

java代码：

1.     int colorFrom = Color.BLACK;
   
2.     int colorTo = Color.WHITE;
   
3.     LinearGradient linearGradientShader = new LinearGradient(x1, y1, x2, y2, colorFrom, colorTo, TileMode.CLAMP);
   
4. 
   

复制代码

              或者，你还可以定义更复杂的按照设定比例进行分布的颜色序列，如下面的RadialGradientShader例子所示：

java代码：

1.     int[] gradientColors = new int[3];
   
2.     gradientColors[0] = Color.GREEN;
   
3.     gradientColors[1] = Color.YELLOW;
   
4.     gradientColors[2] = Color.RED;
   
5.     float[] gradientPositions = new float[3];
   
6.     gradientPositions[0] = 0.0f;
   
7.     gradientPositions[1] = 0.5f;
   
8.     gradientPositions[2] = 1.0f;
   
9.     RadialGradient radialGradientShader=new RadialGradient(centerX,centerY, radius, gradientColors, gradientPositions, TileMode.CLAMP);
   
10. 
    

复制代码

           每一种渐变Shader(线性的、辐射形的和扫描状的)都可以使用以上这两种技术来定义渐变填充。

         
使用Shader TileModes
           渐变Shader的画刷大小既可以显式地使用有边界的矩形来定义，也可以使用中心点和半径长度来定义。Bitmap Shader可以通过它的位图大小来决定它的画刷大小。

              如果Shader画刷所定义的区域比要填充的区域小，那么TileMode将会决定如何处理剩余的区域 ：
              CLAMP    使用Shader的边界颜色来填充剩余的空间。
              MIRROR    在水平和垂直方向上拉伸Shader图像，这样每一个图像就都能与上一个缝合了。
              REPEAT    在水平和垂直方向上重复Shader图像，但不拉伸它。

         
使用MaskFilter

             MaskFilter类可以为Paint分配边缘效果 。
              对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter：

              BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘。
        EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

              要应用一个MaskFilter，可以使用setMaskFilter方法，并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter：

java代码：

1.     // 设置光源的方向
   
2.     float[] direction = new float[]{ 1, 1, 1 };
   
3.     //设置环境光亮度
   
4.     float light = 0.4f;
   
5.     // 选择要应用的反射等级
   
6.     float specular = 6;
   
7.     // 向mask应用一定级别的模糊
   
8.     float blur = 3.5f;
   
9.     EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);
   
10.     // 应用mask myPaint.setMaskFilter(emboss);
    
11. 
    

复制代码

       SDK中包含的FingerPaint API demo是说明如何使用MaskFilter的一个非常好的例子。它展示了这两种filter的效果。

      
使用ColorFilter

        MaskFilter是对一个Paint的alpha通道的转换，而ColorFilter则是对每一个RGB通道应用转换。所有由ColorFilter所派生的类在执行它们的转换时，都会忽略alpha通道。

        
Android包含三个ColorFilter：

        ColorMatrixColorFilter  可以指定一个4×5的ColorMatrix并将其应用到一个Paint中。ColorMatrixes通常在程序中用于对图像进行处理，而且由于它们支持使用矩阵相乘的方法来执行链接转换，所以它们很有用。

         LightingColorFilter  乘以第一个颜色的RGB通道，然后加上第二个颜色。每一次转换的结果都限制在0到255之间。
         PorterDuffColorFilter  可以使用数字图像合成的16条Porter-Duff 规则中的任意一条来向Paint应用一个指定的颜色。

        使用setColorFilter方法应用ColorFilter，如下所示：
        myPaint.setColorFilter(new LightingColorFilter(Color.BLUE, Color.RED));

         API中的ColorMatrixSample是说明如何使用ColorFilter和Color Matrix的非常好的例子。

         使用PathEffect

         到目前为止，所有的效应都会影响到Paint填充图像的方式；PathEffect是用来控制绘制轮廓(线条)的方式。
PathEffect对于绘制Path基本图形特别有用，但是它们也可以应用到任何Paint中从而影响线条绘制的方式。

         使用PathEffect，可以改变一个形状的边角的外观并且控制轮廓的外表。Android包含了多个PathEffect，包括：
         CornerPathEffect  可以使用圆角来代替尖锐的角从而对基本图形的形状尖锐的边角进行平滑。

         DashPathEffect  可以使用DashPathEffect来创建一个虚线的轮廓(短横线/小圆点)，而不是使用实线。你还可以指定任意的虚/实线段的重复模式。

       DiscretePathEffect  与DashPathEffect相似，但是添加了随机性。当绘制它的时候，需要指定每一段的长度和与原始路径的偏离度。

       PathDashPathEffect  这种效果可以定义一个新的形状(路径)并将其用作原始路径的轮廓标记。
       下面的效果可以在一个Paint中组合使用多个Path Effect。

       SumPathEffect  顺序地在一条路径中添加两种效果，这样每一种效果都可以应用到原始路径中，而且两种结果可以结合起来。

       ComposePathEffect  将两种效果组合起来应用，先使用第一种效果，然后在这种效果的基础上应用第二种效果。
       对象形状的PathEffect的改变会影响到形状的区域。这就能够保证应用到相同形状的填充效果将会绘制到新的边界中。

       使用setPathEffect方法可以把PathEffect应用到Paint对象中，如下所示:

java代码：

1.     borderPaint.setPathEffect(new CornerPathEffect(5));
   
2. 
   

复制代码

       PathEffect API示例给出了如何应用每一种效果的指导说明。

      
修改Xfermode

       可以通过修改Paint的Xfermode来影响在Canvas已有的图像上面绘制新的颜色的方式。
       在正常的情况下，在已有的图像上绘图将会在其上面添加一层新的形状。如果新的Paint是完全不透明的，那么它将完全遮挡住下面的Paint；如果它是部分透明的，那么它将会被染上下面的颜色。

       下面的Xfermode子类可以改变这种行为：
       AvoidXfermode  指定了一个颜色和容差，强制Paint避免在它上面绘图(或者只在它上面绘图)。
       PixelXorXfermode  当覆盖已有的颜色时，应用一个简单的像素XOR操作。
       PorterDuffXfermode  这是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。

       要应用转换模式，可以使用setXferMode方法，如下所示：

java代码：

1.     AvoidXfermode avoid = new AvoidXfermode(Color.BLUE, 10, AvoidXfermode.Mode. AVOID); borderPen.setXfermode(avoid);
   
2. 
   

复制代码

      
3. 使用抗锯齿效果提高Paint质量

       在绘制一个新的Paint对象时，可以通过传递给它一些标记来影响它被渲染的方式。ANTI_ALIAS_FLAG是其中一种很有趣的标记，它可以保证在绘制斜线的时候使用抗锯齿效果来平滑该斜线的外观。

       在绘制文本的时候，抗锯齿效果尤为重要，因为经过抗锯齿效果处理之后的文本非常容易阅读。要创建更加平滑的文本效果，可以应用SUBPIXEL_TEXT_FLAG，它将会应用子像素抗锯齿效果。

       也可以手工地使用setSubpixelText和setAntiAlias方法来设置这些标记，如下所示：

java代码：

1.     myPaint.setSubpixelText(true);
   
2.     myPaint.setAntiAlias(true);
   
3. 
   

复制代码

      
2D图形的硬件加速

       在当前这个到处都是2D图形爱好者的时代，Android允许你使用硬件加速来渲染你的应用程序。

       如果设备可以使用硬件加速，那么通过设置这个标记可以让活动中的每一个View都能使用硬件渲染。尽管减少了系统处理程序的负载，但在极大地提高了图像处理速度的同时，硬件加速也带来了相应的负面效果。

       使用requestWindowFeature方法，可以在你的活动中应用Window.FEATURE_OPENGL标记来打开硬件加速，如下所示：

java代码：

1.     myActivity.requestWindowFeature(Window.FEATURE_OPENGL);
   
2. 
   

复制代码

       并不是Android中所有的2D绘图基本图形都被硬件支持(特别是前面描述的大部分PathEffect)。

       与此同时，由于整个活动实际上是作为一个Canvas进行渲染的，所以对任何View的无效请求都将会导致整个活动被重新绘制。

public class FingerPaint extends GraphicsActivity
        implements ColorPickerDialog.OnColorChangedListener {    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(0xFFFF0000);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(12);
        
        mEmboss = new EmbossMaskFilter(new float[] { 1, 1, 1 },
                                       0.4f, 6, 3.5f);

        mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL);
    }
    
    private Paint       mPaint;
    private MaskFilter  mEmboss;
    private MaskFilter  mBlur;
    
    public void colorChanged(int color) {
        mPaint.setColor(color);
    }

    public class MyView extends View {
        
        private static final float MINP = 0.25f;
        private static final float MAXP = 0.75f;
        
        private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
        private Paint   mBitmapPaint;
        
        public MyView(Context c) {
            super(c);
            
            mBitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mBitmap);
            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
        }
        
        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(0xFFAAAAAA);
            
            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
            
            canvas.drawPath(mPath, mPaint);
        }
        
        private float mX, mY;
        private static final float TOUCH_TOLERANCE = 4;
        
        private void touch_start(float x, float y) {
            mPath.reset();
            mPath.moveTo(x, y);
            mX = x;
            mY = y;
        }
        private void touch_move(float x, float y) {
            float dx = Math.abs(x - mX);
            float dy = Math.abs(y - mY);
            if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
                mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
//            	mPath.lineTo(x, y);
                mX = x;
                mY = y;
            }
        }
        private void touch_up() {
            mPath.lineTo(mX, mY);
            // commit the path to our offscreen
            mCanvas.drawPath(mPath, mPaint);
            // kill this so we don't double draw
            mPath.reset();
        }
        
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();
            
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    touch_start(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_MOVE:
                    touch_move(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    touch_up();
                    invalidate();
                    break;
            }
            return true;
        }
    }
    
    private static final int COLOR_MENU_ID = Menu.FIRST;
    private static final int EMBOSS_MENU_ID = Menu.FIRST + 1;
    private static final int BLUR_MENU_ID = Menu.FIRST + 2;
    private static final int ERASE_MENU_ID = Menu.FIRST + 3;
    private static final int SRCATOP_MENU_ID = Menu.FIRST + 4;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        
        menu.add(0, COLOR_MENU_ID, 0, "Color").setShortcut('3', 'c');
        menu.add(0, EMBOSS_MENU_ID, 0, "Emboss").setShortcut('4', 's');
        menu.add(0, BLUR_MENU_ID, 0, "Blur").setShortcut('5', 'z');
        menu.add(0, ERASE_MENU_ID, 0, "Erase").setShortcut('5', 'z');
        menu.add(0, SRCATOP_MENU_ID, 0, "SrcATop").setShortcut('5', 'z');

        /****   Is this the mechanism to extend with filter effects?
        Intent intent = new Intent(null, getIntent().getData());
        intent.addCategory(Intent.CATEGORY_ALTERNATIVE);
        menu.addIntentOptions(
                              Menu.ALTERNATIVE, 0,
                              new ComponentName(this, NotesList.class),
                              null, intent, 0, null);
        *****/
        return true;
    }
    
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        super.onPrepareOptionsMenu(menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        mPaint.setXfermode(null);
        mPaint.setAlpha(0xFF);

        switch (item.getItemId()) {
            case COLOR_MENU_ID:
                new ColorPickerDialog(this, this, mPaint.getColor()).show();
                return true;
            case EMBOSS_MENU_ID:
                if (mPaint.getMaskFilter() != mEmboss) {
                    mPaint.setMaskFilter(mEmboss);
                } else {
                    mPaint.setMaskFilter(null);
                }
                return true;
            case BLUR_MENU_ID:
                if (mPaint.getMaskFilter() != mBlur) {
                    mPaint.setMaskFilter(mBlur);
                } else {
                    mPaint.setMaskFilter(null);
                }
                return true;
            case ERASE_MENU_ID:
                mPaint.setXfermode(new PorterDuffXfermode(
                                                        PorterDuff.Mode.CLEAR));
                return true;
            case SRCATOP_MENU_ID:
                mPaint.setXfermode(new PorterDuffXfermode(
                                                    PorterDuff.Mode.SRC_ATOP));
                mPaint.setAlpha(0x80);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

 private static class SampleView extends View {
        private Paint mPaint;
        private Path mPath;
        private PathEffect[] mEffects;
        private int[] mColors;
        private float mPhase;

        private static PathEffect makeDash(float phase) {
            return new DashPathEffect(new float[] { 15, 5, 8, 5 }, phase);
        }
        
        private static void makeEffects(PathEffect[] e, float phase) {
            e[0] = null;     // no effect
            e[1] = new CornerPathEffect(10);
            e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);
            e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
                                          PathDashPathEffect.Style.ROTATE);
            e[4] = new ComposePathEffect(e[2], e[1]);
            e[5] = new ComposePathEffect(e[3], e[1]);
        }
        
        public SampleView(Context context) {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true);

            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(6);
            
            mPath = makeFollowPath();
            
            mEffects = new PathEffect[6];
            
            mColors = new int[] { Color.BLACK, Color.RED, Color.BLUE,
                                  Color.GREEN, Color.MAGENTA, Color.BLACK
                                };
        }
        
        @Override protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);
            
            RectF bounds = new RectF();
            mPath.computeBounds(bounds, false);
            canvas.translate(10 - bounds.left, 10 - bounds.top);
            
            makeEffects(mEffects, mPhase);
            mPhase += 1;
            invalidate();

            for (int i = 0; i < mEffects.length; i++) {
                mPaint.setPathEffect(mEffects[i]);
                mPaint.setColor(mColors[i]);
                canvas.drawPath(mPath, mPaint);
                canvas.translate(0, 28);
            }
        }
        
        @Override public boolean onKeyDown(int keyCode, KeyEvent event) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_DPAD_CENTER:
                    mPath = makeFollowPath();
                    return true;
            }
            return super.onKeyDown(keyCode, event);
        }

        private static Path makeFollowPath() {
            Path p = new Path();
            p.moveTo(0, 0);
            for (int i = 1; i <= 15; i++) {
                p.lineTo(i*20, (float)Math.random() * 35);
            }
            return p;
        }
        
        private static Path makePathDash() {
            Path p = new Path();
            p.moveTo(4, 0);
            p.lineTo(0, -4);
            p.lineTo(8, -4);
            p.lineTo(12, 0);
            p.lineTo(8, 4);
            p.lineTo(0, 4);
            return p;
        }
    }