2

好的，我觉得自己像个大傻瓜，因为不记得补习数学，但对于我的生活，我不记得如何做基本的三角函数（我是后端开发人员，所以我实际上从未在我的生活）。

我正在 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'));

我有可拖动部分和旋转部分，但我不知道如何计算旋转角度。任何人都可以帮助一个大假人解决这个问题吗？

这是游乐场：http: //jsfiddle.net/jessejamesrichard/j4uV2/3/

一百万提前谢谢。

4

1 回答 1

3

这个问题实际上与 Mootools 没有太大关系，因为您已经让所有 JS/Mootools 部分完全正常工作 - 您剩下的就是用+2正确的角度替换新角度。

要计算正确的角度，我建议“教”旋转拖动器相对于中心的基本旋转，即。45、135、225 和 315 度。然后，当其中一个被拖动时，您Math.atan2(e.client.y - center.y, e.client.x - center.x)可以获得相对于中心的弧度旋转，通过乘以将其转换为度数，(180/Math.PI)将拖动角的基本旋转添加到它，并将该结果应用于转换。

应该可以，但我给你留下了实际组合的挑战；）

于 2013-05-12T21:29:36.773 回答