logo标签列表

垂直轴旋转角度

androidmathpie-chartangleandroid-wheel
4
我目前正在尝试创建一个可以按填充百分比调整的仪表。我的问题是我数学很差。我想从“北”（第一张图片）开始绘制弧，而不是像第二张图片中所示的普通弧线，其0度点在“东”方向。
我希望能够通过拖动/触摸屏幕来增加图像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）。我的数学技能不够好，无法解决这个问题，尽管我知道为什么会发生这种情况，但似乎找不到解决方案。
完整视图的（非常混乱的）代码如下：
    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);
}

Thanks a million in advance!

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(px，-py)代替Math.atan2(py，px)，然后如果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度范围内。

1
就这样了！非常感谢。像这种纯数学的东西真的是我的弱点，我把事情都搞糟了。再次感谢你百万遍 :) - Marcel van Gulik
@Marcel 没问题，很高兴它能够解决！祝你的应用好运 :) - joaerl
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接