在业务需求中，常常出现一些我们无法完成的效果图，这时需要UI切图给我们，而切图后不可避免的一些点击事件无法方便的监听
如该图圆环，其实是一张单独的图片，这种情况下只能通过js判断用户点击、拖动的鼠标位置，以此计算出是哪一个色块区域。
// centerX， centerY 为圆心坐标，常量
// pointX，pointY 为鼠标滑动坐标
function calculateAngle(centerX, centerY, pointX, pointY) {let slope = (pointX - centerX) / (pointY - centerY);let angle = Math.atan(slope) * (180 / Math.PI);if ((pointY < centerY)) { // 第二、第三象限angle += 180;} else if (pointX < centerX) { // 第四象限angle += 360;}return angle;
}move({ changedTouches }) {const { pageX, pageY } = changedTouches[0];const { centerX, centerY } = this.data;if (this.timer) return;let x = 0, y = 0;// 一二象限if (pageX > centerX) {x = pageX - centerX// 一象限if (pageY < centerY) {y = centerY - pageY}// 二象限if (pageY > centerY) {y = centerY - pageY}}// 三四象限if (pageX < centerX) {x = pageX - centerX// 三象限if (pageY > centerY) {y = centerY - pageY}// 四象限if (pageY < centerY) {y = centerY - pageY}}this.timer = setTimeout(() => {const angle = calculateAngle(0, 0, x, y);const index = Math.floor(angle / 30);this.timer = null;handleClick(square[index - 1]);}, 50);},
)
)
