Question

我正在使用paper.js创建一个矢量矩形形状，我希望能够通过基于鼠标位置移动路径段来在人造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 Example

是否可以在虚拟3D中旋转矢量矩形？

0 个答案: