将二维点投影到圆/曲线上答案

【问题标题】：Project 2D points onto Circle/Curve将二维点投影到圆/曲线上
【发布时间】：2018-05-08 14:42:08
【问题描述】：

我有一个 XY 点列表，它们以“点阵”形式表示文本。集合中第一个点的原点是0,0（左上点）。（我也可以将点更改为增量坐标）

我想将点投影或环绕在半径周围，如下所示：

我已尝试遵循此答案，但结果并非我所期望的： How To Project Point Onto a Sphere

我也尝试过转换为极坐标并施加 R 坐标来确定 Theta 并转换回笛卡尔坐标，但这也不起作用。

例如，字母 T 产生这个，然后应该投影到曲线上：

0, .0
0.1, .0
0.2, .0
0.2, .-0.1
0.2, .-0.2
0.2, .-0.3
0.2, .-0.4
0.2, .-0.5
0.2, .-0.6
0.3, .0
0.4, .0

让我的点遵循径向曲线的过程是什么

【问题讨论】：

标签： geometry coordinates computational-geometry coordinate-transformation polar-coordinates

【解决方案1】：

假设您想围绕一个以 (cx, cy) 为中心、半径为 r 的圆弯曲，使用 size（直径）为 0.1 的点。

d (x, y) 处的点中心到圆心的距离是：

d = r + y - size / 2

（我减去size / 2得到点的中心位置）

围绕圆的角度theta（以弧度为单位）为：

theta = (x + size / 2) / r

那么点的位置是：

dx = cx + d * cos(theta) dy = cy - d * sin(theta)

这是一个使用 SVG 和 Javascript 的示例

var svg = document.getElementById('curve-text');
var NS = "http://www.w3.org/2000/svg";

var points = [
    [0, 0],
    [0.1, 0],
    [0.2, 0],
    [0.2, -0.1],
    [0.2, -0.2],
    [0.2, -0.3],
    [0.2, -0.4],
    [0.2, -0.5],
    [0.2, -0.6],
    [0.3, 0],
    [0.4, 0]
];

var cx = 2;
var cy = 2;
var r = 2;
var size = 0.1;

drawCircle(cx, cy , r - 0.7);

var circumference = Math.PI * 2 * r;
var angle = 360 / circumference;
var radians = 1 / r;

// Add 12 copies of the letter T around the circle
for (var j = 0; j < 12; j++) {
    for (var i = 0; i < points.length; i++) {
        addDots(points[i][0] + j, points[i][1], size, cx, cy, r)
    }
}

function drawCircle(cx, cy , r) {
    var circle = document.createElementNS(NS, 'circle');
    circle.setAttributeNS(null, 'cx', cx);
    circle.setAttributeNS(null, 'cy', cy);
    circle.setAttributeNS(null, 'r', r);
    circle.setAttributeNS(null, 'fill', 'none');
    circle.setAttributeNS(null, 'stroke', 'black');
    circle.setAttributeNS(null, 'stroke-width', '0.02');
    svg.appendChild(circle);
}

function addDots(x, y, size, cx, cy, r) {
    var dotR = size / 2;
    var d = r + (y - dotR);
    var theta = (x + dotR) / r;

    var x = cx + d * Math.cos(theta);
    var y = cy - d * Math.sin(theta);

    var dot = document.createElementNS(NS, 'circle');
    dot.setAttributeNS(null, 'cx', x);
    dot.setAttributeNS(null, 'cy', y);
    dot.setAttributeNS(null, 'r', dotR);
    svg.appendChild(dot);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" id="curve-text" width="200" height="200">
</svg>

【讨论】：

对我来说缺少的链接是点大小/半径谢谢您的出色回答！
@GisMofx 是的，这有点棘手。我没有真正解释它，但基本上，1 弧度的角度扫出 r 的长度（圆的半径），所以要扫出 d 的长度，你需要一个 d/r 弧度的角度。

【解决方案2】：

您需要将 (X, Y) 坐标视为 (Θ, R) 极坐标（按此顺序），然后转换为笛卡尔坐标。

进行一些实验以了解在变换之前水平或垂直平移的效果，以及h/v 缩放。确保对于所有点 R > r，圆的半径。

【讨论】：