Javascript中的可拖动和可旋转对象（Mootools）

好吧，我觉得自己是一个大傻瓜，因为我不记得补习数学，但就我的一生而言，我记不起如何做基本的三角学（我是一个后端开发人员，所以我从来没有在我的生活中使用过这个）

我正在MooTools中处理一个可拖动/旋转的对象，这有点类似于Photoshop中缩放和旋转图像的过程。基本上有5个控制元素。中心拖动对象，角点控制旋转对象。最好的展示方式：

var Box = new Class({

    element: null,
    boxes: {},
    rotators: {},
    draggers: {},
    size: 10,
    controls: {
        'center': {
            x: [45, 45],
            y: [45, 45]
        },
            'topleft': {
            x: [0, 0],
            y: [0, 0]
        },
            'topright': {
            x: [90, 90],
            y: [0, 0]
        },
            'bottomleft': {
            x: [0, 0],
            y: [90, 90]
        },
            'bottomright': {
            x: [90, 90],
            y: [90, 90]
        }
    },

    initialize: function (el) {

        // the element to use
        this.element = el;

        // Create dragger boxes
        Object.each(this.controls, function (value, key, i) {

            // Boxes
            this.boxes[key] = new Element('div', {
                'id': key,
                    'class': 'box',
            }).setStyles({
                'left': value.x[0] + 'px',
                'top': value.y[0] + 'px',
                'height': this.size + 'px',
                'width': this.size + 'px'
            }).inject(this.element);

            // Draggers
            this.draggers[key] = new Drag(key, {
                limit: {
                    x: value.x,
                    y: value.y
                },
                onDrag: function (el, e) {

                    // Get this
                    el.addClass('dragging');

                    // The center moves it
                    if (el.id == 'center') {

                        // Move it around
                        el.getParent().setStyles({
                            left: (e.client.x - 45),
                            top: (e.client.y - 45)
                        });

                        // Else, rotating
                    } else {

                        // Get the current rotation of the object
                        var rotation = el.getParent().getStyle('transform');

                        // If it hasn't been set ( for whatever reason )
                        if (rotation == null) rotation = "0";

                        // The coordinates of the box clicked
                        var center = $('center').getCoordinates();
                        var coords = el.getCoordinates();

                        // Rotate
                        var rotate = (rotation.replace(/[A-Za-z\(\)$-]/g, "")).toInt() + 2;

                        // Log the rotation
                        console.log(rotate);

                        // Set the styling for the parent
                        el.getParent().setStyles({
                            'transform': 'rotate(' + rotate + 'deg)',
                                '-o-transform': 'rotate(' + rotate + 'deg)',
                                '-ms-transform': 'rotate(' + rotate + 'deg)',
                                '-webkit-transform': 'rotate(' + rotate + 'deg)'
                        });

                        // if
                    }

                },
                onComplete: function (el) {
                    el.removeClass('dragging');
                }
                // draggers
            });

            // bind it all together
        }.bind(this));

        // initialize
    }

    // box
});

new Box($('box'));

我有可拖动部分和旋转部分，但我不知道如何计算旋转角度。有人能帮一个大傻瓜解决这个问题吗

这里是操场：

---

万分感谢。

这个问题实际上与Mootools没有多大关系，因为你已经让所有的JS/Mootools部件完全工作了-你所剩下的就是用正确的角度替换新角度的

+2

为了计算正确的角度，我建议“设定”旋转拖动器相对于中心的基础旋转，即45度、135度、225度和315度。然后，当拖动其中一个时，您需要获得相对于中心的弧度旋转，通过乘以

（180/Math.PI）

，将其转换为度，将拖动角的基本旋转添加到该旋转中，并将该结果应用于变换

---

应该行得通，但我要留给你的挑战是如何把它整合起来；）

你说得对。这不是一个特定于框架的问题。虽然周末我离得很近，但我没有现在那么近（多亏了你）。你的挑战既受欢迎又令人愤怒：）好的。我在。我现在将在下一步更新这个类，使它成为一个更好的类。关于它为什么会偏移45度的问题，有什么建议吗？你忘了这一部分：“我建议‘教’旋转拖动器相对于中心的基础旋转，即45度、135度、225度和315度。”你需要将其作为属性添加到每个可拖动的角点，并将其用作基础旋转。好的，我不认为我能用最好的方法来做，但是现在它可以用了。非常感谢你的帮助。这是我的最终版本和事件分类（对于那些有兴趣的人）。干杯