Отображение <canvas>текста внутри векторного контейнера произвольной формы

Question

Я хотел бы сделать пользовательский текст внутри контейнера в форме сердца (да, Валентина скоро будет ...) Обратите внимание, что это нужно выводить, чтобы исключить CSS-решения.

• Если существуют какие-либо решения / библиотеки для задания формы для текстового контейнера, я надеюсь получить указатели на них

• Если нет решений для формирования текста, тогда яХотелось бы просто иметь прямоугольную рамку, где я просто сжимаю текст, пока он не уместится ... как измерить, помещается ли текст в рамку на

Уточнено: строки переноса текстапо краю в форме сердца.

Текст динамический.

SVG и т. Д. Приемлемы, если я могу нарисовать их на холсте.

Answer 1

Прежде чем что-то делать, спросите себя, будет ли SVG здесь более уместным.

К сожалению, нет встроенного способа сказать "подгоните его под этот размер".Обычно вы должны выбрать размер шрифта, переизмерить и повторить.Есть один лучший способ, но сначала, как сделать шрифт:

Один из способов - выбрать предположение, скажем, 50pt и измерить текст.Если он слишком большой, попробуйте 49pt и повторите попытку.Если он все еще слишком велик, попробуйте 48 пунктов и т. Д.

Другой способ - выбрать предположение, скажем 50pt.Если он слишком большой, нарежьте его на half до 25pt.Слишком большой еще?Сократите это в половине снова к 12pt.Слишком маленький?добавить половину, чтобы получить 18pt, и т. д., пока вы не достаточно близко.Это может показаться вам знакомым, если вы изучали алгоритмы.:)

Второй способ - использовать масштаб холста.К счастью для нас, текст на холсте изящно масштабируется.

Я предполагаю, что у вас есть не одно предложение, а блок текста.Достаточно хорошо.Напишите блок текста на холсте и измерьте его ширину и высоту.Получив это, вы можете масштабировать его соответствующим образом, используя ctx.scale, чтобы соответствовать любому размеру.