javascript - 如何翻译鼠标 X，Y 坐标以移动容器内的 HTML 元素，其中容器旋转到某个 Angular

Question

我正在用 HTML 开发一个纸牌游戏，它向所有玩家显示实时视 Angular 和纸牌移动。
所有播放器都通过 socket.io 连接。
背景:
如果有 4 名玩家， table 是方形的， table HTML 正文会根据玩家在屏幕上的位置旋转。
结构是这样的:

<gameTable style=”position: relative;”> 

<card style=”position: absolute; top: 1%, left: 1%;”></card> 

</gameTable > 

现在为了移动卡片，玩家用鼠标选择一张卡片，然后
1:保存该位置
2:根据移动，将卡片的移动(单位px)转换为相对相等的百分比，然后将 table 上的卡片移动那么多。
这样无论有人使用大屏幕还是小屏幕，通过使用 % 作为左上角坐标，所有人的卡片移动都是相同的。
-- 方 table :
当玩家处于 0 度桌面位置时，鼠标和卡片的移动是直接联动的。
卡顶: --mouse y ，左卡: --mouse x当玩家处于 180 度桌面位置时，鼠标移动反转:
卡顶: ++mouse y , 左卡: ++mouse x对于 90 度:
卡顶: ++mouse x , 左卡: --mouse y类似的平移与 270 度旋转表的坐标变化很小。
这与此翻译一样完美，它完美地将鼠标翻译到代码中的所有方向。
问题:
对于 6 人游戏，我想使用 六 Angular table 。现在在这个表中，玩家表旋转到:
0、60、120、180、240 和 300 度。
0 和 180 度数很好，但我无法找出一个合适的公式来根据旋转将鼠标坐标转换为卡片坐标。
-- 当前解决方案(不好)
目前，我做了一些蛮力编程，并这样做: (60度表)
如果(鼠标向上/向下移动){
卡顶:--mouse y/1.7，左卡:--mouse y
}
如果(鼠标左/右移动){
卡片顶部:++mouse x，卡片左侧:--mouse x/1.7
}
六 Angular 表上其他位置的类似方法，变化很小。
这是蛮力方法，它阻止我从上/下移动到左/右状态的转换，因为我必须离开鼠标然后重新开始。
简而言之，它不起作用，我想知道是否有可能有一个公式可以正确地将鼠标的鼠标坐标转换为基于旋转的卡片。
请查看以下图片以直观地表达我的意思
Square Table
Hexa Table

Answer 1

tl;博士看到这个JSFiddle
要从 4 名玩家变为 6 名玩家，您必须了解构成 4 名玩家情况的数学基础，然后将其应用于 6 名玩家情况。
四人案例
您可以将每个玩家的位置视为围绕以 table 中心为原点的圆的给定度数(或弧度)。在四人的情况下，第一个玩家(索引 0)将在 0 度，第二个玩家将在 90 度，等等。
要确定一个玩家的移动如何影响另一个人屏幕上不同 Angular 卡片的移动，您需要根据卡片的基础分解卡片的移动。在这种情况下，基础由定义当前玩家的移动空间的两个正交向量组成。第一个向量是使用 Angular 生成的向量。第二个向量可以通过当前 Angular 加上 90 度(Pi/2 弧度)得到。对于四人游戏，第一个玩家的主基向量为 0 度，即 (1,0)。第一个玩家的次要基向量为0+90=90度，即(0,1)。
要将鼠标移动(增量屏幕 x 和 y)转换为使用任意基的移动，您需要获取增量屏幕 x 和 y 以及基中每个向量的 x 和 y 的点积。在四人情况下，当第一个玩家移动一张牌时，主基和次基的点积分别导致 x delta 和 y delta。
在为当前玩家计算完此值后，您可以根据其基础在其他玩家的屏幕上移动卡片。为此，将已转换为沿两个基地的运动的运动并将其应用到彼此的基础上。在四人的情况下，第二个玩家的主要基础是 90 度 = (1,0)，次要基础是 90+90 度 = (-1,0)。因此，为了反射(reflect)第二个玩家位置的运动，原始的 x 运动被转换为 y 运动，而原始的 y 运动被转换为 -x 运动。
六名(或任意数量)玩家
要将其更改为具有任意数量的玩家并且第一个玩家的潜在偏移量为 0 度的游戏，您需要遵循相同的数学运算。首先，计算每个玩家的底数。其次，使用点积来计算卡在其基础上的移动增量。第三，将此 Action 应用于其他玩家的基地。
下面的示例允许您更改玩家数量和起始偏移 Angular 。这些卡片是 div，并且在 div 上叠加了一个 Canvas ，以显示每个基础的主轴(红色)和辅助轴(蓝色)。

<div>
<div class="table-div">
</div>
<div>
  This example shows how the current players card (blue) can be shown moving on other players' (red "ghost" cards).
  Below you
  can change the number of players and the angle offset of the starting player.
</div>
<div>
  <p>Players</p>
  <input type="text" onchange="playerChange()" id="playerText" value="6">
</div>
<div>
  <p>Angle (Degrees)</p>
  <input type="text" onchange="angleChange()" id="angleText" value="45">
</div>
<canvas id="canv"></canvas>

