先看看效果吧：

就是画一个漏斗的形状，用于统计。第一次做，然后开始学习canvas。

canvas的就可以理解为画布，既然要画图，有了画布自然需要笔Paint。

paint 通过setColor(Color.BLACK);设置笔的颜色， setStrokeWidth(2);设置笔的粗细。 setStyle(Paint.Style.STROKE);设置笔的一个行为动作。

Paint.Style.STROKE是描边，Paint.Style.FILL是填充，Paint.Style.FILL_AND_STROKE是描边加填充。

可以看到我的示例顶部是一个椭圆。边缘是黑色，填充是红色。这个就是画了2次。一次用黑色描边的笔画的，另外一次是红色填充的笔画的。

Canvas的话，我用到drawOval(rectF, paint); 画一个椭圆。

      drawArc(oval, startAngle, sweepAngle, useCenter, paint) 话椭圆的一个部分。API描述叫画一条弧线。起始角画部分椭圆。

      drawText(string, x, y, textPaint) 画出一个字。字的各种控制在textpaint设置的。textPaint.setTextAlign(Paint.Align.CENTER);

这个属性就是把(x,y)坐标是 文字的中间。（我找了好久。默认是(x,y)在文字的结束部分。）

      drawPath(path, fillPaint); 根据一组路径，然后把整个路径画出来。

Path 可以添加各种线条。path.addArc(oval, startAngle, sweepAngle)添加弧线。path.addCircle(x, y, radius, dir)添加圆圈。

path.addOval(oval, dir)添加椭圆。path.lineTo(x,y)添加直线。添加直线的话需要指定起点，通过path.moveTo(x,y) 来指定起点，默认是(0,0)

如果连续用path.lineTo(x,y)那么起点就是上一次lineTo的位置，比如：

path.moveTo(lastRectF.left, lastY); path.lineTo(lastRectF.right, lastY); path.lineTo(rectF.right, lineEndY); path.lineTo(rectF.left,lineEndY); path.lineTo(lastRectF.left, lastY); canvas.drawPath(path, fillPaint);可以看到是第一次指定了起点。

我把这个漏斗形画在了一个View里面通过接口设置了有多少色块，每个色块的比例，颜色,文字

/** * @param weights the weights to set * 设置区域块。并且指定每一个区域块的比例. * 如果这些是在Activity已经启动后再设置。设置完成后调用invalidate(). * */ public void setWeights(float[] weights) { float sum = 0; for(int i=0;i<weights.length;i++){ sum = sum + weights[i]; weights[i] = sum; } for(int i=0;i<weights.length;i++){ weights[i] = weights[i]/sum; } this.weights = weights; } /** * @param values the values to set * 设置每个区域块的语言文字 */ public void setValues(String[] values) { this.values = values; textPoints = null; } /** * @param colors the colors to set * 为每个区域块设置颜色 */ public void setColors(int[] colors) { this.colors = colors; bottomRectFs = null; }
还有接口设置了图形的大小。

图形大小受到顶部椭圆大小的影响。

所以有设置顶部椭圆大小的接口，还有就是左边那个漏斗斜边的高度,宽度(宽度是指斜边起始点的x轴的差值)设置。

然后还有文字的大小，颜色等接口。

/** * @param ovalWidth the ovalWidth to set * 设置顶部椭圆的宽度 */ public void setOvalWidth(float ovalWidth) { this.ovalWidth = ovalWidth; ovalSize = ovalWidth/ovalHeight; } /** * @param ovalHeight the ovalHeight to set * 设置顶部椭圆的高度 */ public void setOvalHeight(float ovalHeight) { this.ovalHeight = ovalHeight; ovalSize = ovalWidth/ovalHeight; } /** * @param lineWidth the lineWidth to set * 设置左边线条倾斜x偏移量 */ public void setLineWidth(float lineWidth) { this.lineWidth = lineWidth; } /** * @param lineHeight the lineHeight to set * 设置左边线条的y的高度 */ public void setLineHeight(float lineHeight) { this.lineHeight = lineHeight; } /** * @param topOvalColor the topOvalColor to set * 顶部椭圆的颜色 */ public void setTopOvalColor(int topOvalColor) { this.topOvalColor = topOvalColor; } /** * 设置 文本的颜色 * @param color */ public void setTextColor(int color){ if(textPaint == null){ initTextPaint(); } textPaint.setColor(color); } public void setTextSize(float size){ if(textPaint == null){ initTextPaint(); } textPaint.setTextSize(size); }
需要注意的是，这些设置 如果是在 activity启动完成后再设置。那么设置完成后调用invalidate().

这样子图像才会去重新绘制，才能够使设置生效。

工程示例代码:

更多精彩内容请关注我朋友的博客:点击打开链接

Tags：canvas   图形   圆锥   android   paint   android