2016-01-30 10 views
9

到目前爲止,我可以使用一些代碼參考形式stackoverflow繪製半圓。現在我想把針畫到這個半圓上。 我不知道該怎麼做。這裏是半圓代碼編輯:Android將針圖像繪製到此類似計量表的圓圈

package in.ashish29agre.stackoverflow.sample.semicircle; 

import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.Path; 
import android.graphics.RectF; 
import android.view.View; 

public class MyGraphView extends View { 
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    private float[] value_degree; 
    private int[] COLORS = { Color.GREEN, Color.RED, Color.GREEN, Color.RED }; 
    // size of bigger half circle 
    RectF rectf = null; 
    // size of smaller half circle 
// RectF rectf2 = new RectF(45, 45, 275, 275); 
    // size of the smallest half circle 
// RectF rectf3 = new RectF(80, 80, 240, 240); 

    int temp = 0; 

    public MyGraphView(Context context, float[] values) { 

     super(context); 
     rectf = new RectF(); 
     value_degree = new float[values.length]; 
     for (int i = 0; i < values.length; i++) { 
      value_degree[i] = values[i]; 
     } 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
     int width = getMeasuredWidth(); 
     int height = getMeasuredHeight(); 
     rectf.set(100, 100, width - 100, height - 100); 
    } 

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


     for (int i = 0; i < value_degree.length; i++) { 
      // set type of "brush" 
      paint.setStrokeWidth(128); 
      paint.setStyle(Paint.Style.STROKE); 
        // agree 
      if (i == 0) { 
       final Path path = new Path(); 
       paint.setColor(COLORS[i]); 
       // draw 3 paths to show 3 curves 
       path.addArc(rectf, 180, value_degree[i] - 4); 
//    path.addArc(rectf2, 180, value_degree[i] - 5); 
//    path.addArc(rectf3, 180, value_degree[i] - 6); 
       // draw the path 
       canvas.drawPath(path, paint); 

       // disagree 
      } else { 
       temp += (int) value_degree[i - 1]; 
       paint.setColor(COLORS[i]); 
       final Path path = new Path(); 
       path.addArc(rectf, temp + 180 , value_degree[i] - 0); 
//    path.addArc(rectf2, temp + 180 + 5, value_degree[i] - 5); 
//    path.addArc(rectf3, temp + 180 + 6, value_degree[i] - 6); 
       // draw the path 
       canvas.drawPath(path, paint); 
      } 


      drawLine(canvas); 

     } 
    } 
    private void drawLine(Canvas canvas) { 
     float startAngle = 180; 
     float sweepAngle = 180; 
     Paint mPaint = new Paint(); 
     mPaint.setStrokeWidth(22f); 
     mPaint.setColor(Color.BLACK); 
     mPaint.setStyle(Paint.Style.FILL_AND_STROKE); 
     float startX = rectf.centerX(); 
     float startY = rectf.centerY(); 
     float radius = rectf.centerX() - 100; 
     float angle = (float) ((startAngle + sweepAngle/2) * Math.PI/180); 
     float stopX = (float) (startX + radius * Math.cos(angle)); 
     float stopY = (float) (startY + radius * Math.sin(angle)); 

     canvas.drawLine(startX, startY, stopX, stopY, mPaint); 
    } 


} 

從使用

float values[] = { 10, 20, 30, 40}; 
LinearLayout linear = (LinearLayout) findViewById(R.id.graph_view); 
     values = calculateData(values); 
     // draw the graf 
     linear.addView(new MyGraphView(this, values)); 

的活動我稱之爲這是我的活動XML代碼

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="in.ashish29agre.stackoverflow.sample.semicircle.SemiCircleActivity"> 

    <LinearLayout 
     android:id="@+id/graph_view" 
     android:layout_width="200dp" 
     android:layout_height="200dp" 
     android:orientation="vertical" 
     android:layout_centerInParent="true" 
     android:layout_alignParentTop="true"></LinearLayout> 
</RelativeLayout> 

enter image description here

目前的觀點看起來像這現在我想添加可以從0-180度移動的米手。

任何幫助將不勝感激。

