Canvas.drawLines displaying unrelated segments

Question

Possible duplicate:
Android How to draw a smooth line by following a finger

I am new to Android and Java programming, and have had some fun with mobile app development. I recently created a View that simply continues to draw lines in stride with user finger movements. However, I am having problems with the Canvas.drawLines method.

Instead of getting a continuous set of lines between all points, I get more line art with breaks between segments:

Here is an example of a data set and simple code to reproduce the problem (point data was taken from a real finger):

public class SomeView extends android.view.View { private float[] _data = { 292.36545f, 104.37576f, 285.3567f, 112.39249f, 274.34293f, 113.39456f, 254.3179f, 115.39874f, 248.3104f, 116.40082f, 228.28535f, 118.405f, 214.26784f, 119.407104f, 211.26408f, 119.407104f, 204.25533f, 120.40918f, 202.25282f, 120.40918f, 201.25157f, 121.411255f, 199.24907f, 124.41754f, 197.24657f, 125.41962f, 196.24532f, 130.43005f, 195.24406f, 139.44885f, 197.24657f, 144.45929f }; private Paint _paint; public SomeView( Context c, AttributeSet attrs) { super( c, attrs ); _paint = new Paint(); _paint.setColor(Color.BLUE); _paint.setStrokeWidth(6); } @Override public void onDraw(Canvas canvas) { canvas.drawLines( _data, _paint); } } 

After building each point and laying it on top of the line, I realized that the problem is that each point is not connected, but only every two points. Instead of connecting points 1 to point 2 to point 3, etc., the Method connects from 1 to 2, and then from 3 to 4, as shown below:

I can get almost everything I want by calling drawLines and providing an offset this time so that the other pairs come together, but this seems inefficient and generally awkward for me, and the line still isn’t completely smooth (slightly choppy in the corners).

So my question is: what am I doing wrong and how can I draw a simple smooth line, given a certain amount of points? Damn, forget about the points, if there is a better way to trace the user's finger with the line, I’m all ears. Thanks in advance.

Answer 1

What you get is exactly what the drawLines documentation drawLines .

One way to do what you want is to build a Path from this data and use drawPath rather than drawLines . Something like:

 Path _path = new Path(); _path.moveTo(_data[0], _data[1]); for (int i=2; i<_data.length; i+=2) { _path.lineTo(_data[i], _data[i+1]); } 

Then draw it with

 _canvas.drawPath(_path, _paint) 

From Path docs:

The Path class encapsulates geometric connection paths (multiple contours) consisting of straight line segments , quadratic curves, and cubic curves. It can be drawn using canvas.drawPath (path, paint), either filled or stroked (based on the Paint style)

Thus, you may need to change your drawing style to get the right effect.

Answer 2

I just ran into this question tonight. For those who are faced with this, the problem is that Android does not draw from point 1 to point 2, then from 2 to 3, from 3 to 4, etc. He will collect points from 1 to 2, then from 3 to 4, etc. Thus, you can also double-click the previous point on any used data structure (I used Vector). So:

 private Vector<Float> mPoints = new Vector<Float>(); private float mLastX = Float.NaN; private float mLastY = Float.NaN; public void addPoint(float x, float y) { if (mLastX == Float.NaN || mLastY == Float.NaN) { mLastX = x; mLastY = y; } else { mPoints.add(mLastX); mPoints.add(mLastY); mPoints.add(x); mPoints.add(y); mLastX = x; mLastY = y; } } 

Then just make sure you convert your mPoints to float [] and pass this to canvas.drawLines() .