Yastr
@Yastr

Как в этом плагине сделать разрыв строки в canvas?

Поставил на сайт плагин - Wordpress Lucky Wheel, заполнил.
На сайте сразу обнаружилась проблема, плагин не переносит строки. Выводится текст этот в канвасе.
5bd9adfe14779652631093.png

Нашел кусок кода который отвечает за это, пытался разделить на строки но ничего не вышло. Подскажите пожалуйста, как расширить эту функцию вывода текста, чтобы текст переносился.
function drawText(deg, text,color) {
    ctx.save();
    ctx.translate(center, center);
    ctx.rotate(deg2rad(deg));
    ctx.textAlign = "right";
    ctx.fillStyle = color;
    ctx.font = '300 ' + wheel_text_size + 'px Helvetica';
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    text = text.replace(/&#(\d{1,4});/g, function (fullStr, code) {
        return String.fromCharCode(code);
    });
    ctx.fillText(text, 7 * center / 8, wheel_text_size / 2 - 2);
    ctx.restore();
}


разделить пытался так, но что то совсем не то (за основу взял код из гугл)
var lines = [];
    var words = text.split(" ");
    var currentLine = words[0];
    for (var i = 1; i < words.length; i++) {
        var word = words[i];
        var width = ctx.measureText(currentLine + " " + word).width;
        if (width < 75) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    lines.push(currentLine);
    console.log(lines);
    for (var i = 0, len = lines.length; i < len; i++) {
        ctx.fillText(lines[i].text, 7 * center / 8, wheel_text_size / 2 - 2);
    }
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Yastr
@Yastr Автор вопроса
дошло, все оказалось не так страшно)
5bdad80da3daa563593677.png
function drawText(deg, text,color) {
    ctx.save();
    ctx.translate(center, center);
    ctx.rotate(deg2rad(deg));
    ctx.textAlign = "right";
    ctx.fillStyle = color;
    ctx.font = '400 ' + wheel_text_size + 'px Helvetica';
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    text = text.replace(/&#(\d{1,4});/g, function (fullStr, code) {
        return String.fromCharCode(code);
    });

    var textWidth = canvas_width * 0.2,
        lines = fragmentText(text, textWidth),
        linesLength = lines.length,
        marginTop = wheel_text_size*linesLength/1.5; // для вертикального выравнивая строк

    lines.forEach(function(line, i) {
        ctx.fillText(line, 7 * center / 8, ((i+1) * (wheel_text_size+2))-marginTop);
    });

    ctx.restore();
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы