Как написать текст на окружности и посчитать точки?

Question

[SuperProshka]

Добрый день!
Я отрисовываю текст на окружности на html canvas вот таким образом:

canv.ctx.translate(centerX, centerY); 

        let startAngle = 0;
        for (var j = 0; j < text.length; j++) {
            var charWid = text[j].width;
            var textHeight = text[j].height;
            startAngle += (charWid / (this.data.diameter / 2 - textHeight)) / 2 * -clockwise;
        }
    
        canv.ctx.rotate(startAngle);

        let currentAngle = startAngle;

        let drawnPoints = [];

        for (var j = 0; j < text.length; j++) {
            var charWid = text[j].width;
            var textHeight = text[j].height;
            let angle = (charWid/2) / (this.data.diameter / 2 - textHeight) * clockwise;

            let x = Math.cos(currentAngle + angle) * (this.data.diameter / 2 - textHeight / 2);
            let y = -Math.sin(currentAngle + angle) * (this.data.diameter / 2 - textHeight / 2);

            drawnPoints.push({ x, y, symbol: text[j].symbol });

            canv.ctx.rotate(angle); 
            canv.ctx.fillText(text[j].symbol, 0, (0 - this.data.diameter / 2 + textHeight / 2));
            canv.ctx.rotate(angle);
            currentAngle += angle * 2;
        }
        canv.ctx.restore();

        for (let i = 0; i < drawnPoints.length; i++) {
            canv.ctx.fillStyle = "yellow";
            canv.ctx.beginPath();
            canv.ctx.arc(drawnPoints[i].x, drawnPoints[i].y, 5, 0, 2 * Math.PI);
            canv.ctx.fill();
        }

У меня два вопроса:
1) почему именно так считается start angle? (да и в цикле почти также считается аддитивная составляющая к углу)
2) Почему у меня не правильно считаются drawnPoint?

Буду благодарен за помощь.

Comments

[Aetae]

Оффтоп, однако всякий случай упомяну: для такого в svg есть textPath, так что если задача обособленная лучше просто использовать svg.:)

[ksnk]

Чтобы понять что в этом коде неправильно - нужно сказать почему это неправильно. Что получить то хотелось?

[SuperProshka]

Основной вопрос - как посчитать точки в которых написаны буквы, чтобы потом посчитать прямоугольник, который их ограничивает.
В моем понимании эти точки рассчитываются как у меня рассчитываются drawPoints, но они смещены по окружности и не совпадают с положением букв

[Сергей Соколов]

какая изначально идея-то? Чтобы буквы были поверх точек?

[SuperProshka]

Нет
Мне было нужно написать текст по окружности - это я смог сделать.
Теперь, в дополнение к этому, мне нужно посчитать точки, в которых были написаны буквы.
Кажется, что координаты должны считаться так

let x = Math.cos(currentAngle + angle) * (this.data.diameter / 2 - textHeight / 2);
let y = -Math.sin(currentAngle + angle) * (this.data.diameter / 2 - textHeight / 2);

Но на картинке видно, что это не верные точки, так как верные располагались бы на нарисованных буквах.
Вопрос: где ошибка при расчете x и y

[Wana1]

Попробуй

canv.ctx.save();
canv.ctx.translate(centerX, centerY);
let startAngle = 0;

for (let j = 0; j < text.length; j++) {
    const charWid = canv.ctx.measureText(text[j]).width;
    const textHeight = /* укажите высоту текста */;
    
    const angle = (charWid / (this.data.diameter / 2 - textHeight)) * clockwise;
    startAngle += angle / 2;

    const x = Math.cos(startAngle) * (this.data.diameter / 2 - textHeight / 2);
    const y = -Math.sin(startAngle) * (this.data.diameter / 2 - textHeight / 2);
    
    drawnPoints.push({ x, y, symbol: text[j] });

    canv.ctx.rotate(angle);
    canv.ctx.fillText(text[j], x, y);
    startAngle += angle;
}

canv.ctx.restore();

drawnPoints.forEach(point => {
    canv.ctx.fillStyle = "yellow";
    canv.ctx.beginPath();
    canv.ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
    canv.ctx.fill();
});

[SuperProshka]

нет, так не работает

Answer 1

[SuperProshka]

Ivan Bogachev Добрый день!
Я решил начать с текстового эффекта попроще (Как сделать эффект текста на кривой безье?) - написать текст по окружности, но столкнулся в с проблемой с расчетом точек, в которых написаны буквы.
Цель расчета этих точек - использовать их для расчета rectangle, который ограничивает написанный по окружности текст.
Буду благодарен, если посмотрите.

P.S. Смог сделать