在畫布上畫一條彎曲的路徑？

Question

如何在Canvas上繪制二次曲線或三角曲線（如sin(x) ）？

Answer 1

像你一樣，我需要畫一條從point(x1, y1) point (x2, y2)的曲線。 我做了一些搜索，引導我到Path類（ android.graphics.Path ）。 Path有許多繪制線條的方法。 創建路徑后，使用draw方法創建實際線。 可以旋轉，轉換，保存和添加路徑。 還有用這個類繪制的弧形，圓形和矩形。

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

設置路徑起點→ mPath.moveTo(x1, y1);

設置常量和終點→ mPath.quadTo(cx, cy, x2, y2);

將路徑轉換為line→ canvas.drawPath(mPath, mPaint);

Answer 2

這是我為Graph類編寫的drawEquation（）方法 - 我認為它可能有所幫助。 創建一個接受方程式（基本上只是一個函數）的方法的基本思路就像

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

大多數繪圖API不提供此類功能，您必須使用對canvas API的一次或多次調用，以像素為單位計算所需曲線的像素並在畫布上逐個繪制。

Answer 4

使用Canvas.drawPath和Path.quadTo 。

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 +增量;

y2 = sin（x2）;

//在這里畫一條線

x1 = x2; y1 = y2;

//返回頂部，這段代碼顯然是在一個循環中，其中使用遞增，因為它是自己的增量，初始值等於你想要每次遞增的量（讓我們說.... 5）和“下一個“語句增量=增量+ 5。

還有一個我不熟悉的GraphCanvas類，它似乎采用了相同的點並在它們之間繪制曲線，但我不確定使用什么類型的變換來繪制曲線以及它的精確程度。 這是類： http ： //www.java2s.com/Code/Java/Swing-Components/GraphCanvas.htm