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

news2024/11/23 13:25:46

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Python】基础:OpenCV库基本应用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍OpenCV库基本应用。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&…

【项目 计网1】4.1 网络结构模式 4.2MAC地址、IP地址、端口

文章目录 第四章 Linux网络编程4.1 网络结构模式C/S结构&#xff08;client-server&#xff09;B/S结构&#xff08;Browser/Server&#xff0c;浏览器/服务器模式&#xff09; 4.2 4.3MAC地址、IP地址、端口&#xff08;1&#xff09;&#xff08;2&#xff09;MAC地址IP地址(…

abp vnext升级到指定版本并处理升级后的问题

在使用abp vnext时当版本更新后可能会跨越net的版本&#xff0c;如果我们想升级到指定版本该怎么做呢&#xff0c;升级之后又有一些问题需要处理&#xff0c;下面一起看一下&#xff1a; 当前我的项目是.net5 abp vnext4.2.1 当前的最新abp版本是7.* 对应的net版本是 net7,由于…

FFmpeg常见命令行(二):FFmpeg转封装

前言 在Android音视频开发中&#xff0c;网上知识点过于零碎&#xff0c;自学起来难度非常大&#xff0c;不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》。本文是Android音视频任务列表的其中一个&#xff0c; 对应的要学习的内容是&#xff1a;如何使…

【Verilog/D8】

2023年8月5日 HDBits/Cs450/counter 2bc状态机异步复位noteHDBits/Cs450/history shiftHDBits/Cs450/gshare HDBits/Cs450/counter 2bc状态机 Cs450/counter 2bc LSB最低有效位 module top_module(input clk,input areset,input train_valid,input train_taken,output reg[1…

选读SQL经典实例笔记18_Exactly

1. 问题9 1.1. 只讲授一门课程的教授 1.2. sql select p.*from professor p,teach twhere p.lname t.lnameand p.lname not in ( select t1.lnamefrom teach t1,teach t2where t1.lname t2.lnameand t1.cno &#xff1e; t2.cno ) LNAME DEPT SALARY …

抖音seo矩阵系统源代码开发搭建技术分享

抖音SEO矩阵系统是一个较为复杂的系统&#xff0c;其开发和搭建需要掌握一定的技术。以下是一些技术分享&#xff1a; 技术分享 抖音SEO矩阵系统的源代码可以使用JAVA、Python、PHP等多种语言进行开发。其中&#xff0c;JAVA语言的应用较为广泛&#xff0c;因为JAVA语言有良好…

运输层---UDP协议

目录 一. 无连接运输&#xff1a;UDP1.1 定义1.2 特点1.3 应用 二. UDP报文段结构三. UDP检验和3.1 定义3.2 检验和计算实例3.2 UDP检验和的局限 一. 无连接运输&#xff1a;UDP 1.1 定义 UDP&#xff08;User Datagram Protocol&#xff09;用户数据报协议&#xff1a;由 [RF…

数字图像处理 使用 GIST 图像描述符

一、简述 GIST描述符是一种用于场景识别的全局图像特征,它能够有效地描述图像的空间结构信息。GIST描述符最初是在这篇论文中提出的:A Computational Approach to Edge Detection 1998。 图像的 GIST 描述符可以通过分析空间频率和方向来捕获。直观上,GIST 总结了图像不同部分…

九、pig安装

1.上传pig包 2.解压文件 3.改名 4.赋权 5.配置环境变量 export PIG_HOME/usr/local/pig export PATH$PATH:$JAVA_HOME/bin:$HADOOP_HOME/bin:$HADOOP_HOME/sbin:$HIVE_HOME/bin:$HBASE_HOME/bin:$SQOOP_HOME/bin:$PIG_HOME/bin 6.测试

ensp-DHCP服务实验

ensp-DHCP服务实验 日期&#xff1a;6-26 &#x1f4ce;DHCP服务器.zip&#x1f4ce;dhcp服务作业.docx

剑指 Offer 50. 第一个只出现一次的字符

题目描述 在字符串 s 中找出第一个只出现一次的字符。如果没有&#xff0c;返回一个单空格。 s 只包含小写字母。 示例 思路1 如果一个字符首次出现indexOf和最后一次出现lastIndexOf的位置相同&#xff0c;说明只出现了一次 从左到右遍历即可得到第一个不重复出现的数字cla…

c++11 标准模板(STL)(std::basic_ofstream)(三)

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ofstream : public std::basic_ostream<CharT, Traits> 类模板 basic_ifstream 实现文件流上的高层输入操作。它将 std::basic_istrea…

DLA 神经网络的极限训练方法:gradient checkpointing

gradient checkpointing 一般来说&#xff0c;训练的过程需要保存中间结果&#xff08;不管是GPU还是CPU&#xff09;。前向传播根据输入(bottom_data)计算输出(top_data)&#xff0c;后向传播由top_diff计算bottom_diff&#xff08;如果某个变量打开梯度进行训练的话&#xff…

AcWing 4310:树的DFS ← vector、auto、邻接表

【题目来源】https://www.acwing.com/problem/content/description/4313/【题目描述】 给定一棵 n 个节点的树。 节点的编号为 1∼n&#xff0c;其中 1 号节点为根节点&#xff0c;每个节点的编号都大于其父节点的编号。 现在&#xff0c;你需要回答 q 个询问。 每个询问给定两…

Godot 4 源码分析 - Path2D与PathFollow2D

学习演示项目dodge_the_creeps&#xff0c;发现里面多了一个Path2D与PathFollow2D 研究GDScript代码发现&#xff0c;它主要用于随机生成Mob var mob_spawn_location get_node(^"MobPath/MobSpawnLocation")mob_spawn_location.progress randi()# Set the mobs dir…

面试热题(x的平方根)

给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.5) 或者 x ** 0.5 。 这道题虽然是简单题…

Laravel 5 报错信息存在严重漏洞

靠自己生活&#xff0c;灵魂都是安宁的。 简介 Laravel是一套简洁、优雅的PHPweb开发程序框架&#xff0c;并且具有简洁的表达&#xff0c;是一个比较容易理解且强大的&#xff0c;它提供了强大的工具用以开发大型网站的应用。 漏洞复现 使用Whoops错误库来显示\Whoops\Han…

mysql报错:name ‘_mysql‘ is not defined

原因是&#xff1a; Mysqldb 不兼容 python3.5 以后的版本 解决办法&#xff1a; 使用pymysql代替MySQLdb 在项目应用下的__init__.py 添加上去 import pymysqlpymysql.version_info (1, 4, 13, "final", 0) pymysql.install_as_MySQLdb()

找不到org.apache.http.annotation.NotThreadSafe的类文件

问题现象 最近在做一个调用包含请求体的GET请求功能的时候&#xff0c;引用了 httpclient-4.5.2.jar 和 httpcore-4.4.5.jar。 在工程编译环节报错如下&#xff1a; 原因分析 httpcore 和 httpclient 的版本不匹配。 解决方案 将 httpcore 的版本由 4.4.5 改为 4.4.4&am…