Я использую fabricjs на своей отзывчивой веб-странице. Я пытаюсь добавить текст на холст. Пока это работает нормально.Отзывчивый размер холста и рендеринг iText с помощью fabricJS
Поскольку веб-страница является отзывчивой, контейнер холста изменяется в соответствии с размером окна просмотра. Я бы хотел, чтобы холст всегда принимал 90% элемента контейнера. Поэтому я масштабирую холст и все элементы внутри него, чтобы они сохраняли одни и те же относительные позиции, но занимали 90% контейнера. (-> Есть ли лучший способ сделать это?)
Все работает нормально, за исключением рендеринга текста, когда холст загружается в первый раз. Текстовые элементы, похоже, уличены. Другие элементы (Rect, Graphic) добавляются в порядке.
Вот как это должно выглядеть. И когда я нажимаю на холст или включаю инструменты разработчика в браузере, элементы iText получают визуализацию до нужного размера.
Я попытался с помощью object.setCoords() на объекте IText, а также canvas.calcOffset(), который предлагается во многих должностях, которые я встречу, но, к сожалению, безуспешно.
И с помощью элемента iText у меня также есть проблема с позицией курсора - когда я нажимаю на элемент и пытаюсь отредактировать его содержимое, курсор не отображается между символами (где бы это было нормально), а на символах ,
ли кто-то наткнулся на эту проблему? Каковы ваши методы при использовании fabricjs в отзывчивом дизайне при изменении размера контейнера для холста?
Не знаком с этой точной библиотекой, но я знаю, что когда дело доходит до размеров холста, вы не можете делать все это в CSS - например, при разработке видеоигры и изменении разрешения в меню, связанных с переменными/вычислениями, которые вы пишете сами (или что делает fabricjs), которые необходимо будет обновить, чтобы принять во внимание новый размер. Таким образом, в отличие от большинства типов элементов, где их внешний вид является статическим, несколько имеет смысл, что вам нужно написать какую-либо форму «onresize» для себя непосредственно для холстов. – Katana314
Это, безусловно, проблема с шрифтом. Ваш CSS или другой стиль противоречит друг другу и вызывает другой шрифт в исходном состоянии. Если вы посмотрите на оба изображения, текст не усохнет по размеру ... скорее, он имеет совершенно другой шрифт. – Vijay
Спасибо за ваш ответ. @ Katana314: Я не использую css для изменения размера холста и его элементов. Я делаю это с помощью js, манипулируя элементами canvas fabricJS. – knospe