学习Canvas 画圆锥，并且作为一个统计图

先看看效果吧：



就是画一个漏斗的形状，用于统计。第一次做，然后开始学习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().

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

工程示例代码:

http://download.csdn.net/detail/u012565107/7108349

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