Я использую paper.js, чтобы создать векторную форму прямоугольника, которую я хотел бы иметь возможность вращать в faux 3d, перемещая сегменты пути в зависимости от положения мыши.
Вот мой прямоугольник:
var center = view.center;
var rectangle = new Rectangle(new Point(0, 0), new Point(300, 200));
path = new Path.Rectangle(rectangle);
path.position = center;
Это функция события, которую я использую для перемещения точек:
function onMouseMove(event) {
mousePos = event.point - center;
for (var i=0,sl=path.segments.length;i<sl;i++) {
var segment = path.segments[i];
if (i==0) {
segment.point.x = orig[i].x+mousePos.x;
segment.point.y = orig[i].y+mousePos.y;
} else if (i==1) {
segment.point.x = orig[i].x+mousePos.x;
segment.point.y = orig[i].y+mousePos.y;
} else if (i==2) {
segment.point.x = orig[i].x-mousePos.x;
segment.point.y = orig[i].y-mousePos.y;
} else if (i==3) {
segment.point.x = orig[i].x-mousePos.x;
segment.point.y = orig[i].y-mousePos.y;
}
}
}
orig
- простой объект со свойствами x
и y
, которыеудерживайте исходные точки для каждого сегмента (0,0,300,200
).
В идеале точки должны двигаться так, чтобы точка, ближайшая к мышке, выдвигалась в перспективе.
Как лучше всегочтобы сделать это?Вышеприведенная попытка не идеальна, поскольку она растягивает форму по горизонтали.
jsFiddle Пример