绘制季度计与Android的印刷品吗? [英] Draw quarter gauge with canvas in android?

查看:210
本文介绍了绘制季度计与Android的印刷品吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何建立衡量一样呢?
任何库或Maven此计类型存在吗?
我用帆布圆量规,但我不能创造这个

  RectF椭圆= getOval(帆布,1);
    RectF oval2 = getOval(帆布,1.1F);    涂料粉刷=新的油漆();
    paint.setColor(Color.DKGRAY);    canvas.drawArc(oval2,180,90,真实,油漆);
    canvas.drawArc(椭圆形,180,90,真实,backgroundPaint);    RectF innerOval = getOval(帆布,0.9F);
    canvas.drawArc(innerOval,180,90,真实,backgroundInnerPaint);< GaugeView
        机器人:ID =@ + ID /计
        机器人:layout_width =@扪/ panel_gauge_height
        机器人:layout_height =@扪/ panel_gauge_width
        应用:师=8
        应用:scaleEndValue =8
        应用:scaleStartAngle =50
        应用:scaleStartValue =0
        应用:showNeedle =真
        应用:细分=2/>

在这里输入的形象描述


解决方案

  1. 您可能只是谷歌找到了一堆GagueViews的。我想你已经做到了。


  2. 这看起来很简单。所以,你可以写自己的自定义查看。您可以使用 drawArc 来绘制3个不同颜色的弧线。您可以使用的drawLine 来绘制测量点(只记得来设置 Paint.setStrokeCap​​(Cap.Round))。至于针,你可以使用 drawPath 。随着一些努力和正确的坐标,您应该能够自己写了一个漂亮的GaugeView。


  3. 如果您发现编写自己的看法很难,你可以参考一些 GaugeView GitHub上。你会得到一个很好的起点。


更新:我写了一个简单的 GaugeView 基于你的问题在​​图像上。计算是在像素,您可能希望与 DisplayMetrics.density 繁殖他们,让他们在独立的像素。此外,您可能希望通过XML揭露大部分值在这里,所以你可以在布局控制它们。这可能是一个很好的起点。

 公共类GaugeView扩展视图{    私人涂料arcPaint;    公共GaugeView(上下文的背景下){
        超级(上下文);
        初始化();
    }    公共GaugeView(上下文的背景下,ATTRS的AttributeSet){
        超(背景下,ATTRS);
        初始化();
    }    公共GaugeView(上下文的背景下,ATTRS的AttributeSet,诠释defStyleAttr){
        超(背景下,ATTRS,defStyleAttr);
        初始化();
    }    私人无效初始化(){
        arcPaint =新的油漆(Paint.ANTI_ALIAS_FLAG);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(15F);
    }    @覆盖
    保护无效的onDraw(帆布油画){
        INT宽度= canvas.getWidth();
        INT高度= canvas.getHeight();        INT arcCenterX =宽度 - 10;
        INT arcCenterY =身高 - 10;        最终RectF arcBounds =新RectF(arcCenterX - 100,arcCenterY - 100,arcCenterX + 100,arcCenterY + 100);
        //画圆弧
        canvas.drawArc(arcBounds,180F,20F,假的,arcPaint);
        arcPaint.setColor(Color.DKGRAY);
        canvas.drawArc(arcBounds,200F,40F,假的,arcPaint);
        arcPaint.setColor(Color.GRAY);
        canvas.drawArc(arcBounds,2400F,30F,假的,arcPaint);        //绘制指针
        最终诠释totalNoOfPointers = 20;
        最终诠释pointerMaxHeight = 25;
        最终诠释pointerMinHeight = 15;        INT运行startx = arcCenterX - 120;
        INT startY = arcCenterY;
        arcPaint.setStrokeWidth(1006米);
        arcPaint.setStrokeCap​​(Paint.Cap.ROUND);        INT pointerHeight;
        的for(int i = 0; I< = totalNoOfPointers;我++){
            如果(I%5 == 0){
                pointerHeight = pointerMaxHeight;
            }其他{
                pointerHeight = pointerMinHeight;
            }
            canvas.drawLine(运行startx,startY,运行startx - pointerHeight,startY,arcPaint);
            canvas.rotate(90F / totalNoOfPointers,arcCenterX,arcCenterY);
        }
    }
}

