4

我目前正在尝试创建一个可以调整填充百分比的仪表。我的问题是我根本不擅长数学。我想开始在“北”（第一张图片）中绘制弧线，而不是在“东”中具有 0 度点的普通弧线（如第二张图所示）。

图 1 图 2

我希望能够通过沿屏幕拖动/触摸来增加图像 1 中蓝色区域的大小（角度）。现在这些是我现在能够以某种方式做的事情。我面临的真正问题是：

我使用以下代码绘制蓝色区域：

mStart = -90;
int degree = (int)((theta + Math.PI) * 180 / Math.PI);
mSweep = degree;

RectF mOvals = new RectF(c.x - outerRadius + circleThickness, c.y - outerRadius + circleThickness, c.x + outerRadius - circleThickness, c.y + outerRadius - circleThickness );

mArcSetLevel = new Path();

if(mArcSetLevel != null ) {
    canvas.drawArc(mOvals, mStart, mSweep, true, arcPaint);
}

将起点设置为 -90 会使它提前 90 度开始。为了跟踪触摸的角度，我使用了这个公式，但这是出错的地方：

int py = (int)event.getY() - c.y;
int px = (int)event.getX() - c.x;

theta = (float) ((float)  Math.atan2(py, px) - (Math.PI / 2)); // - Math.PI / 2 to correct -90 start

当我走得超过 270 度时，蓝色区域被重置并以更小的角度从北向西绘制（因为 -90 的“假”开始，如第三张图片所示）。我的数学技能根本不足以让我能够解决这个问题，虽然我能想到为什么会这样，但我似乎找不到解决方案。

图 3

我制作的整个视图的（非常混乱的）代码如下：

    private Canvas canvas;  

//Canvas width and height
private int h = -1;
private int w = -1;

//circle properties
private Paint paint;
private Paint arcPaint;
private Path circle;
private Point c;
private int outerRadius;
private int circleThickness = 20;

//point click in wheel
private float theta = 0;

private float mStart;
private float mSweep;
private Paint mBgPaints   = new Paint();
private Path mArcSetLevel;

int padding = 10;

OnMeterWheelChangeListener onMeterWheelChangeListener = null;

public MeterWheel(Context context){
    super(context);
    initCircleSeekBar();
}

public MeterWheel(Context context, AttributeSet attrs) {
    super(context, attrs);
    initCircleSeekBar();
}

private void initCircleSeekBar() {

    canvas = new Canvas();
    circle = new Path();
    paint = new Paint();
    arcPaint = new Paint();
    c = new Point();

    mBgPaints.setAntiAlias(true);
    mBgPaints.setStyle(Paint.Style.FILL);
    mBgPaints.setColor(0x88FF0000);
    mBgPaints.setStrokeWidth(0.5f);

    mArcSetLevel = new Path();

    this.draw(canvas);
}


@Override
protected void onSizeChanged(int width, int height, int oldw, int oldh) {
    // TODO Auto-generated method stub
    super.onSizeChanged(width, height, oldw, oldh);

    w = width;
    h = height;
    Log.i("POWERWHEEL", String.valueOf(w) + "   " + String.valueOf(h));
    c.set(w/2, h/2);
    drawCircle();
}

private void drawCircle() {
    outerRadius = Math.min(h,w)/2;
    circleThickness = (int) (outerRadius*0.15);

    circle.addArc(new RectF(c.x - outerRadius + circleThickness/2, c.y - outerRadius + circleThickness/2, c.x + outerRadius - circleThickness/2, c.y + outerRadius - circleThickness/2 ), 0, 360);
    circle.moveTo(c.x, c.y);
    //paint.setShader(new SweepGradient(w/2,h/2, colourarry, null));
    paint.setColor(Color.GRAY);
    paint.setStyle(Style.STROKE);
    paint.setStrokeWidth(circleThickness);
    paint.setAntiAlias(true);

    arcPaint.setColor(Color.BLUE);
    arcPaint.setStyle(Style.FILL);
    arcPaint.setStrokeWidth(circleThickness);
    arcPaint.setAntiAlias(true);
}


@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);

    if(circle != null){
    //draw circle
        canvas.drawPath(circle, paint);

        mStart = -90;

        int degree = (int)((theta + Math.PI) * 180 / Math.PI);
        Log.d("POWERWHEEL", "" + degree);
        mSweep = degree;

        RectF mOvals = new RectF(c.x - outerRadius + circleThickness, c.y - outerRadius + circleThickness, c.x + outerRadius - circleThickness, c.y + outerRadius - circleThickness );

        mArcSetLevel = new Path();

        if(mArcSetLevel != null ) {
            canvas.drawArc(mOvals, mStart, mSweep, true, arcPaint);
        }
    }

}


@Override
public boolean onTouchEvent(MotionEvent event) {

    if (!isEnabled()) {
        return false;
    }

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            setPressed(true);
            onStartTrackingTouch(event);
            trackTouchEvent(event);
            break;

        case MotionEvent.ACTION_MOVE:
            trackTouchEvent(event);
            break;

        case MotionEvent.ACTION_UP:
            trackTouchEvent(event);
            onStopTrackingTouch();
            setPressed(false);
            invalidate();
            break;

        case MotionEvent.ACTION_CANCEL:
            onStopTrackingTouch();
            setPressed(false);
            invalidate();
            break;
    }

    return true;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);

    setMeasuredDimension(width,height);
}

private void onStartTrackingTouch(MotionEvent event) {

}

private void onStopTrackingTouch() {

}

private void trackTouchEvent(MotionEvent event) {

    int py = (int)event.getY() - c.y;
    int px = (int)event.getX() - c.x;

    theta = (float) ((float)  Math.atan2(py, px) - (Math.PI / 2));
    Log.d("POWERWHEEL", "theta: " + theta);

    this.invalidate();
}



public void setSize(int x, int y){
    h = y;
    w = x;
}

public void setCirleThickness(int t){
    circleThickness = t;
}


public void setOnMeterWheelChangeListener (OnMeterWheelChangeListener listener) {
    onMeterWheelChangeListener = listener;
}

public interface OnMeterWheelChangeListener{
    public void onStartTrackingTouch (MeterWheel colourWheel);
    public void onStopTrackingTouch (MeterWheel colourWheel);
}

提前一百万谢谢！

4

1 回答 1

1

计算 theta 时，您使用 atan2 以 +/- pi 为单位返回角度。因此，当位于左上象限时，它将返回 -pi/2 到 -pi 范围内的值（假设 y 向下为正，x 向右为正）。您直接减去 pi/2 得到 -pi 到 -3pi/2 的范围。然后在 onDraw 中再次添加 pi（令人困惑），为该象限提供 0 到 -pi/2 的扫描范围。这意味着它将从顶部的起始位置逆时针绘制弧 0 到 pi/2（或 0 到 90 度）。您必须确保您的扫描始终保持在 0 到 pi 的范围内。最好的解决方案是将坐标移动 -pi/2，这样就可以代替 Math.atan2(py, px)，而是执行 Math.atan2(px,-py)，然后如果 theta 为负数，则添加 2*pi。类似的东西（我不写android）

theta = (float)  Math.atan2(px, -py);
if (theta < 0) theta += 2 * Math.PI;

然后在 onDraw

int degree = (int)(theta * 180 / Math.PI);
Log.d("POWERWHEEL", "" + degree);
mSweep = degree;

如果您仍然遇到问题，请检查 mSweep 是否始终在 0 到 360 度的范围内。

于 2012-11-28T17:07:30.830 回答