2017-11-10 1 views
1

사이에 지연된 캔버스에 여러 줄을 그려서 마침내 내 첫 번째 사소한 응용 프로그램을 만들 수있었습니다. 이제 그래프를 단계별로 그리는 것과 같은 멋진 애니메이션을 추가하고 싶습니다. 적절한 용어인지는 확실하지 않습니다. 아래 GIF는 내가 필요한 것을 설명합니다. 이 시점에서 내 앱은 지연없이 한 번에 그래프를 그립니다.몇 달 후

public class MyFragment extends Fragment{ 
... 
FrameLayout mFL; 
MyDraw mydraw = new MyDraw(getContext(),floatArray_coord_X,floatArray_coord_Y); 
mFL.addView(mydraw); 
... 

} 그런 다음

내 사용자 정의 뷰 클래스의 일부 석회질이 만들어지고 라인은 다음과 같습니다 MyFragment 클래스에서

I need something like on this pic

사용자 정의보기 (내 그래프)를 첨가 FrameLayout이있다 그려진 그림 :

public class MyDraw extends View{ 
    private Bitmap mBitmap; 
    private Canvas mCanvas; 
    ... 

    @Override 
    public void onDraw(Canvas canvas){ 

    mBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), 
            Bitmap.Config.ARGB_8888); 
    mCanvas = new Canvas(bitmap);  
    ... 

    // draw brown lines between two neighbour (X,Y) points 
    for (int i = 0; i < floatArray_coord_X.length - 1; i++) { 
      mCanvas.drawLine(floatArray_coord_X[i],  floatArray_coord_Y[i], 
          floatArray_coord_X[i + 1], floatArray_coord_Y[i + 1], 
          mypaint0); 
     } 

    ... 
    // draw black lines at calculated (X,Y) points 
    for (int i = 0; i < floatArray_coord_X_calc.length - 1; i++) { 
      mCanvas.drawLine(floatArray_coord_X_calc[i],  floatArray_coord_Y_calc[i], 
          floatArray_coord_X_calc[i + 1], floatArray_coord_Y_calc[i + 1], 
          mypaint1); 
     } 
    ... 
    // draw blue lines at newly calculated (X,Y) points 
    drawBlueLines(); // with extra calc 
    ...  

    canvas.drawBitmap(bitmap, 0, 0, null); 
} 

Handler/Runnable을 사용하여이를 수행하려고 시도했습니다. 이제는 onDraw isn`t를 호출하는 것이 좋지 않습니다. (최소한 내 시도는 좋지 않았습니다.) 제안 방법이 작업을 수행하는 방법은 무엇입니까?

답변

1

View.onDraw() 메서드를 호출 할 때마다 차트의 다음 줄이 그려야하며, 이는 설명하는 애니메이션처럼 보입니다. 활동에서

private ArrayDeque<Point> mPoints = new ArrayDeque<>(); 
private Path mPath; 
private Paint mPaint; 
private int mBackgroundColor; 
... 
@Override 
protected void onDraw(Canvas canvas) { 
    Point nextPoint = mPoints.pollFirst(); 
    if (nextPoint != null) { 
     mPath.lineTo(nextPoint.x, nextPoint.y); 
     canvas.drawColor(mBackgroundColor); 
     canvas.drawPath(mPath, mPaint); 
     if (mPoints.size() > 0) { 
      postInvalidateDelayed(TimeUnit.SECONDS.toMillis(1)); 
     } 
    } 
} 

public void drawChart(List<Point> points, int backgroundColor, int foregroundColor) { 
    mPoints.addAll(points); 
    mBackgroundColor = backgroundColor; 
    mPaint = new Paint(); 
    mPaint.setColor(foregroundColor); 
    mPaint.setStrokeWidth(5); 
    mPaint.setStyle(Paint.Style.STROKE); 
    mPath = new Path(); 
    mPath.moveTo(0,0); 
    postInvalidateDelayed(TimeUnit.SECONDS.toMillis(1)); 
} 

시작 애니메이션 : 프레임 사이의 지연을 달성하기 위해 당신은 View.postInvalidateDelayed()을 사용할 수 있습니다

ChartView chart = (ChartView) findViewById(R.id.chart); 
List<Point> points = new ArrayList<>(); 
points.add(new Point(0, 200)); 
points.add(new Point(200, 200)); 
points.add(new Point(200, 0)); 
points.add(new Point(0,0)); 
chart.drawChart(points, Color.BLACK, Color.RED); 
관련 문제