在画布上绘制多条线,中间有延迟 [英] Drawing multiple lines on canvas with delay in between
问题描述
几个月后,我终于设法创建了我的第一个非平凡的应用程序. 现在,我想添加一些不错的动画(不确定它是否是一个合适的术语),例如逐步绘制图形.下面的Gif解释了我所需要的.此时,我的应用程序立即绘制了图形,没有任何延迟.
after few months i finally managed to create my first non trivial app. Now I want to add some nice animation (not sure it is a proper term), like step-by-step drawing my graph. Gif below explains what I need. At this point my app draw the graph at once, without any delaying.
在MyFragment类中,有一个FrameLayout,其中添加了自定义视图(我的图形):
In MyFragment class there is FrameLayout where custom View (my graph) is added:
public class MyFragment extends Fragment{
...
FrameLayout mFL;
MyDraw mydraw = new MyDraw(getContext(),floatArray_coord_X,floatArray_coord_Y);
mFL.addView(mydraw);
...
}
然后在我的自定义视图类中进行一些计算并绘制线条:
Then in my custom view class some calc are made and lines are drawn:
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中调用它不好(至少我的尝试不好)... 任何建议如何实现这一目标?
I tried to accomplish that by using Handler/Runnable - now i know that calling it inside onDraw isn`t good (at least my attempt wasn't good)... Any suggestion how to achieve this?
推荐答案
每次调用View.onDraw()
方法都应绘制图表的下一行,这看起来像您描述的动画.要获得帧之间的延迟,可以使用View.postInvalidateDelayed()
:
Each call of View.onDraw()
method should draw next line of your chart and this will looks like animation you described. To achieve delay between frames you can use View.postInvalidateDelayed()
:
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));
}
从活动"开始动画:
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);
这篇关于在画布上绘制多条线,中间有延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!