Проецируйте 2D точки на круг / кривую

Question

У меня есть список точек XY, которые представляют текст в форме «точечной матрицы». Начало первой точки в наборе - 0,0 (левая верхняя точка). (Я тоже могу изменить точки на инкрементные координаты)

Я хотел бы спроецировать или обернуть точки вокруг радиуса следующим образом:

Я пытался следовать этому ответу, но результаты не те, что я ожидаю: Как спроецировать на сферу

Я также пытался преобразовать полярные координаты и наложить координата R для определения тэты и преобразования обратно в декартову, но это тоже не работает.

Например, буква 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

Скажем, вы хотите изогнуться вокруг круга с центром в (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>

Answer 2

Вам нужно взять координаты (X, Y), как если бы они были (Θ, R) полярными координатами (в этом порядке), и преобразовать в декартову.

Поэкспериментируйте немного, чтобы понять эффект горизонтального или вертикального перевода до преобразования, а также масштабирования h / v. Убедитесь, что для всех точек R> r радиус окружности.