在自定义视图中画一条线

Posted 2023-02-26

【中文标题】在自定义视图中画一条线

【英文标题】：Draw a line in custom view

【发布时间】：2014-03-13 08:36:52

【问题描述】：

简介

我正在使用自定义视图进行练习，我需要制作一个应用程序：这个应用程序显示一个小圆圈（像一个小球），并且这个球相对于手机方向移动（使用加速度计）。我已经完成了。

问题

现在，我需要获得一个额外的功能：

这个球现在出现在屏幕的左上角，我需要它出现在中间。 我需要画小球的轨迹，也就是画一条黑线，代表小球的轨迹

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

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);
    

【参考方案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);

【参考方案2】：

怎么样：

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

将此行放在您的 onDraw 函数上

【讨论】：

两者都不做。我已经尝试过设置新旧 X 和 Y 位置来连续绘制线条，但它没有绘制它。我把这个drawPath.lineTo(posX, posY); 放在更新方法的末尾，它画了一些东西，但不是直线跟踪球