javascript - 当鼠标改变时改变元素位置

Question

我的屏幕上有一些点，我想用鼠标插入这些点。给定半径的点不得靠近光标。

我不确定这些是否是计算新位置的正确方法，但我有以下代码。

Dot.prototype.listenonmouseMove = function () {
    document.addEventListener('mousemove', (e) => {
        //calculate distance between mouse and dot
        let distance = Math.sqrt(((e.clientY - this.y) ** 2) + ((this.x -e.clientX) ** 2));

        //if smaller than given radius
        if (distance < 100) {
            let angle = Math.atan2((e.clientY - this.y), (this.x - e.clientX)) * 180 / Math.PI;
            this.y = parseInt(this.y + ((200 - distance) * Math.sin(angle)));
            this.x = parseInt(this.x + ((200 - distance) * Math.cos(angle)));

            this.x = this.x < 0 ? 0 : this.x;
            this.y = this.y < 0 ? 0 : this.y;
            this.changePosition()
        }
    })
};

以上代码无法正常工作。请检查片段。当鼠标移动时，您可以看到点跳到随机位置

let Dot = function () {
    this.create();
    this.x = Math.floor(Math.random() * window.innerWidth) + 1;
    this.y = Math.floor(Math.random() * window.innerHeight) + 1;

    this.changePosition();
    this.listenonmouseMove()
};

Dot.prototype.create = function () {
    let dot = document.createElement('div');
    dot.className = 'dot';
    this.node = dot
};


Dot.prototype.changePosition = function () {
    if (this.requestAnimationId) return;

    let p = () => {
        if (parseInt(this.node.style.left) === this.x && parseInt(this.node.style.top)=== this.y) {
            cancelAnimationFrame(this.requestAnimationId);
            this.requestAnimationId = false

        } else {
            this.node.style.left = this.x + 'px';
            this.node.style.top = this.y + 'px';
            requestAnimationFrame(p)
        }
    };

    this.requestAnimationId = requestAnimationFrame(p)
};

Dot.prototype.listenonmouseMove = function () {
    document.addEventListener('mousemove', (e) => {
        //calculate distance between mouse and dot
        let distance = Math.sqrt(((e.clientY - this.y) ** 2) + ((this.x -e.clientX) ** 2));

        //if smaller than given radius
        if (distance < 50) {
            let angle = Math.atan2((e.clientY - this.y), (this.x - e.clientX)) * 180 / Math.PI;
            this.y = parseInt(this.y + ((50 - distance) * Math.sin(angle)));
            this.x = parseInt(this.x + ((50 - distance) * Math.cos(angle)));

            this.x = this.x < 0 ? 0 : this.x;
            this.y = this.y < 0 ? 0 : this.y;
            this.changePosition()
        }
    })
};




let content = document.getElementById('content');

for (let i = 0; i < 100; i++) {
    let dot = new Dot();
    content.appendChild(dot.node)
}

.dot {
    position: absolute;
    background-color: black;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

<div id='content'>

</div>

Answer 1

使用canvas也可以达到同样的效果。

创建点数组。鼠标移动时，检查与鼠标的距离并远离鼠标。

使用 requestAnimationFrame 循环并绘制点。

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let dots = [];
let w = 0;
let h = 0;
let mouseRadius = 50;
let dotRadius = 2.5;
let dotsToSpawn = 100;
function resize(){
  w = window.innerWidth;
  h = window.innerHeight;
  canvas.width = w;
  canvas.height = h;
}
function init(){
  for(let i=0;i<dotsToSpawn;i++){
    dots.push({
      x: Math.random()*w,
      y: Math.random()*h,
      r: dotRadius
    });
  }
}
function update(mx, my){
 dots = dots.map(({x,y,r}) => {
   //move x,y of dot away from mouse
   let dist = Math.sqrt(((mx-x)**2)+((my-y)**2));
   let angle = Math.atan2(my-y, mx-x);
   while(dist < mouseRadius){
     x -= Math.cos(angle);
     y -= Math.sin(angle);
     dist = Math.sqrt(((mx-x)**2)+((my-y)**2));
   }
   return {x,y,r}
 });
}
function draw(){
 ctx.clearRect(0,0,w,h);
 ctx.beginPath();
 dots.forEach(({x,y,r}) => {
   ctx.moveTo(x+r, y);
   ctx.arc(x, y, r, 0, Math.PI*2);
 });
 ctx.closePath();
 ctx.fillStyle = 'black';
 ctx.fill();
}
function loop(){
 draw();
 requestAnimationFrame(loop);
}
window.addEventListener("resize", resize);
document.addEventListener("mousemove", (e)=>{
  update(e.pageX, e.pageY);
});
resize();
init();
loop();

canvas {
 position: fixed;
 margin: 0;
 padding: 0;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

<canvas id="canvas"/>

您可以使用 html 元素而不是 canvas 执行相同的操作:

let dots = [];
let w = 0;
let h = 0;
let mouseRadius = 50;
let dotRadius = 2.5;
let dotsToSpawn = 100;
function resize(){
  w = window.innerWidth;
  h = window.innerHeight;
}
function init(){
  for(let i=0;i<dotsToSpawn;i++){
    let el = document.createElement("div");
    let x = Math.random()*w;
    let y = Math.random()*h;
    el.classList.add("dot");
    el.style.left = x+"px";
    el.style.top = y+"px";
    document.body.appendChild(el);
    dots.push({
      x,
      y,
      r: dotRadius,
      el
    });
  }
}
function update(mx, my){
 dots = dots.map(({x,y,r,el}) => {
   //move x,y of dot away from mouse
   let dist = Math.sqrt(((mx-x)**2)+((my-y)**2));
   let angle = Math.atan2(my-y, mx-x);
   while(dist < mouseRadius){
     x -= Math.cos(angle);
     y -= Math.sin(angle);
     dist = Math.sqrt(((mx-x)**2)+((my-y)**2));
   }
   el.style.left = x+"px";
   el.style.top = y+"px";
   return {x,y,r,el};
 });
}
window.addEventListener("resize", resize);
document.addEventListener("mousemove", (e)=>{
  update(e.pageX, e.pageY);
});
resize();
init();

.dot {
  position: fixed;
  background-color: black;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
}