结果最终渲染图像看起来像这样:

How can I create gauge same as this? any library or maven exist for this gauge type? I use canvas for circle gauge ,but I can't create this one

 RectF oval = getOval(canvas, 1);
    RectF oval2 = getOval(canvas, 1.1f);

    Paint paint = new Paint();
    paint.setColor(Color.DKGRAY);

    canvas.drawArc(oval2, 180, 90, true, paint);
    canvas.drawArc(oval, 180, 90, true, backgroundPaint);

    RectF innerOval = getOval(canvas, 0.9f);
    canvas.drawArc(innerOval, 180, 90, true, backgroundInnerPaint);

<GaugeView
        android:id="@+id/gauge"
        android:layout_width="@dimen/panel_gauge_height"
        android:layout_height="@dimen/panel_gauge_width"
        app:divisions="8"
        app:scaleEndValue="8"
        app:scaleStartAngle="50"
        app:scaleStartValue="0"
        app:showNeedle="true"
        app:subdivisions="2" />

解决方案

  1. You could just google to find a bunch of GagueViews. I think you already did that.

  2. This seems simple. So you could write your own custom View. You can use drawArc to draw the 3 different color arc. You can use drawLine to draw the measuring points (just remember to set Paint.setStrokeCap(Cap.Round)). As for the needle, you could use drawPath. With some effort and the right coordinates, you should be able to write a nifty GaugeView yourself.

  3. If you find writing your own view difficult, you can refer some GaugeView in the GitHub. You will get a good starting point.

UPDATE: I wrote a simple GaugeView based on the image in you question. The calculations are in Pixels, you might want to multiply them with DisplayMetrics.density, so that they are in independent pixels. Also, you might want to expose most of the values here via the xml, so you can control them in the layout. This might be a good starting point.

public class GaugeView extends View {

    private Paint arcPaint;

    public GaugeView(Context context) {
        super(context);
        initialize();
    }

    public GaugeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initialize();
    }

    public GaugeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initialize();
    }

    private void initialize() {
        arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(15f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int width = canvas.getWidth();
        int height = canvas.getHeight();

        int arcCenterX = width - 10;
        int arcCenterY = height - 10;

        final RectF arcBounds = new RectF(arcCenterX - 100, arcCenterY - 100, arcCenterX + 100, arcCenterY + 100);


        // Draw the arc
        canvas.drawArc(arcBounds, 180f, 20f, false, arcPaint);
        arcPaint.setColor(Color.DKGRAY);
        canvas.drawArc(arcBounds, 200f, 40f, false, arcPaint);
        arcPaint.setColor(Color.GRAY);
        canvas.drawArc(arcBounds, 2400f, 30f, false, arcPaint);

        // Draw the pointers
        final int totalNoOfPointers = 20;
        final int pointerMaxHeight = 25;
        final int pointerMinHeight = 15;

        int startX = arcCenterX - 120;
        int startY = arcCenterY;
        arcPaint.setStrokeWidth(5f);
        arcPaint.setStrokeCap(Paint.Cap.ROUND);

        int pointerHeight;
        for (int i = 0; i <= totalNoOfPointers; i++) {
            if(i%5 == 0){
                pointerHeight = pointerMaxHeight;
            }else{
                pointerHeight = pointerMinHeight;
            }
            canvas.drawLine(startX, startY, startX - pointerHeight, startY, arcPaint);
            canvas.rotate(90f/totalNoOfPointers, arcCenterX, arcCenterY);
        }
    }
}


The final rendered image looks like this:

这篇关于绘制季度计与Android的印刷品吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