Можно ли повернуть векторный прямоугольник в faux 3d? - PullRequest
0 голосов
/ 19 января 2012

Я использую 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 Пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...