【前端】鼠标事件计算与圆心形成的角度

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/60053.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【flink】开启savepoint

先启动一个任务 flink run -c com.yang.flink.CDCJob test-cdc.jar开启savepoint 命令&#xff1a; flink savepoint JobID 文件地址 flink savepoint e929a11d79bdc5e6f140f2cfb92e1335 file:///workspace/flinkSavepoints/backend这样就开启好了 操作中的错误 详细信…

xml的注释删要干净Parameter index out of range (2 > number of parameters, which is 1).

报了这个bugjava.sql.SQLException: Parameter index out of range (2 > number of parameters, which is 1). 对应sql语句是这样的 把注释删掉&#xff0c;就不报错了&#xff0c;这是什么奇葩bug

SolidWorks 3D Interconnect介绍

目前市面上有的三维设计软件有很多&#xff0c;如UG、Pro/E、CATIA等&#xff0c;而且每个三维设计软件都会生成自己文件格式。由于产品设计的原因&#xff0c;我们避免不了的会需要去使用不同三维设计软件的文件&#xff0c;这对于工程师来说其实是一件比较麻烦的事。 为什么…

简单上手FineBI

简介 安装下载 下载的是V6.0.11版本 设置管理员账号 账号admin 密码123456 新建分析主题 添加数据 选择本地数据上传 选择示例数据上传 打开效果如下&#xff0c;点击“确定”&#xff0c;这样就将示例数据上传到分析主题中 分析数据——编辑数据 如果数据质量好&#xf…

深入理解 Java Bean 的生命周期及各个阶段解析

目录 引言&#xff1a;一、什么是Java Bean二、Bean的生命周期概述三、Bean的创建阶段四、属性设置阶段初始化阶段六、使用阶段七、销毁阶段 引言&#xff1a; Java Bean是Java编程中经常使用的重要概念&#xff0c;它是可重用、可移植、可序列化的组件。在Java开发中&#xf…

数据可视化:Matplotlib详解及实战

1 Matplotlib介绍 Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型的2D图表和一些基本的3D图表。 Matplotlib提供了一个套面向绘图对象编程的API接口&#xff0c;能够很轻松地实现各种图像的绘制&#xff0c;并且它可以配合Python GUI工具&#xff08;…

k8s手动发布镜像的方法

kubectl edit deploy编辑对应的文件&#xff0c;并:wq!保存即可

微信小程序 - scroll-view组件之上拉加载下拉刷新(解决上拉加载不触发)

前言 最近在做微信小程序项目中&#xff0c;有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能&#xff0c;遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题&#xff0c;网上很多说给scroll-view设置一个高度啥的就可以解决&#xff0c;有些人设置了…

MySQL 窗口函数

聚合函数作为窗口函数 设聚合函数为op语法结构&#xff1a; op(字段名A) over(partition by 字段名B order by 字段名C rows between D1 and D2) 其中&#xff1a; partition by&#xff1a;按照某一字段将数据进行分组 order by&#xff1a;按照某一字段将数据进行排序&…

获取k8s scale资源对象的命令

kubectl get --raw /apis/<apiGroup>/<apiVersion>/namespaces/<namespaceName>/<resourceKind>/<resourceName>/scale 说明&#xff1a;scale资源对象用来水平扩展k8s资源对象的副本数&#xff0c;它是作为一种k8s资源对象的子资源存在&#xf…

“单片机定时器:灵活计时与创新功能的关键“

学会定时器的使用对单片机来说非常重要&#xff0c;因为它可以帮助实现各种时序电路。时序电路在工业和家用电器的控制中有广泛的应用。 举个例子&#xff0c;我们可以利用单片机实现一个具有按钮控制的楼道灯开关。当按钮按下一次后&#xff0c;灯会亮起并持续3分钟&#xff…

Windows安装子系统Linux

Windows安装子系统(Linux ubuntu&#xff09; 安装条件步骤1.安装WSL命令2.设置Linux用户名和密码3.写个简单的.c程序看看4.如何互传文件 安装条件 Windows 10版本2004及更高的版本才能安装。 步骤 1.安装WSL命令 我们可以使用WSL来安装子系统 Linux ubuntu(默认是这个)。 …

医学影像PACS:大容量图像存储 报告单多种模式及自定义样式

PACS&#xff08;picture archiving and communication system&#xff09;意为影像归档和通信系统。它是应用在医院影像科室的系统&#xff0c;主要的任务就是把日常产生的各种医学影像&#xff08;包括核磁&#xff0c;CT&#xff0c;超声&#xff0c;各种X光机&#xff0c;各…

话费充值系统源码话费直充快充慢充系统源码

话费充值系统/话费直充/快充慢充系统/话费直充系统

学C的第三十二天【动态内存管理】

相关代码gitee自取&#xff1a;C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 学C的第三十一天【通讯录的实现】_高高的胖子的博客-CSDN博客 1 . 为什么存在动态内存分配 学到现在认识的内存开辟方式有两种&#xff1a; 创建变量&#xff1a; int val …

软考 系统分析师和系统架构师 项目管理师

软考整起 https://www.ruankao.org.cn/ 什么是计算机技术与软件&#xff08;初级、中级、高级&#xff09;考试&#xff08;软考&#xff09;&#xff1f; - 知乎 系统分析师和系统架构师关系 这两年&#xff0c;我先后报考了计算机技术与软件专业技术资格&#xff08;水平&a…

pycharm中opencv库导入 cv2. 无函数提示跳出解决方法

pycharm中opencv库导入 cv2. 无函数提示跳出解决方法 1、找到当前解释器安装目录 例如&#xff1a; 2、进入D:\Python37\Lib\site-packages\cv2文件&#xff0c;进入cv2文件夹&#xff1a; 找到cv2.pyd, 把cv2.pyd复制一份&#xff0c;放到上层文件夹下&#xff0c;即site-p…

局域网部署,用WorkPlus视频会议保密又安全

用户采用私有化部署视频会议软件的情况主要有以下几种因素&#xff1a; 1. 针对机密性高的会议&#xff1a;如果有涉及高度机密的商业谈判或敏感信息交流等重要会议&#xff0c;政府、军工、企业等用户会选择局域网内部署视频会议软件&#xff0c;以保证信息安全。 2. 频繁进…

二叉树的性质、前中后序遍历【详细】

1. 树概念2.二叉树的概念1.2二叉树的性质 3.二叉树遍历3.2前序遍历3.2 中序遍历3.3 后序遍历 1. 树概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合&#xff0c;有二叉树&#xff0c;N叉树等等。 子树…

mac安装nvm

如果安装过node&#xff0c;须得卸载 sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/local/share/m…