如何制作动画的图形被绘制在Android中 [英] How to animate a graph being drawn in Android
问题描述
我需要一个动画线图的绘制。我将接收的值（可能为0和10之间）的阵列，并具有去随时间的曲线图。我想要绘制的线图，和附图应该是可见的;动画。
I need to animate the drawing of a line graph. I'll receive an array of values (probably between 0 and 10) and that has to go on a graph over time. I want the line graph to be drawn, and the drawing should be visible; animated.
我看了安德斯·爱立信的教程在这里：<一href=\"http://www.jayway.com/2012/08/29/creating-custom-android-views-part-3-animating-your-custom-views-smoothly/#comment-105813\" rel=\"nofollow\">http://www.jayway.com/2012/08/29/creating-custom-android-views-part-3-animating-your-custom-views-smoothly/#comment-105813
I've looked at Anders Ericsson's tutorial here: http://www.jayway.com/2012/08/29/creating-custom-android-views-part-3-animating-your-custom-views-smoothly/#comment-105813
在code在这里： https://github.com/andersericsson/ViewTutorialPart3
但我似乎无法摆动它的工作我的方式。
But I can't seem to swing it to work my way.
有另一种解决办法了吗？
Is there another solution out there?
推荐答案
我最终使用参与类，我延长查看代数运算解决方案。
The solution I ended up using involved some algebra in the class where I extended View.
该函数从活性（0和10之间的值）的分数的数组，并使用值的两个对二作为起点和终点的线（请注意，一条线的终点为起始点下一行）。
The function gets the array of scores (values between 0 and 10) from the activity and uses the values two-by-two as start and end points to a line (note that the end point of one line is the start point of the next line).
它计算线的长度和多少段将在线路;还能走多远在 X 方向，以及如何为在是方向移动移动。
It calculates the length of the line and how many segments will be in the line; also how far to move in the x direction and how for to move in the y direction.
然后计算 X 和是首段在线路末端的价值观和绘制分割。
Then it calculates the x and y values of the end of the first segment in the line and draws that segment.
然后 x方向和 yDirection 添加到 X 和是点分别与线再次吸入，现在包括该行的第一和第二部分。这是在该行每个环节完成，然后从的最后一行点A 到绘制点B 。
Then the xDirection and yDirection is added to the x and y points respectively and the line is drawn again, which now includes the first and second segment of the line. This is done for every segment in the line, and then the final line from point A to point B is drawn.
但它无法完成 - 整个在使用setData 函数循环应放置在一个递归函数，因为 postInvalidateDelayed（）不暂停循环的执行。
But it's not complete - the entire for loop in the setData function should be placed in a recursive function, because postInvalidateDelayed() doesn't pause the for loop from executing.
但是，没有在画布上绘制所有，因此链接到我的其他问题目前这样：<一href=\"http://stackoverflow.com/questions/17170453/why-is-my-lines-not-drawn-on-my-custom-view-canvas\">Why是我行不在我的（自定义视图）帆布画？
However, nothing is drawn on the canvas at all, hence the link to my other question currently on SO: Why is my lines not drawn on my (custom View) canvas?
但对于这个问题，我认为我结束了使用的解决方案可能是没有那么糟糕。评论？
But for this question, I think that the solution I ended up using is probably not so bad. Comments?
public void setData(float[] scorePoints, float max, int totalScores){
Log.d(TAG, "Get stuff from activity");
scores = scorePoints;
numberOfScores = totalScores;
Log.d(TAG, "Number of scores = " + numberOfScores);
maxScore = max;
Log.d(TAG, "Max score = " + maxScore);
segmentToDraw = (float) 10;
//get the width of the area to draw
width = Math.abs(getWidth() - getPaddingLeft() - getPaddingRight());
//get the height of the area to draw
height = getHeight() - getPaddingTop() - getPaddingBottom();
Log.d(TAG, "Drawable area in view = " + width + " x " + height);
/*
* Now we start filling an array of points.
* The onDraw function will drawLines of groupings of four points in a given array.
*
* For the first segment, we'll draw from the x and y of the first point (which will be in the 1st and 2nd spots in our array)
* to the x and y of the first segment (which will be in the 3rd and 4th spots in our array).
* And then the 3rd and 4th spots in our array will be replaced by a new x and y
* marking the end of the second segment to be drawn from our first point.
*
* This will happen until the x and y is not smaller than the x and y of the final point of the line, any more.
* Then the 3rd and 4th spots in our array will be replaced by the x and y of the final point of the line.
*
* If there are more points to draw, the 5th and 6th spots in our array will also be created and filled with
* the x and y of the final point of the line because it'll be the first two values (x and y) for drawing the next line.
*
* So, yes, there will be duplicates in our array of points to draw, but a grouping of four spots will be used to draw one line,
* and the end point of the first line is the starting point of the second line, so we need it twice.
*/
points.add(getXPos(scores[0]));
points.add(getYPos(scores[0]));
points.add((float) 0);
points.add((float) 0);
x = points.get(0);
y = points.get(1);
startPoint = scores[0];
endPoint = scores[1];
for(int i=0; i<scores.length-1; i++){
String thePoints = "";
if(i>0){
startPoint = scores[i];
endPoint = scores[i+1];
x = points.get(i*4);
y = points.get((i*4) + 1);
}
startPointX = getXPos(startPoint);
startPointY = getYPos(startPoint);
endPointX = getXPos(endPoint);
endPointY = getYPos(endPoint);
distanceOfLine = (float) Math.sqrt(Math.pow((endPointX - startPointX), 2) + Math.pow((endPointY - startPointY), 2));
Log.d(TAG, "Distance of line = " + distanceOfLine);
//get number of segments in line
numberOfSegmentsInLine = (int) (distanceOfLine/segmentToDraw);
Log.d(TAG, "Number of segments in line = " + numberOfSegmentsInLine);
//get distance to move in Y direction
yDirection = (float) ((endPointY - startPointY)/ (float) numberOfSegmentsInLine);
Log.d(TAG, "Move " + yDirection + " in Y direction");
//get distance to move in X direction
xDirection = (float) ((endPointX - startPointX)/ (float) numberOfSegmentsInLine);
Log.d(TAG, "Move " + xDirection + " in X direction");
//loop for each segment
for(int j=0; j<numberOfSegmentsInLine; j++){
x += xDirection;
y += yDirection;
points.set(points.size()-2, Float.valueOf(x));
points.set(points.size()-1, Float.valueOf(y));
Log.d(TAG, "Line : " + (i+1) + " Segment : " + j);
Log.d(TAG, "X = "+ (x+xDirection) + " Y = " + (y+yDirection));
Log.d(TAG, "Call invalidate now!");
//invalidate();
//postInvalidateDelayed(delayMilliseconds);
}
//draw final line
points.set(points.size()-2, endPointX);
points.set(points.size()-1, endPointY);
invalidate();
//postInvalidateDelayed(delayMilliseconds);
if(i<scores.length-2){
points.add(endPointX);
points.add(endPointY);
points.add((float) 0);
points.add((float) 0);
}
for(int k =0; k<points.size(); k++){
thePoints = thePoints + " : " + points.get(k);
}
Log.d(TAG, "Points array = " + thePoints);
}
}
@Override
public void onDraw(Canvas canvas){
//setWillNotDraw(true);
Log.d(TAG, "DRAW DAMNIT!!!");
Log.d(TAG, "Width = " + (int) width + " Height = " + (int)height);
paint = new Paint();
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(4);
paint.setColor(Color.RED);
//paint.setAntiAlias(true);
//paint.setShadowLayer(4, 2, 2, 0x81000000);
Bitmap bitmap = Bitmap.createBitmap((int)width, (int)height, Bitmap.Config.ARGB_8888);
canvas = new Canvas(bitmap);
String drawPointsGo = "";
float[] drawPoints = new float[points.size()];
for(int i=0; i<points.size(); i++){
Float f = points.get(i);
drawPoints[i] = (float) (f != null ? f : 0.0);
drawPointsGo = drawPointsGo + " : " + drawPoints[i];
}
Log.d(TAG, "Draw Points: " + drawPointsGo);
canvas.drawLines(drawPoints, paint);
}
这篇关于如何制作动画的图形被绘制在Android中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
