0

ここに画像の説明を入力

上記は、フィドルのリンクを取得するための単なるイメージです。その役割は問題ありません。

オブジェクトを円に沿って移動しようとしています (実際には、border-radius=100% の長方形のキャンバスなので、円として動作します)。ただし、移動することしかできず、円内での移動を制限することはできません)

これが私のJS Fiddle Linkです。注: js コードを下にスクロールして、次のコメントの下に記述されたコードのみを表示してください。

//---- Code of interest begins-----////---対象コード終了---//

私の希望する出力は、この wheel farbtasticのようになります。オープンソースですが、カラーホイールでマウス移動イベントコードを使用できませんでした

検索しようとしているときに、キャンバスの移動オブジェクトを円で見つけまし たが、私は知らdないし、何が何であるのかわからないため、使用できませんacross。そのため、シータを取得できませんarccos(1-(d/r)^2/2)

4

1 に答える 1

5

私が考える最も簡単な方法は、角度を計算し、css3 回転変換を要素に適用することです。

ここで例を挙げましょう..

特にrotate()関数に関するコメントを読んでください

http://jsfiddle.net/Z37FF/3/

HTML

    <body>
        <div id="circle">
        <div id="circle-in"></div>
        <div id="picker">
        <div id="picker-circle"></div>
        </div>
        </div>  
    </body>

CSS

    #circle{
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: #000;
    }

    #circle-in{
        position: absolute;
        top: 35px;
        left: 35px;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background: #fff;
    }

    #picker{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30px;
        margin-top: -15px;
        width: 50%;

        /* important: sets the transform origin to the center of the circle */
        transform-origin: center left;
    }

    #picker-circle{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        margin: 0 3px 0 auto;
        cursor: move;
    }

JS

document.addEventListener('DOMContentLoaded', function(){
    var circle = document.getElementById('circle'),
        picker = document.getElementById('picker'),
        pickerCircle = picker.firstElementChild,
        rect = circle.getBoundingClientRect(),

        center = {
            x: rect.left + rect.width / 2,
            y: rect.top + rect.height / 2
        },

        rotate = function(x, y){
            var deltaX = x - center.x,
                deltaY = y - center.y,

            // The atan2 method returns a numeric value between -pi and pi representing the angle theta of an (x,y) point.
            // This is the counterclockwise angle, measured in radians, between the positive X axis, and the point (x,y).
            // Note that the arguments to this function pass the y-coordinate first and the x-coordinate second.
            // atan2 is passed separate x and y arguments, and atan is passed the ratio of those two arguments.
            // * from Mozilla's MDN

            // Basically you give it an [y, x] difference of two points and it give you back an angle
            // The 0 point of the angle is right (the initial position of the picker is also right)

                angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI

            // Math.atan2(deltaY, deltaX) => [-PI +PI]
            // We must convert it to deg so...
            // / Math.PI => [-1 +1]
            // * 180 => [-180 +180]

            return angle
        },

        // DRAGSTART
        mousedown = function(event){
            event.preventDefault()
            document.body.style.cursor = 'move'
            mousemove(event)
            document.addEventListener('mousemove', mousemove)
            document.addEventListener('mouseup', mouseup)
        },

        // DRAG
        mousemove = function(event){
            picker.style.transform = 'rotate(' + rotate(event.x, event.y) + 'deg)'
        },

        // DRAGEND
        mouseup = function(){
            document.body.style.cursor = null;
            document.removeEventListener('mouseup', mouseup)
            document.removeEventListener('mousemove', mousemove)
        }



    // DRAG START
    pickerCircle.addEventListener('mousedown', mousedown)

    // ENABLE STARTING THE DRAG IN THE BLACK CIRCLE
    circle.addEventListener('mousedown', function(event){
        if(event.target == this) mousedown(event)
    })
})
于 2014-05-25T20:25:13.070 に答える