如何在自定义视图中更改canvas.drawArc android的中心

时间:2015-03-27 08:01:12

标签: android canvas android-canvas center android-custom-view

enter image description here enter image description here我获得了创建自定义视图的代码,以便在android中显示规范。

public class CustomGauge extends View {

private static final int DEFAULT_LONG_POINTER_SIZE = 1;

private Paint mPaint;
private float mStrokeWidth;
private int mStrokeColor;
private RectF mRect;
private String mStrokeCap;
private int mStartAngel;
private int mSweepAngel;
private int mStartValue;
private int mEndValue;
private int mValue;
private double mPointAngel;
private float mRectLeft;
private float mRectTop;
private float mRectRight;
private float mRectBottom;
private int mPoint;
private int mPointColor;
private float mPointSize;
private int mPointStartColor;
private int mPointEndColor;

public CustomGauge(Context context) {
    super(context);
    init();
}

public CustomGauge(Context context, AttributeSet attrs) {
    super(context, attrs);
    Log.v("SSS", "in CustomGauge");
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomGauge, 0, 0);

    // stroke style
    mStrokeWidth = a.getDimension(R.styleable.CustomGauge_strokeWidth, 10);
    mStrokeColor = a.getColor(R.styleable.CustomGauge_strokeColor, android.R.color.darker_gray);
    mStrokeCap = a.getString(R.styleable.CustomGauge_strokeCap);

    // angel start and sweep (opposite direction 0, 270, 180, 90)
    mStartAngel = a.getInt(R.styleable.CustomGauge_startAngel, 0);
    mSweepAngel = a.getInt(R.styleable.CustomGauge_sweepAngel, 360);

    // scale (from mStartValue to mEndValue)
    mStartValue = a.getInt(R.styleable.CustomGauge_startValue, 0);
    mEndValue = a.getInt(R.styleable.CustomGauge_endValue, 1000);

    // pointer size and color
    mPointSize = 0.3f;// a.getColor(R.styleable.CustomGauge_pointSize, 0);
    mPointStartColor = a.getColor(R.styleable.CustomGauge_pointStartColor, android.R.color.white);
    mPointEndColor = a.getColor(R.styleable.CustomGauge_pointEndColor, android.R.color.white);

    // calculating one point sweep
    mPointAngel = ((double) Math.abs(mSweepAngel) / (mEndValue - mStartValue));
    a.recycle();
    init();
}

private void init() {
    Log.v("SSS", "in init");
    // main Paint
    mPaint = new Paint();
    mPaint.setColor(mStrokeColor);
    mPaint.setStrokeWidth(mStrokeWidth);
    mPaint.setAntiAlias(true);
    if (!TextUtils.isEmpty(mStrokeCap)) {
        if (mStrokeCap.equals("BUTT"))
            mPaint.setStrokeCap(Paint.Cap.BUTT);
        else if (mStrokeCap.equals("ROUND"))
            mPaint.setStrokeCap(Paint.Cap.ROUND);
    } else
        mPaint.setStrokeCap(Paint.Cap.BUTT);
    mPaint.setStyle(Paint.Style.STROKE);
    mRect = new RectF();

    mValue = mStartValue;
    mPoint = mStartAngel;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.v("SSS", "in CustomGauge");
    float paddingLeft = getPaddingLeft();
    float paddingRight = getPaddingRight();
    float paddingTop = getPaddingTop();
    float paddingBottom = getPaddingBottom();
    float width = getWidth() - (paddingLeft + paddingRight);
    float height = getHeight() - (paddingTop + paddingBottom);
    float radius = (width > height ? width / 2 : height / 2) * 3/8;

    mRectLeft = width / 2 - radius + paddingLeft;
    mRectTop = height / 2 - radius + paddingTop;
    // mRectRight = width / 2 - radius + paddingLeft + width;
    mRectRight = width / 2 - radius + paddingLeft + width;
    mRectBottom = height / 2 - radius + paddingTop + height;
    // Log.v("SSS", "mRectLeft:" + mRectLeft + "    mRectTop:" + mRectTop +
    // "    mRectRight:" + mRectRight + "   mRectBottom:" + mRectBottom);

    mRect.set(mRectLeft, mRectTop, mRectRight, mRectBottom);

    mPaint.setColor(mStrokeColor);
    mPaint.setShader(null);
    // canvas.drawArc(mRect, mStartAngel, mSweepAngel, false, mPaint);//
    // this draws the background arc
    mPaint.setColor(getResources().getColor(R.color.Black));
    mPaint.setShader(new LinearGradient(0, 0, 0, getHeight(), mPointEndColor, mPointStartColor, android.graphics.Shader.TileMode.MIRROR));
    canvas.drawArc(mRect, mPoint - mPointSize / 2, mPointSize, true, mPaint);
    Log.v("SSS" , "mPoint:" + mPoint + ".........mPointSize:" + mPointSize);

    Paint paint = new Paint();
    paint.setColor(getResources().getColor(R.color.Black));
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(width / 2, height / 2, 15, paint);
}

public void setValue(int value) {
    mValue = value;
    mPoint = (int) (mStartAngel + (mValue - mStartValue) * mPointAngel);
    invalidate();
}

public int getValue() {
    return mValue;
}

}

布局代码是,

 <pl.pawelkleczkowski.customgauge.example.CustomGauge
    android:background="@drawable/cluster"
    android:id="@+id/gauge1"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_below="@+id/button"
    gauge:pointStartColor="@color/Red"
    gauge:pointEndColor="@color/Red"
    gauge:pointSize="1"
    gauge:startAngel="180"
    gauge:strokeCap="ROUND"
    gauge:strokeColor="@color/Gray"
    gauge:strokeWidth="10dp"
    gauge:startValue="0"
    gauge:endValue="1000"
    gauge:sweepAngel="180" />

在我使用过的活动中

gauge1 = (CustomGauge) findViewById(R.id.gauge1);
for (i = 0; i < 100; i++) {
                        try {
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    gauge1.setValue(i * 10);
                                    }
                            });
                            Thread.sleep(10);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }

使用这个我成功地显示了一个标尺。

但问题是,在Custeom视图的onDraw方法中,画布使用canvas.drawArc绘制圆弧,其中心位于布局中自定义视图的中心位置。

但我想更改canvas.drawArc的中心,以便在我的自定义视图中绘制的圆弧将位于整个自定义视图的底部。

那么如何在上面的情况下改变绘制圆弧的中心。

1 个答案:

答案 0 :(得分:0)

我刚刚找到了一个问题的支持,所以把我发现的答案(解决方法)

canvas.scale(1, 2.0f);

此移动的画布绘制位置从图像中心到图像底部。(仅移动y轴)。