Draw a curved path on Canvas?

How could I draw a quadratic c开发者_JAVA技巧urve or a trigonometric curve (such as sin(x)) on a Canvas?

Like you, I needed to draw a curved line from point(x1, y1) to point (x2, y2). I did some searching around which lead me to the Path class (android.graphics.Path). Path has numerous methods for drawing lines. Once you have created a path you use a draw method to make the actual line. The paths can be rotated, transformed, saved, and added to. There are arcs, circles, and rectangles that be drawn with this class too.

http://developer.android.com/reference/android/graphics/Path.html

Set start point of path → mPath.moveTo(x1, y1);

Set constant and end points → mPath.quadTo(cx, cy, x2, y2);

Convert path to line → canvas.drawPath(mPath, mPaint);

Here is a drawEquation() method I wrote for a Graph class - I think it may help. The basic idea to create a method that accepts an equation (which is basically just a function) like

function(x) = Math.sin(x);

and then loop through the bounds of the graph and draws small segments connecting each point. The transformContext() just inverts the canvas context so that increasing values of y go upwards and not downwards:

Graph.prototype.transformContext = function(){
    var canvas = this.canvas;
    var context = this.context;

    // move context to center of canvas
    this.context.translate(this.centerX, this.centerY);

    // stretch grid to fit the canvas window, and 
    // invert the y scale so that that increments
    // as you move upwards
    context.scale(this.scaleX, -this.scaleY);
};

Graph.prototype.drawEquation = function(equation, color, thickness){
    var canvas = this.canvas;
    var context = this.context;

    context.save();
    this.transformContext();

    context.beginPath();
    context.moveTo(this.minX, equation(this.minX));

    for (var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) {
        context.lineTo(x, equation(x));
    }

    context.restore();
    context.lineJoin = "round";
    context.lineWidth = thickness;
    context.strokeStyle = color;
    context.stroke();

};

Most drawing APIs dont provide such functions, you will have to calculate the pixels of your desired curve in pixels and draw piece by piece on the canvas using one or more calls to the canvas API.

Use Canvas.drawPath and Path.quadTo.

I'm going to assume that you are familiar with drawing basic lines on a canvas, if not then respond back and we can delve further back. However, as far as just drawing a sine function there is a function within the Math class that has just what you need. http://download.oracle.com/javase/1.4.2/docs/api/java/lang/Math.html#sin%28double%29 From there you just need to pass your x variable(in radians) into the function and save it's output as a y variable. This represent a point on your graph. Now increment the x1 variable by a small amount (perhaps 1/100 of your graph, though you will need to adjust this to taste), run it through the function again and save those variables(x2 and y2) as your second point. Draw a line between these two points. Save your x2,y2 variables as x1, y1 and increment your x value again to find the third point, so on and so forth. This is not a "true" curve as it is really just a series of lines which approximate the function, a calculus approach if you will.

So:

x1 = x; // where x is some point on the x axis which you would like to start graphing at.

y1 = sin(x);

x2 = x1 + increment;

y2 = sin(x2);

//Draw a line here

x1 = x2; y1 = y2;

//return to top, this code would obviously be in a loop in which uses increment as it's own increment with the initial value being equal to the amount you want to increment each time(let's say....5) and the "next" statement being increment = increment + 5.

There is also a GraphCanvas class which I am unfamiliar with which appears to take those same points and draw the curve between them, though I am unsure what sort of transform is being used to draw the curve and how accurate that is. Here is the Class: http://www.java2s.com/Code/Java/Swing-Components/GraphCanvas.htm