現在,我已經繪製了針,我想製作一個針位圖?

+0

請加針法師,預期結果的圖像看針的位置,大小。 – Gavriel

回答

2

您可能需要爲針位圖設置動畫。這裏是我的代碼:

RotateAnimation animation = 
    new RotateAnimation(
     mCurrentAngle, 
     toAngle, 
     Animation.RELATIVE_TO_SELF, 
     pivotX, 
     Animation.RELATIVE_TO_SELF, 
     pivotY); 

animation.setRepeatCount(0); 
animation.setFillAfter(true); 
animation.setFillEnabled(true); 
animation.setInterpolator(new OvershootInterpolator()); 
animation.setDuration(duration); 
mMeterPointer.startAnimation(animation); 

其中mMeterPointer是針的ImageView。

pivotXpivotY值應該在針圖像旋轉的位置。它們的值應該是0 to 1,例如0.5和0.5,如果你想讓它在位圖中間旋轉。

+0

我在這裏使用UsingView沒有ImageView – sector11

+0

您可以使用ImageView而不是直接繪製Bitmap。上面的代碼是旋轉來自樞軸點的任何視圖。 –

+0

是的,謝謝你,但那不是真正的問題朋友:) – sector11

2

添加到您的類:

Matrix matrix; 
Bitmap needle; 

您MyGraphView構造:

matrix = new Matrix(); 

和這onMeasure()的結尾:

needle = decodeSampledBitmapFromResource(context.getResources(), 
      R.drawable.icon_resource, (int)rectf.width(), (int)rectf.height()); 

和的drawLine( ):

private void drawLine(Canvas canvas) { 
    float startAngle = 180; 
    float sweepAngle = 180; 

    // of course you'll need to calculate the actual angle here: 
    float angle = (float) ((startAngle + sweepAngle/2) * Math.PI/180); 

    matrix.reset(); 
    // move the needle to IT's center. You might need different 
    // values depending on your drawable, probably the axis will not 
    // be in the middle 
    matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getWidth()/2); 
    // and rotate it 
    matrix.postRotate(angle); 

    // move the needle to the semi circle's center 
    matrix.postTranslate(rectf.centerX(), rectf.centerY()); 
    canvas.drawBitmap(needle, matrix, null); 
} 

public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId, 
     int reqWidth, int reqHeight) { 

    // First decode with inJustDecodeBounds=true to check dimensions 
    final BitmapFactory.Options options = new BitmapFactory.Options(); 
    options.inJustDecodeBounds = true; 
    BitmapFactory.decodeResource(res, resId, options); 

    // Calculate inSampleSize 
    options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight); 

    // Decode bitmap with inSampleSize set 
    options.inJustDecodeBounds = false; 
    return BitmapFactory.decodeResource(res, resId, options); 
} 
+0

不正確?爲什麼針圖像的標題看起來好像我增加了一些更多的價值 – sector11

+0

@ sector11,那麼,讓我看看drawable和截圖。 – Gavriel

+0

是的,我們怎麼樣才能讓它動起來。但首先讓它正常工作 – sector11

1

添加到@ bennegeek的答案你可以試試這個

private void setAngleToNeedle() { 
int value = 675; 
int maxValue = 1000; 
int angleDifference = 180; 
int endingAngle = (int) (((float) value/maxValue) * (angleDifference)); 
final RotateAnimation rotateAnim = new RotateAnimation(-90, -90 + endingAngle, 
RotateAnimation.RELATIVE_TO_SELF, 0.5f, 
RotateAnimation.RELATIVE_TO_SELF, 1f); 


rotateAnim.setDuration(1500); 
rotateAnim.setInterpolator(new LinearInterpolator()); 
rotateAnim.setFillAfter(true); 
needleIv.startAnimation(rotateAnim); 
} 
+0

完美的是我所尋找的,現在我甚至不需要在畫布上畫針。 – sector11

+0

@ sector11,「是的,謝謝你,但那不是真正的問題朋友」 – Gavriel

+0

Gavriel他給我的解決方案關閉它。接受你的答案。請不要介意感謝您的幫助。 – sector11