Рисовать изогнутый путь на холсте?

Question

Как можно нарисовать квадратичную или тригонометрическую кривую (например, sin(x)) на Canvas?

Answer 1

Как и вы, мне нужно было нарисовать изогнутую линию от point(x1, y1) до point (x2, y2). Я провел некоторые поиски, которые привели меня к классу Path (android.graphics.Path). Путь имеет множество методов для рисования линий. Как только вы создали путь, вы используете метод рисования, чтобы создать реальную линию. Пути можно вращать, преобразовывать, сохранять и добавлять в. Есть дуги, круги и прямоугольники, которые также нарисованы этим классом.

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

Установить начальную точку пути → mPath.moveTo(x1, y1);

Установка постоянной и конечной точек → mPath.quadTo(cx, cy, x2, y2);

Преобразовать путь в строку → canvas.drawPath(mPath, mPaint);

Answer 2

Вот метод drawEquation (), который я написал для класса Graph - думаю, это может помочь. Основная идея - создать метод, который принимает уравнение (которое в основном является просто функцией), например

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

, а затем переберите границы графика и нарисуйте маленькие сегменты, соединяющие каждую точку. TransformContext () просто инвертирует контекст холста, так что увеличивающиеся значения y идут вверх, а не вниз:

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();

};

Answer 3

Использование Canvas.drawPath и Path.quadTo.

Answer 4

Большинство API рисования не предоставляют таких функций, вам придется вычислять пиксели желаемой кривой в пикселях и рисовать по частям на холсте, используя один или несколько вызовов API холста.

Answer 5

Я собираюсь предположить, что вы знакомы с рисованием основных линий на холсте, если нет, то ответьте, и мы можем углубиться назад.Однако, что касается простого рисования синусоидальной функции, в классе Math есть функция, которая имеет именно то, что вам нужно.http://download.oracle.com/javase/1.4.2/docs/api/java/lang/Math.html#sin%28double%29 Оттуда вам просто нужно передать переменную x (в радианах) в функцию и сохранить ее вывод как переменную y.Это представляет точку на вашем графике.Теперь немного увеличьте переменную x1 (возможно, 1/100 вашего графика, хотя вам нужно будет настроить ее по вкусу), снова запустите ее через функцию и сохраните эти переменные (x2 и y2) в качестве второй точки.Проведите линию между этими двумя точками.Сохраните переменные x2, y2 как x1, y1 и снова увеличьте значение x, чтобы найти третью точку, и так далее, и тому подобное.Это не «истинная» кривая, поскольку на самом деле это просто серия линий, которые приближают функцию, если хотите, подход исчисления.

Итак:

x1 = x;// где x - это некоторая точка на оси x, с которой вы хотели бы начать построение графика.

y1 = sin (x);

x2 = x1 + increment;

y2 = sin (x2);

// Нарисуйте здесь линию

x1 = x2;y1 = y2;

// вернемся к началу, этот код, очевидно, будет в цикле, в котором используется приращение в качестве собственного приращения с начальным значением, равным величине, которую вы хотите увеличивать каждый раз (скажем,.... 5) и следующим оператором является increment = increment + 5.

Существует также класс GraphCanvas, с которым я не знаком, который, кажется, берет те же точки и рисует кривую между ними,хотя я не уверен, какой тип преобразования используется для рисования кривой и насколько это точно.Вот класс: http://www.java2s.com/Code/Java/Swing-Components/GraphCanvas.htm