Question

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

我正在研究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/

提前一百万感谢。

Answer 1

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

为了计算正确的角度，我建议“教导”旋转拖拉机相对于中心的基础旋转，即。 45,135,225和315度。然后，当拖动其中一个时，您执行Math.atan2(e.client.y - center.y, e.client.x - center.x)以相对于中心的弧度获得旋转，通过乘以(180/Math.PI)将其转换为度数，将拖动角的基本旋转添加到其中，然后应用这导致了转型。

应该有效，但我要把实际的把它放在一起给你留下挑战;）

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

1 个答案: