如何使通过点线曲线 [英] How to make a line curve through points

问题描述

我正在寻找一种方式，通过多个点，使线曲线。这将是preferable使用3个点虽然我认为，为了得到上下文进入更可能需要给上下文曲线可以说一个点的线的角度。

I'm looking for a way to make a line curve through a number of points. It would be preferable to use 3 points although I've considered that in order to give context to the angle of the line entering a point more may be needed to give context to the curve so to speak.

在一般的开始点P1，控制点P2和终点P3时，线应该从P1曲线到P2，然后曲线从P2到P3。

In general a start point P1, a control point P2 and an end point P3, the line should curve to P2 from P1 and then curve from P2 to P3.

在这里其实是我想达到的效果一个完美的例子：

In fact here is a perfect example of the effect I would like to achieve:

如果我能做到这一点，我真的会永远感激！

If I could do this I really would be eternally grateful!

在Java的，到目前为止，我已经试过的东西，如的 QuadCurve2D.Double ，的崽icCurve2D.Double 也的 Path2D.Double （使用curveTo与Path2D.Double），但无济于事 - 这是画，甚至没有接近通过指定的控制点曲线

In Java so far, I have tried playing around with things such as QuadCurve2D.Double , Cub icCurve2D.Double and also Path2D.Double (using curveTo with Path2D.Double) but to no avail - the curves which are painted aren't even close to passing through the control point specified.

下面是到目前为止我曾尝试方法图像：

Here is an image of the methods I have tried so far :

这里是code我用来生成图像中的点和曲线：

And here is the code I used to generate the points and curves in the image :

    Graphics2D g = (Graphics2D) window.getGraphics();
    g.setColor(Color.blue);
    int d = 4;

    // P0
    int x0 = window.getWidth()/8;
    int y0 = 250;
    g.drawString("P0", x0, y0 + 4*d);
    g.fillRect(x0, y0, d, d);

    // P1
    int x1 = (window.getWidth()/7)*2;
    int y1 = 235;
    g.drawString("P1", x1, y1 + 4*d);
    g.fillRect(x1, y1, d, d);

    // P2
    int x2 = (window.getWidth()/2);
    int y2 = 200;
    g.drawString("P2", x2, y2 - 2*d);
    g.fillRect(x2, y2, d, d);

    // P3
    int x3 = (window.getWidth()/7)*5;
    int y3 = 235;
    g.drawString("P3", x3, y3 + 4*d);
    g.fillRect(x3, y3, d, d);

            // P4
    int x4 = (window.getWidth()/8)*7;
    int y4 = 250;
    g.drawString("P4", x4, y4 + 4*d);
    g.fillRect(x4, y4, d, d);

    g.setColor(Color.cyan);
    QuadCurve2D quadCurve = new QuadCurve2D.Double(x0, y0, x2, y2, x4, y4);
    g.draw(quadCurve);


    g.setColor(Color.YELLOW);
    CubicCurve2D.Double cubicCurve = new CubicCurve2D.Double((double)x0, (double)y0, 
                                                             (double)x1, (double)y1, 
                                                             (double)x2, (double)y2, 
                                                             (double)x4, (double)y4);
    g.draw(cubicCurve);


    g.setColor(Color.red);      
    Path2D.Double path1 = new Path2D.Double();
    path1.moveTo(x1, y1);
    path1.curveTo(x0, y0, x2, y2, x4, y4);
    g.draw(path1);

我想为一条曲线通过点的原因是，我想'抚平'上我已经写了线图的顶点之间的过渡。之前有人提到它的 JFree图是不是一种选择即可。据我所知，他们是采用不同类型的曲线和样条曲线，但我还没有理解他们究竟是如何工作或如何实现的东西适合我的需要。

My reasons for wanting a curved line to pass through points is that I want to 'smoothen' the transition between vertices on a line graph I have written. Before anyone mentions it JFree Chart is not an option. I understand there are different types of curves and splines that are used but I've not had much luck in understanding exactly how they work or how to implement something that suits my needs.

我要成为提供任何帮助真的很感谢 - 谢谢提前

I would be really grateful for any help offered - Thanks in advance.

推荐答案

我想你错过了一个什么样的的控制点的是观念。控制点一般不路径本身上。相反，他们控制的路径的曲线是如何形点之间。看到花键教程的全部细节。

I think you're missing the idea of what a control point is. Control points are generally not on the path itself. Instead they control how the curve of the path is shaped between points. See a spline tutorial for full details.

现在手头上的问题，你有曲线，但没有实际的控制点上的点。有一些技术，如红衣主教花键，用于推导控制点，然后传递到你提到的曲线绘图API之一。你可能想在 Path2D.Double 选项，这样你就可以顺利地串起来单独曲线。

Now to the problem at hand, you have points on the curve but no actual control points. There are some techniques, like Cardinal Spline, for deriving control points to then pass to one of the curve drawing APIs you mention. You probably want the Path2D.Double option so you can smoothly string together individual curves.

所以，从P1绘图P2到P3，而不是

So for drawing from P1 to P2 to P3, instead of

Path2D.Double path1 = new Path2D.Double();
path1.moveTo(x1, y1);
path1.curveTo(x0, y0, x2, y2, x4, y4);
g.draw(path1);

您想

Path2D.Double path1 = new Path2D.Double();
path1.moveTo(x1, y1);
path1.curveTo(cx1a, cy1a, cx1b, cy1b, x2, y2);
path1.curveTo(cx2a, cy2a, cx2b, cy2b, x3, y3);
g.draw(path1);

其中 CX 和 CY 坐标是你的派生控制点，每立方样条段两个控制​​点。也许，

where the cx and cy coordinates are your derived control points, two control points per cubic spline segment. Possibly,

cx1a = x1 + (x2 - x1) / 3;
cy1a = y1 + (y2 - y1) / 3;
cx1b = x2 - (x3 - x1) / 3;
cy1b = y2 - (y3 - y1) / 3;
cx2a = x2 + (x3 - x1) / 3;
cy2a = y2 + (y3 - y1) / 3;
cx2b = x3 - (x3 - x2) / 3;
cy2b = y3 - (y3 - y2) / 3;

这里的图案是，对于内部点（仅P2在这种情况下）之前和之后它的控制点（C1B和C2A）由点之间的线的前斜率和之后（P1和P3偏移）。为边缘点时，控制点基于该点与下一个最接近点之间的斜率

The pattern here is that for the interior points (only P2 in this case) the control points before and after it (c1b and c2a) are offset by the slope of the line between the points before and after it (P1 and P3). For the edge points, the control points are based on the slope between that point and the next closest point.

如果您有特定领域的信息，您可以选择不同的控制点。例如，您可能要强制在终点的斜率为0。

If you have domain-specific information you might choose different control points. For instance, you might want to force the slopes at the end points to be 0.

这篇关于如何使通过点线曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！