将 2D 点投影到 Circle/Curve

Question

我有一个以 "dot matrix" 形式表示文本的 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

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

Answer 1

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

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

Answer 2

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

(x、y)处的圆心d与圆心的距离为：

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>

将 2D 点投影到 Circle/Curve

Project 2D points onto Circle/Curve

geometry

coordinates

computational-geometry

coordinate-transformation

polar-coordinates