Question

我使用Chart.js，我需要渲染一个cubic bezier curve ，它在数学上由四个数据点组成。我知道所有四个点的坐标，但我想知道如何通过将P2和P3视为＆＃34;控制点＆＃34;我可以告诉我的图表它应该连接P1和P4。在贝塞尔曲线的背景下。

更新：

与此同时，我对具有该描述的线对象的属性capBezierPoints进行了详细说明：

If true, bezier control points are kept inside the chart. If false, no restriction is enforced.

关于该属性的文档很少见，因此我只能假设如果我将其设置为false，则不会绘制控制点（在我的情况下，我有两个控制点，一个开始点和一个终点）。但是，我不知道如何告诉Chart.js我的哪些点是控制点。

最近我将四点传递给我的数据集，如下所示：

 var data = {
        datasets: [
            {
                label: "start point",
                data: [
                    {
                        x: bezierCurve.getPoint(0).x,
                        y: bezierCurve.getPoint(0).y
                    },
                    {
                        x: bezierCurve.getPoint(1).x,
                        y: bezierCurve.getPoint(1).y
                    },
                    {
                        x: bezierCurve.getPoint(2).x,
                        y: bezierCurve.getPoint(2).y
                    },
                    {
                        x: bezierCurve.getPoint(3).x,
                        y: bezierCurve.getPoint(3).y
                    }
                ],
                fill: false,
                lineTension: 1,
                borderColor: "blue"
            }

        ]
    }

    var options = {
        responsive: true,
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
                ticks: {
                    beginAtZero: true,
                    max: Math.round(maxX * 1.1)
                }
            }],
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: true,
                    max: Math.round(maxY * 2)
                }
            }]
        },
        legend: {
            display: false
        }
    }

    Chart.defaults.global.tooltips.enabled = false;
    Chart.defaults.global.elements.line.capBezierPoints = false;
    Chart.defaults.global.elements.line.tension = 1.0;

    this.displayedBezierCurveChart = new Chart(context, {
        type: 'line',
        data: data,
        options: options
    });

使用该实现，绘制连接所有四个点的线。我需要的是考虑两个控制点之间连接起点和终点的线。

有什么想法吗？

使用Chart.js 2.4.0绘制三次贝塞尔曲线

0 个答案: