fabric - canvas - Forum

Forum Navigation
You need to log in to create posts and topics.

fabric - canvas

Канва стирает текст который я добавляю через скрипт
Canvas erases the text that I add via script

Beginjs
const canvas = document.getElementById('CardCanvas');
        const ctx = canvas.getContext('2d');

        // Функция для рисования изогнутого текста
        function drawCurvedText(options) {
            // Параметры по умолчанию
            const {
                text = 'Curved Text',
                x = canvas.width / 2,
                y = canvas.height / 2,
                radius = 100,
                startAngle = Math.PI * 0.8,  // 144°
                endAngle = Math.PI * 0.2,    // 36°
                fillStyle = '#000000',
                fontSize = 24,
                fontFamily = 'Arial',
                textBaseline = 'middle',
                textAlign = 'center'
            } = options;

            // Настройки текста
            ctx.font = `${fontSize}px ${fontFamily}`;
            ctx.fillStyle = fillStyle;
            ctx.textBaseline = textBaseline;
            ctx.textAlign = textAlign;

            // Рассчитываем углы для каждого символа
            const chars = text.split('');
            const angleStep = (endAngle - startAngle) / (chars.length - 1);

            chars.forEach((char, i) => {
                const angle = startAngle + i * angleStep;

                // Рассчитываем позицию символа
                const charX = x + Math.cos(angle) * radius;
                const charY = y + Math.sin(angle) * radius;

                // Поворачиваем контекст
                ctx.save();
                ctx.translate(charX, charY);
                ctx.rotate(angle + Math.PI/2);

                // Рисуем символ
                ctx.fillText(char, 0, 0);
                ctx.restore();
            });
        }

        drawCurvedText({
            text: '• Circular Text Example •',
            x: 100,
            y: 100,
            radius: 50,
            startAngle: 0,
            endAngle: Math.PI * 2,
            fillStyle: '#3F51B5',
            fontSize: 16
        });
Endjs