1

Minha pergunta está mais para matemática do que programação. mas Enfim...

Estou criando um pequeno script para determinar a posição (que é feita pelo mouse) e o diâmetro de um circulo que está dentro de um retângulo. Até agora consegui determinar o diâmetro máximo do circulo que é igual a diagonal do retângulo.

Porém, isso só funciona corretamente quando o cursor está nos cantos do retângulo. Quando o cursor está no centro ou nas bordas do retângulo, o circulo fica maior que o retângulo. http://codepen.io/salomaosnff/pen/rLwGBV

2
  • Você quer que o círculo fique sempre inteiramente dentro do retângulo? Pergunto isto porque no seu exemplo ele não está. Commented 4/07/2016 às 20:13
  • A partir do centro até a borda Commented 4/07/2016 às 20:15

1 Resposta 1

1

Acredito que o que você queira está no código abaixo:

Javascript:

var quadrado  = $("#quadrado"), 
    circulo   = $("#circulo"),
    offset    = quadrado.offset();

$(document).on('mousemove', function(e){
  var x = e.pageX - offset.left;
  var y = e.pageY - offset.top;

  var w = quadrado.outerWidth();
  var h = quadrado.outerHeight();

  var hCirculo = Math.min(Math.max(h - y, y), h);
  var wCirculo = Math.min(Math.max(w - x, x), w);

  var catetoH = Math.min(Math.max(hCirculo, y), h);
  var catetoW = Math.min(Math.max(wCirculo, x), w);

  var raio = Math.sqrt((catetoH*catetoH) + (catetoW*catetoW));
  var diametro = raio * 2;

  var top = y - raio;
  var left = x - raio;

  if (x < 0)
    left = -raio;
  else if (e.pageX > offset.left + w)
    left = w - raio;

  if (y < 0)
    top = -raio;
  else if (e.pageY > offset.top + h)
    top = h - raio;

  circulo.css({
    width: diametro,
    height: diametro,
    top: top,
    left: left
  });
});

CSS:

html, body{
  background: #333;
}
#quadrado{
  width: 90px;
  height: 50px;
  background: #FFF;
  position: absolute;
  top: 40%;
  left: 45%;
}

#circulo{
  background: yellow;
  opacity: 0.75;
  border-radius: 50%;
  position: absolute;
}

HTML:

<div id="quadrado">
<div id="circulo">
6
  • Quase isso, só que o circulo ficou muito pequeno. Ele deve preencher todo o retângulo sem deixar sobras no lado oposto ao cursor. Igual quando o cursor está nos cantos. Commented 4/07/2016 às 20:33
  • Mesmo que parte do círculo fique para fora do retângulo? Em sua pergunta você especificou "um circulo que está dentro de um retângulo". Commented 4/07/2016 às 20:34
  • sim, o retângulo terá um overflow hidden, mas o canto do retângulo deve estar na borda do circulo, pois o circulo terá uma animate() e isso causa um delay. Commented 4/07/2016 às 20:47
  • 1
    Fiz algumas alterações, mas ainda assim não tenho certeza do que está querendo.. rs Veja se agora chegou próximo. Commented 4/07/2016 às 21:05
  • Chegou bem próximo! Mas o circulo precisa ser um pouco maior, até preencher o retângulo pra ficar assim: prntscr.com/botgzq Commented 4/07/2016 às 21:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .