Алгоритм мягкой обводки текста

[savostin]

Немного SVG магии:

<svg width="0" height="0" style="position:absolute">
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b"/>
    <feColorMatrix in="b" mode="matrix"
      values="
        1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 22 -10" result="g"/>
    <feComposite in="SourceGraphic" in2="g" operator="atop"/>
  </filter>
</svg>
<style>
.container {
  width: 14em;
  font-size: 1.2em;
  line-height: 1.5em;
}

.hl{
  --c: #f59e0b;
  --py: .14em;     /* vertical padding */
  --px: .50em;     /* horizontal padding */
  --join: .2em;   /* how much to “bleed” into the line gap */

  background: var(--c);
  padding: var(--py) var(--px);
  border-radius: 9999px;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  box-shadow:
    0  var(--join) 0 var(--c),
    0 calc(-1 * var(--join)) 0 var(--c);
  filter: url(#goo);
}
</style>
<div class="container">
  Lorem ipsum dolor sit <b class="hl">amet, consectetur adipiscing elit, 
  sed do eiusmod</b> tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi 
  ut aliquip ex ea commodo consequat.
</div>

[koptehe]

Да, согласен, что такие фильтры есть. И я даже думал сделать это через эффект gooey, или через шейдеры (где тоже gooey). Но для flutter нельзя напрямую использовать SVG-фильтры, а с шейдерами чуть запарно.

А еще есть с gooey есть проблема, что при малом радиусе скругления уголки могу "неправильно" отрисовываться. "Неправильно" - это как раз не перетекать, а создавать острые углы в месте стыка (каждый gooey "обнимает" свой текст) . Но тут я могу ошибаться

[aamonster]

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

[koptehe]

Да, согласен, смотрится сейчас не так красиво. Но я старался бороться с перфекционизмом. Иначе я бы не дописал эту статью.

[aamonster]

Ну, я не в плане обругать, а предложить простое улучшение). Хотя вариант savostin мне больше нравится.

[koptehe]

Я понимаю) Надеюсь найду силы улучшить это все, чтобы можно было использовать из коробки

[RodionGork]

С одной стороны - круто, плюсую :)

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

читатель пробегая текст "по диагонали" не будет особо разбираться как именно закругляли уголки. а уж если текст будет разбирать LLM как сейчас модно, чтобы представить "выжимку" то тем более :)

[koptehe]

Когда дописал и обсуждал это с другом, тоже подумал, что как будто слишком мудрено. Но как есть. Пока элегантнее не придумал. Подумал, что blur на шейдерах тоже рассчитывается как-то уж слишком сложно, но тем не менее это работает.

Если есть какие-то улучшения по стилистике или в целом ощущение, что как-то "тяжеловато" читать, то напишите, я подумаю. Мне будет ценно получить обратную связь.

Если же вопрос к математике, то тут... Ну пока так хаха

[vityo]

Что-то с матрицей как-то сложно, вроде любая точка либо без сгиба, либо выпукла, либо вогнута, будто проще должно быть как-то кажется

[koptehe]

Да, да! Я тоже недавно гулял и такой "А зачем там вообще матрица-то?"
Я переписал код, теперь я просто пробегаюсь по поверхностям, без заполнения матрицы
Как и ожидалось, работает это раз в 10 быстрее

https://github.com/DmitriiProshutinskii/text_highlighter/commit/8d60bab8fa46fa26f88dff7633ec545c32026efd

Статью перепишу чуть позже