学习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);
    }

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

工程示例代码:

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

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

学习Canvas 画圆锥，并且作为一个统计图,布布扣,bubuko.com

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

原文：http://blog.csdn.net/u012565107/article/details/22303449