body {
  margin: 0;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.table-div {
  background-color: lightgreen;
  width: 400px;
  height: 400px;
}

.card {
  position: absolute;
  width: 50px;
  height: 70px;
}

.current {
  background-color: blue;
}

.ghost {
  background-color: red;
}

//A simple class to hold an x,y pair
class Vector2 {
  constructor(x, y) { [this.x, this.y] = [x, y] }
}

//Set up our parameters
let playerCount = 6; //Can be changed by the user
let offsetAngle = 45; //Can be changed by the user
let width = 400;
let height = width;
let radius = width / 2;
let cardWidth = 50;
let cardHeight = 50 * 1.4;//~70
let cards;

//Track the mouse
let lastMouse = null;
let currentMouse = null;
let mouseDown = false;

//The angle in radians between each player on the table
let angleDelta;

//Grab the table div
let tableElement = document.querySelector(".table-div");
let canvas = document.querySelector("canvas")
let ctx = canvas.getContext("2d");
canvas.style.width = width + "px";
canvas.style.height = height + "px"
canvas.width = width;
canvas.height = height;

function update() {
  ctx.clearRect(0, 0, width, height);

  for (let i = 0; i < playerCount; i++) {
    //Draw the first axis
    ctx.strokeStyle = "red";
    ctx.beginPath();
    ctx.moveTo(radius, radius);
    ctx.lineTo(radius + Math.cos(angleDelta * i + offsetAngle) * radius, radius + Math.sin(angleDelta * i + offsetAngle) * radius)
    ctx.stroke();

    //Draw the second axis
    let secondAxisAngle = angleDelta * i + Math.PI / 2;
    let startX = radius + Math.cos(angleDelta * i + offsetAngle) * radius / 2;
    let startY = radius + Math.sin(angleDelta * i + offsetAngle) * radius / 2;
    let endX = Math.cos(secondAxisAngle + offsetAngle) * radius / 4;
    let endY = Math.sin(secondAxisAngle + offsetAngle) * radius / 4;

    ctx.strokeStyle = "green";
    ctx.beginPath();
    ctx.moveTo(startX, startY)
    ctx.lineTo(startX + endX, startY + endY)
    ctx.stroke();
  }
}

document.body.addEventListener("mousemove", e => {
  //Keep track of the last mouse position so we can calculate a delta
  lastMouse = currentMouse;
  currentMouse = new Vector2(e.clientX, e.clientY);
  if (lastMouse && mouseDown) {
    let mouseDelta = new Vector2(currentMouse.x - lastMouse.x, currentMouse.y - lastMouse.y);
    if (mouseDown) {
      //Determine the movement in the current player's basis
      let primaryAxisCurrent = new Vector2(Math.cos(angleDelta * 0 + offsetAngle), Math.sin(angleDelta * 0 + offsetAngle))
      let secondAxisCurrent = new Vector2(Math.cos(angleDelta * 0 + Math.PI / 2 + offsetAngle), Math.sin(angleDelta * 0 + Math.PI / 2 + offsetAngle))
      //Determine the movement in terms of the primary axes
      let primary = (primaryAxisCurrent.x * mouseDelta.x + primaryAxisCurrent.y * mouseDelta.y)// * mouseDelta.x;
      let second = (secondAxisCurrent.x * mouseDelta.x + secondAxisCurrent.y * mouseDelta.y)// * mouseDelta.y;

      //Update all the cards using the primary and secondary motion
      for (let i = 0; i < playerCount; i++) {
        //Get the axes for this card
        let primaryAxis = new Vector2(Math.cos(angleDelta * i + offsetAngle), Math.sin(angleDelta * i + offsetAngle))
        let secondAxis = new Vector2(Math.cos(angleDelta * i + Math.PI / 2 + offsetAngle), Math.sin(angleDelta * i + Math.PI / 2 + offsetAngle))
        //Translate the motion into this card's axes
        let primaryAxisMovement = new Vector2(primaryAxis.x * primary, primaryAxis.y * primary)
        let secondAxisMovement = new Vector2(secondAxis.x * second, secondAxis.y * second)

        //Get the current location (strip the 'px') and add the change in position.
        let div = cards[i];
        let location = new Vector2(parseFloat(div.style.left) + primaryAxisMovement.x + secondAxisMovement.x, parseFloat(div.style.top) + primaryAxisMovement.y + secondAxisMovement.y)
        //Reappend 'px'
        div.style.left = location.x + "px"
        div.style.top = location.y + "px"
      }
    }
  }
})

document.body.addEventListener("mousedown", () => mouseDown = true)
document.body.addEventListener("mouseup", () => mouseDown = false)

function initDivs() {
  //Create all the cards
  cards = [];
  tableElement.innerHTML = "";
  for (let i = 0; i < playerCount; i++) {
    let div = document.createElement("div");
    tableElement.appendChild(div);
    div.classList.add("card")
    if (i == 0) div.classList.add("current")
    else div.classList.add("ghost")

    let radians = angleDelta * i;
    div.style.left = (radius - cardWidth / 2 + Math.cos(radians + offsetAngle) * (radius - cardWidth / 2)) + "px";
    div.style.top = (radius - cardHeight / 2 + Math.sin(radians + offsetAngle) * (radius - cardHeight / 2)) + "px"
    cards.push(div);
  }
}
function playerChange() {
  playerCount = +document.querySelector("#playerText").value;
  angleDelta = Math.PI * 2 / playerCount;
  initDivs();
  angleChange();
}
function angleChange() {
  //Convert from degrees to radians
  offsetAngle = parseFloat(document.querySelector("#angleText").value) * Math.PI / 180;
  initDivs();
  update();
}

playerChange();