在 Canvas 上画一条弯曲的路径？答案

【问题标题】：Draw a curved path on Canvas?在 Canvas 上画一条弯曲的路径？
【发布时间】：2011-07-17 02:25:37
【问题描述】：

如何在Canvas 上绘制二次曲线或三角曲线（例如sin(x)）？

【问题讨论】：

【解决方案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);

将路径转换为行→canvas.drawPath(mPath, mPaint);

【讨论】：

【解决方案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();

};

【讨论】：

【解决方案3】：

大多数绘图 API 不提供此类功能，您必须以像素为单位计算所需曲线的像素，并使用对画布 API 的一次或多次调用在画布上逐块绘制。

【讨论】：

【解决方案4】：

使用Canvas.drawPath 和Path.quadTo。

【讨论】：

【解决方案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

【讨论】：