在业务需求中,常常出现一些我们无法完成的效果图,这时需要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);
},