Линейная деформация в paper.js

Question

Используя 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. Любые предложения?

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

Answer 1

Я взломал на jsbin вы создали и обнаружили несколько вещей.

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

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

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

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