几何帮助：沿圆中两点之间的路径绘制 JS

Question

我正在尝试在极圆图上的两点之间绘制指定的步数。角度（半径）用 HUE 表示，从 0 到 360。θ 用 CHROMA（强度）表示。

我指定了我想要的步数并混合这两个独立的值，但结果不是我所期望的，这些点绕着圆圈走，正如我希望它穿过的地方（参见屏幕截图）。

我的几何学不是很强，任何帮助将不胜感激！

<!doctype html>
<html lang="en">

<head>
    <title>Colour Chart</title>
</head>

<body>
    <div id="chartContainer1"></div>

    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>

    <script>

        const pigments = [{
            key: "A",
            name: "Red",
            hue: 18,
            chroma: 14,
        },
        {
            key: "B",
            name: "Blue",
            hue: 279,
            chroma: 10,
        }
        ];

        function getNumberBlend(min, max, totalSteps) {
            let steps = new Array(totalSteps);
            let distance = max - min;
            for (i = 0; i < totalSteps; i++) {
                steps[i] = min + distance * (i / (totalSteps - 1));
            }
            return steps;
        }


        // Define properties
        let radiusData = new Array();
        let thetaData = new Array();
        let textData = new Array();
        let totalSteps = 15;

        // Plot blends from each pigment to the next
        let chromaBlend = getNumberBlend(pigments[0]["chroma"], pigments[1]["chroma"], totalSteps);
        let hueBlend = getNumberBlend(pigments[0]["hue"], pigments[1]["hue"], totalSteps);

        for (let i = 0; i < totalSteps; i++) {
            radiusData.push(chromaBlend[i]);
            thetaData.push(hueBlend[i]);      
            textData.push("");
        }

        let plotlyData = [
            {
                type: "scatterpolar",
                mode: "markers+text",
                r: radiusData,
                theta: thetaData,
                text: textData,                
                marker: {                    
                    color: "#000000"                    
                },
                subplot: "polar"
            }
        ]

        let plotlyLayout = {            
            polar: {                
                radialaxis: {
                    range: [0, 18],
                    tickfont: {
                        size: 8
                    },
                    color: "rgb(0,153,204)",
                },
                angularaxis: {
                    rotation: 108, // Start with 5R at North
                    direction: "clockwise",
                }
            }
        }


        Plotly.newPlot("chartContainer1", plotlyData, plotlyLayout)

    </script>

</body>
</html>

我尝试混合不同的值，但我似乎无法找出正确进行此计算的方法。

Answer 1

您希望点沿着两点之间的直线，但您使用的是极坐标系（角度和半径）。 IOt 是一项艰巨的任务，除非您转换为使用笛卡尔坐标（ x 和 y ）。

所以我建议：

编写代码以在极坐标和笛卡尔坐标之间进行转换。
将你的两个点转换为笛卡尔坐标
计算点之间直线的公式（ y = mx + c ）
计算沿线的点。
将点转换回极坐标。

几何帮助：沿圆中两点之间的路径绘制 JS

问题描述投票：0回答：1

1个回答

最新问题

几何帮助：沿圆中两点之间的路径绘制 JS

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1