在自定义视图中绘制一条线

时间:2014-03-13 08:36:53

标签: android view accelerometer android-custom-view

引言

我正在练习自定义视图,我需要制作一个应用:这个应用程序显示一个小圆圈(就像一个小球),这个球相对于手机方向移动(使用加速度计)。我已经完成了这件事。

问题

现在,我需要获得额外的功能:

  • 此球现在出现在屏幕的左上方,我需要它出现在中间。
  • 我需要绘制球的轨迹,画出代表球的轨道的黑线

这是我的自定义视图的代码:

public class MyView extends View {

    private Path drawPath;
    private Paint drawPaint;
    private Bitmap canvasBitmap;
    float speedX;
    float speedY;
    float radius = 10;
    float posX = radius;
    float posY = radius;
    long lastUpdateTime = 0;
    final float METER_TO_PIXEL = 50.0f;


    /**
     * Constructor
     */
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupDraw();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(drawPath, drawPaint);
        canvas.drawCircle(posX, posY, radius, drawPaint);
    }


    private void setupDraw() {

        drawPaint = new Paint();
        drawPaint.setColor(Color.BLACK);
        canvasBitmap = Bitmap.createBitmap(640, 1200, Bitmap.Config.ARGB_8888);
        posX = getWidth() /2;
        posY = getHeight() /2;
    }

    public void update (float gravityX, float gravityY) {

        if(lastUpdateTime == 0) {
            lastUpdateTime = System.currentTimeMillis();
            return;
        }
        long now = System.currentTimeMillis();
        long ellapse = now - lastUpdateTime;
        lastUpdateTime = now;

        speedX -=((gravityX * ellapse)/1000.0f) * METER_TO_PIXEL;
        speedY +=((gravityY * ellapse)/1000.0f) * METER_TO_PIXEL;

        posX += ((speedX * ellapse) / 1000.0f);
        posY += ((speedY * ellapse) / 1000.0f);

        /*Checks screen limits*/
        if (posX < radius) {
            posX = radius;
            speedX = 0;
        }
        else if (posX > (getWidth() - radius)) {
            posX = getWidth() - radius;
            speedX = 0;
        }
        if (posY < radius) {
            posY = radius;
            speedY = 0;
        }
        else if (posY > (getHeight() - radius)) {
            posY = getHeight() - radius;
            speedY = 0;
        }
        this.invalidate();
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        /*HERE IS WHERE I TRY TO SET THE BALL ON THE MIDDLE OF THE SCREEN*/
        drawPath = new Path();
        drawPath.moveTo(w / 2, h / 2);
    }
}

2 个答案:

答案 0 :(得分:1)

我通过以下方式将球放在中间:

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    if (isFirstTime) {
        drawPath = new Path();
        drawPath.moveTo(w / 2, h / 2);
        isFirstTime = false;
    }
    //...
}

我开始在中间画路径:

public void update (float gravityX, float gravityY) {

    if(lastUpdateTime == 0) {
        posX = getWidth() /2;
        posY = getHeight() /2;
        lastUpdateTime = System.currentTimeMillis();
        this.invalidate();
    }
    //...
}

但为了画出我还有一些麻烦的道路。我完成了绘制的东西,但它绘制了两条线:第一条是球轨道,第二条是从中间到球的直线。最后一行使得两条线之间的表面很好,所以我还是要看看如何解决这个问题。

为此,我在update()方法的末尾包含了这个:

drawPath.lineTo(posX, posY);
drawCanvas.drawPath(drawPath, drawPaint);
this.invalidate();

我的onDraw()方法如下所示:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
    canvas.drawPath(drawPath, drawPaint);
    canvas.drawCircle(posX, posY, radius, drawPaint);
}

答案 1 :(得分:0)

怎么样:

// here you put your values
canvas.drawLine(0, 0, 20, 20, drawPaint);

将此行放在onDraw函数