Question

我可以在视图中使用画布和绘图矩形绘制条形图。但是onTouch交互适用于整个视图，因此我无法单独与每个栏进行交互。我不是在寻找使用任何库来绘制图形。任何的意见都将会有帮助。谢谢！

protected void onDraw(Canvas canvas) {
    float border = 20;
    float horstart = border * 2;
    float height = getHeight();
    float width = getWidth() - 1;
    float max = getMax();
    float min = getMin();
    float diff = max - min;
    float graphheight = height - (2 * border);
    float graphwidth = width - (2 * border);



    paint.setTextAlign(Align.LEFT);
    int vers = verlabels.length - 1;
    for (int i = 0; i < verlabels.length; i++) {
        paint.setColor(Color.BLUE);
        float y = ((graphheight / vers) * i) + border;
        //canvas.drawLine(horstart, y, width, y, paint);
        paint.setColor(Color.BLUE);
        canvas.drawText(verlabels[i], 0, y, paint);
    }
    int hors = horlabels.length - 1;
    for (int i = 0; i < horlabels.length; i++) {
        paint.setColor(Color.BLUE);
        float x = ((graphwidth / hors) * i) + horstart;
        //canvas.drawLine(x, height - border, x, border, paint);
        paint.setTextAlign(Align.CENTER);
        if (i == horlabels.length - 1)
            paint.setTextAlign(Align.RIGHT);
        if (i == 0)
            paint.setTextAlign(Align.LEFT);
        paint.setColor(Color.BLUE);
        canvas.drawText(horlabels[i], x, height - 4, paint);
    }

    paint.setTextAlign(Align.CENTER);
    canvas.drawText(title, (graphwidth / 2) + horstart, border - 4, paint);

    if (max != min) {

        paint.setColor(Color.BLUE);
        if (type == BAR) {
            float datalength = values.length;
            float colwidth = (graphwidth / hors);
            for (int i = 0; i < values.length; i++) {
                float val = values[i] - min;
                float rat = val / diff;
                float h = graphheight * rat;

                canvas.drawRect((i * colwidth) + horstart, (border - h)
                        + graphheight+curY, ((i * colwidth) + horstart)
                        + (colwidth - 1), height - (border - 1), paint);



            }
        } else {
            float datalength = values.length;
            float colwidth = (width - (2 * border)) / datalength;
            float halfcol = colwidth / 2;
            float lasth = 0;
            float h = 0;
            for (int i = 0;i<values.length;i++)
                    canvas.drawLine(((i - 1) * colwidth) + (horstart + 1)
                            + halfcol, (border - lasth) + graphheight+curY,
                            (i * colwidth) + (horstart + 1) + halfcol,
                            (border - h) + graphheight, paint);
                lasth = h;
            }
        }
    }

视图的onTouch方法：

 public boolean onTouch(View v, MotionEvent event)
    {
         boolean result=false;
        switch (event.getAction()) 
        {
            case MotionEvent.ACTION_DOWN:
                curX= (int)event.getX();
                curY= (int)event.getY();

                result=true;
                break;
            case MotionEvent.ACTION_MOVE:
                curX= (int)event.getX();
                curY= (int)event.getY();
                result=true;
                break;
            case MotionEvent.ACTION_UP:
                curX= (int)event.getX();
                curY= (int)event.getY();


                result=true;
                break;
        }

        if (result) invalidate();
        return result;
    }

Answer 1

每当用户触摸该视图时，都会导致调用onTouch方法。一旦它被调用，您将获得两个float个数字：x和y，指示用户的手指相对于视图协调系统触摸您的视图的位置。

正如您可能已经掌握了这个想法，您应该在自定义视图（即条形图）内部获取这些数字，以计算哪个条形受影响。然后，您可以例如应用悬停效果或执行其他操作。

注意：要更新视图的外观，您应该在图表视图的数据模型中存储更改，然后发出invalidate()。随后，结果，您的onDraw被调用，您可以在其中重新绘制图表。（即你应该每次都重新绘制整个图表）

如何在条形图中向条形图进行交互，即在不使用任何库

1 个答案: