如何实现绿色箭头指向两个红色Canvas的中心点？

需求说明 #

我有三个尺寸为200x200的Canvas，需要让绿色箭头Canvas指向两个红色Canvas的中间位置。

已尝试的角度计算代码 #

首先是计算两点间角度的函数：

function angle(cx, cy, ex, ey){
    const dy = ey - cy;
    const dx = ex - cx;
    const rad = Math.atan2(dy, dx);
    const deg = rad * 180 / Math.PI;
    return deg;
}

然后获取两个红色Canvas的中心点坐标：

// 获取第一个红色Canvas的中心点（视口坐标）
const anchor1 = document.getElementById('canva1');
const rekt1 = anchor1.getBoundingClientRect();
const anchorX1 = rekt1.left + rekt1.width / 2;
const anchorY1 = rekt1.top + rekt1.height / 2; 

// 获取第二个红色Canvas的中心点（视口坐标）
const anchor2 = document.getElementById('canva2');
const rekt2 = anchor2.getBoundingClientRect();
const anchorX2 = rekt2.left + rekt2.width / 2;
const anchorY2 = rekt2.top + rekt2.height / 2; 

完整实现步骤 #

要让箭头正确指向中点，还需要补充以下步骤：

1. 计算两个红色Canvas的中点坐标

const midX = (anchorX1 + anchorX2) / 2;
const midY = (anchorY1 + anchorY2) / 2;

2. 获取绿色箭头Canvas的中心点

const arrowCanvas = document.getElementById('arrow-canvas');
const arrowRekt = arrowCanvas.getBoundingClientRect();
const arrowCenterX = arrowRekt.left + arrowRekt.width / 2;
const arrowCenterY = arrowRekt.top + arrowRekt.height / 2;

3. 计算箭头指向中点的角度

const angleDeg = angle(arrowCenterX, arrowCenterY, midX, midY);

4. 应用旋转到箭头Canvas

// 设置旋转原点为箭头Canvas的中心
arrowCanvas.style.transformOrigin = 'center center';
// 应用旋转变换
arrowCanvas.style.transform = `rotate(${angleDeg}deg)`;

注意事项 #

• 如果页面存在滚动，getBoundingClientRect()返回的视口坐标需要加上window.scrollX和window.scrollY来得到文档坐标，避免滚动后位置偏移：

  const anchorX1 = rekt1.left + rekt1.width / 2 + window.scrollX;
  const anchorY1 = rekt1.top + rekt1.height / 2 + window.scrollY;
  

• 确保箭头Canvas的初始方向是指向右侧（0°方向），如果初始箭头是向上或其他方向，需要在计算出的角度基础上加上偏移量（比如初始箭头向上，需要加90°）。

内容的提问来源于stack exchange，提问作者user20202873