Paper.js/canvas: сглаживание медленного движения текста

См. этот пример: http://merijn.pro/ballen/ скрипка: http://tinyurl.com/o8gq7z2

Шарики двигаются медленно, а сами шары рендерятся плавно, но их текстовые метки — нет (они привязываются к пиксельной сетке). Выглядит некрасиво из-за медленного движения.

Я ищу способ сделать текст плавным, если это возможно. Они создаются следующим образом:

this.text = new PointText(this.point);
this.text.justification = 'center';
this.text.fillColor = 'black';
this.text.content = text;

и обновляется следующим образом:

this.text.position = this.point;

ОБНОВЛЕНИЕ: я попытался решить эту проблему, импортировав тексты как SVG (содержащие текст), но это дало ту же проблему.

введите здесь описание изображения


javascript canvas html5-canvas paperjs
person Hacktisch    schedule 26.12.2015    source источник
comment
Если вы можете опубликовать код в виде эскиза, я был бы рад поиграть с ним. У меня есть две первоначальные мысли: 1) сделать pointText и обвести группу, затем переместить группу, а не два элемента, и 2) наложить на холст какой-либо HTML-текст и расположить их абсолютно относительно холста. текстовая поддержка статьи ограничена.   -  person bmacnaughton    schedule 27.12.2015
comment
Пожалуйста, сделай! См. tinyurl.com/o8gq7z2. Я рассматривал вариант (2), но, как вы понимаете, я предпочитаю использовать только холст... Я также пробовал такие вещи, как CSS-преобразование/перевод холста, но привязка пикселей остается. Я очень хочу посмотреть, что вы можете сделать из этого, спасибо заранее   -  person Hacktisch    schedule 27.12.2015

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, что это решение плавно перемещает как текст, так и круги, хотя я не тестировал ваш код напрямую. Это вариант (1) в моем комментарии выше - добавьте круг и текст в группу и просто переместите группу.

sketch

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

person bmacnaughton    schedule 27.12.2015
comment
Спасибо, что показали мне, как группировать объекты, но, к сожалению, это не позволяет тексту двигаться плавно при медленном движении. Ваш вектор равен [1,1], поэтому каждый раз, когда он перемещается на 1 пиксель, он становится гладким, но если я делаю его медленнее ([0.1,0.1]), возникает та же проблема, что и раньше: tinyurl.com/zny3vru - person Hacktisch; 28.12.2015
comment
Да, я только что попробовал это сам, и я увидел то же самое, что и вы. Кажется, это проблема - текст перемещается только с шагом в 1 пиксель, в то время как круг может двигаться с меньшим шагом (из-за интерполяции). У меня нет решения для этого. - person bmacnaughton; 28.12.2015
comment
Вы можете заставить элементы перемещаться на 1 пиксель за раз, используя счетчик приращения обновления, а не определенную длину вектора. Итак, если вы хотите перемещать [0,1, 0,1] каждый раз, установите счетчик на 10, уменьшите его на каждом кадре, а затем переместите мяч на [1,0, 1,0], когда счетчик достигнет нуля (и сбросьте счетчик на 10) . Такой подход позволит синхронизировать мячи и текст. - person bmacnaughton; 28.12.2015
comment
Я думаю, что это только ухудшает внешний вид :) Боюсь, мне придется согласиться с вашим первым предложением наложить холст с помощью HTML или каким-то образом ухитриться загрузить текст не как текстовый объект, а как вектор. Но первое, что я собираюсь сделать, это показать это клиенту, чтобы спросить, не возражают ли они против нервного текста. Спасибо за вашу помощь, я приму ваш ответ через несколько дней, если я не получу другого ответа. - person Hacktisch; 28.12.2015
comment
Это не очень ответ. Пометить это как полезное кажется уместным, но я не уверен, что это ответ. За исключением, возможно, наложения HTML. - person bmacnaughton; 28.12.2015

arrow_upward
1
arrow_downward

Я предлагаю вам обрабатывать текст с помощью html и css, как описано здесь.

Текстовые инструменты все еще находятся в разработке в Paper.js.

person arthur.sw    schedule 28.12.2015