Деформация линии в paper.js

Используя paper.js, я хотел создать анимацию деформации кривой, которая следует за движущимся объектом. Эта деформация должна быть простым изменением, как перемещение маркеров контура, например, в CorelDraw, но она должна следовать за движущимся объектом.

Вот jsbin моих усилий:

http://jsbin.com/luwosiniga/1/edit?js,output

Основная проблема в строках:

var sigm_location = sigmoid_path.getNearestLocation(imi_logo.position);
sigm_location.segment.handleIn.x = 20;

А именно, я вижу, что ручка точки сегмента сместилась, но форма пути остается неизменной, и это также происходит только для первого сегмента. Значение (для handleIn.x) в выводе консоли равно 20. Есть предложения?

Кроме того, если бы для этого можно было использовать какую-либо другую технику, было бы здорово узнать...


javascript paperjs
person Fedja Blagojevic    schedule 03.04.2015    source источник
comment
Код должен идти в вопросе, а не в jsbin.   -  person meagar    schedule 04.04.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я взломал созданный вами jsbin и нашел пару вещей.

Я думаю, что основная проблема в том, что строка sigmoid_path.smooth(). Если вы прокомментируете это, строка деформируется; сглаживание пути избавляет от деформации. Может быть, начинать каждое событие со сглаживания пути, а затем деформировать линию. Также похоже, что регулировка ручек соседних сегментов может сделать деформацию более приятной.

Я полагаю, вы также хотите использовать sigmoid_path.add(newPoint) вместо lineTo, потому что вы добавляете сегменты по одному.

Моя версия здесь, если вы хотите взглянуть на нее: jsbin.com/sukolimavu/2 /изменить

Небольшое замечание — я отключаю обработчик onFrame после того, как он прошел всю длину кривой — это помогает производительности при работе с кодом.

person bmacnaughton    schedule 04.04.2015
comment
Большое спасибо bmacnaughton. Это было именно то, что я искал. - person Fedja Blagojevic; 04.04.2015