如何限制圈内的运动 [英] How to constrain movement within the area of a circle

问题描述

这可能更像是一个与几何有关的问题，但我试图将一个控制器限制在一个区域内。我知道我必须触碰Math.sin（）和Math.cos（）方法，但迄今为止我的尝试迄今为止都没有结果。

这里是jsfiddle：
到目前为止，我已经能够将它限制在一个看不见的方形。 http://jsfiddle.net/maGVK/

 
 > var pointerEl = document.getElementById（pointer）; 
 var canvasEl = document.getElementById（canvas）; 
 var canvas = {
 width：canvasEl.offsetWidth，
 height：canvasEl.offsetHeight，
 top：canvasEl.offsetTop，
 left：canvasEl.offsetLeft 
}; 
 canvas.center = [canvas.left + canvas.width / 2，canvas.top + canvas.height / 2]; 
 canvas.radius = canvas.width / 2; 
 
 
 window.onmousemove = function（e）{
 var result = limit（e.x，e.y）; 
 pointer.style.left = result.x +px; 
 pointer.style.top = result.y +px; 
 
 
函数limit（x，y）{
 var dist = distance（[x，y]，canvas.center）; 
 if（dist <= canvas.radius）{
 return {x：x，y：y}; 
} 
 else {
 x = x  -  canvas.center [0]; 
 y = y  -  canvas.center [1]; 
 var radians = Math.atan2（y，x）
 return {
x：Math.cos（弧度）* canvas.radius + canvas.center [0]，
y：Math .sin（弧度）* canvas.radius + canvas.center [1] 
} 
} 
} 
 
函数距离（dot1，dot2）{
 var x1 = dot1 [0]，
 y1 = dot1 [1]，
 x2 = dot2 [0]，
 y2 = dot2 [1]; 
 return Math.sqrt（Math.pow（x1  -  x2，2）+ Math.pow（y1  -  y2，2））; 
 
 $ / code> 

您可以在这里看到结果：

http://jsfiddle.net/7Asn6/

This might be more a geometry related question, but I'm trying to constrain a controller within an area of a circle. I know I have to touch the Math.sin() and Math.cos() methods, but my attemps so far have been fruitless so far.

Here is the jsfiddle: So far I've been able to constrain it to an invisible square. http://jsfiddle.net/maGVK/

解决方案

So I finally was able to complete this with a bit of everyone's help.

var pointerEl = document.getElementById("pointer");
var canvasEl = document.getElementById("canvas");
var canvas = {
    width: canvasEl.offsetWidth,
    height: canvasEl.offsetHeight,
    top: canvasEl.offsetTop,
    left: canvasEl.offsetLeft
};
canvas.center = [canvas.left + canvas.width / 2, canvas.top + canvas.height / 2];
canvas.radius = canvas.width / 2;


window.onmousemove = function(e) {
    var result = limit(e.x, e.y);
        pointer.style.left = result.x + "px";
        pointer.style.top = result.y + "px";
}

function limit(x, y) {
    var dist = distance([x, y], canvas.center);
    if (dist <= canvas.radius) {
        return {x: x, y: y};
    } 
    else {
        x = x - canvas.center[0];
        y = y - canvas.center[1];
        var radians = Math.atan2(y, x)
           return {
               x: Math.cos(radians) * canvas.radius + canvas.center[0],
               y: Math.sin(radians) * canvas.radius + canvas.center[1]
           }
        } 
    }

function distance(dot1, dot2) {
    var x1 = dot1[0],
        y1 = dot1[1],
        x2 = dot2[0],
        y2 = dot2[1];
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

You can see the result here:

http://jsfiddle.net/7Asn6/

这篇关于如何限制圈内的运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！