Как стать автором
Обновить

Комментарии 19

Делал как-то чем-то похожую систему. Но там было больше извращений, потому что оно было для полиграфии и итоговый макет должен был стать PDF. То есть, pixel perfect, причём во времена IE9/10, плюс специфика.

Так вот, об извращениях — on-site редактор текста при правке именно текста отображал «ну как-то похоже» (стили CSS в основном), а при уходе фокуса текст с метаданными уходил на сервер, где генерировался этот кусочек PDF, потом Imagick'ом это счастье из PDF рендерилось в PNG, и уже этот PNG с прозрачностью отсылался обратно клиенту, где вставлялся в контейнер слоя. Ну и превью страницы (полный PDF) обновлялся в фоне, как и текст при изменении масштаба, поворотах и тому подобных преобразованиях. Статические картинки считались на клиенте.

Разные шрифты, эффекты типа обводок и теней, многослойность, точные размеры и координаты в мм/дюймах, многоязычность (но без двунаправленности, не было таких задач).

Интересно, что несмотря на монструозность конструкции — всё нормально себе работало и даже с хорошей производительностью в продакшене. Задачи суб-рендеринга прекрасно кластеризовались и масштабировались, но даже этого особо не требовалось, потому что основной сервер и так тянул.
Спасибо за материал. По письму — теоретически можно быстро добавить написание сверху-вниз для иероглифических текстов?
Вряд ли это можно будет сделать быстро. Начиная от того что нужно разобраться в правилах такого письма и точно определять его, до особенностей отрисовки в разных браузерах и системах. Вообще при работе с иероглифами в редакторе есть много нюансов
Это значит, что если у вас есть четыре текста, которые написаны OpenSans, вам нужно четыре раза полностью загрузить этот шрифт пользователю. Такой вариант нам не подходил.

Не понял эту часть.
Почему нельзя просто подключить шрифт через link? Вроде работает:
jsfiddle.net/94xrhkb1/10

А нельзя было закешировать шрифт в localStorage и доставать оттуда сразу в base64?

Можно, но если нам нужно добавить 3 текста значит в каждый из них нужно добавить base64. То есть 3 раза загрузить его пользователю.

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

Перед добавлением на канву генерируется картинка, в которой будет шрифт. Шрифт будет загружаться не 1 раз а для каждой картинки
Каков процент пользователей IE11 у вас?
~3% за месяц
НЛО прилетело и опубликовало эту надпись здесь
Рассматривали этот вариант, и даже используем его для экспорта в pdf некоторых виджетов. Но он получался медленнее из-за того что svg приходится конвертировать в data-url
НЛО прилетело и опубликовало эту надпись здесь
По возможности только заменяли символы кодировали не всегда.
Не точно ответил в первый раз. Основная проблема в то что в svg не будут подключатся внешний ресурсы если его добавить на canvas.
Пример jsfiddle.net/ehu84Lxn/1

Пользуюсь Miro регулярно и просто в восторге. Не хватает кропа картинки не только в виде прямоугольника, но и по маске. То есть вместо такого кропа я хочу вырезать чувака отдельно, вот так.

а почему сразу всё не в svg?

У вас я смотрю выделение идёт по символам в исходном тексте. Но это же дикость, когда в какой-то момент стрелка влево начинает смещать выделение вправо. Я тоже так сначала сделал, но этим было невозможно пользоваться. В итоге сделал так, что стрелки всегда смещают выделение в правильную сторону. И для вашего примера получается, что "Javascript" заполняется справа, продолжая выделение. Да, чтобы вырезать, например, выделенную подстроку теперь нельзя воспользоваться простым substring, нужно разбивать текст на куски с одним направлением и определять какие их части попали в выделение.

Это стандартное поведение при вводе bi-directional текста. В редакторе все работает как в ос, проблемы у нас появились при парсинге и рисований
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.