前端实现一个绕圆心转动的功能

在这里插入图片描述

得知了转换关系,我们就可以定义一个变量 angle 来表示我们这个 div 做圆周运动时绕圆心转过的角度,则弧度(radian) 为 radian =(angle*π)/180

我们先在草稿纸上演练一遍我们的逻辑是否可行。让我们先准备一个矩形来代表我们的页面,然后确定一个点来作为圆心。

在这里插入图片描述

圆心的位置坐标其实很简单,不要想复杂了,就是相对于页面的位置而已,我们记住这个 (100,100) 的值,等会它会作为我们实现圆周运动的圆心位置。

在这里插入图片描述

接下来确定半径,这里我就随便取一个 50 作为半径值。

假设这是我们的 div 已经绕圆心转了一些弧度以后的情景。

在这里插入图片描述

ips: 在这里有一个十分重要的概念,div 滑过的路径其实是由无数个不同坐标位置的点构成的。

在这里插入图片描述

接下来就是本文的关键部分,请大家喝口水认真听讲。我们取一个中间时刻,假设 div 此时做圆周运动到了点 B ,那么我们的问题就转化为了如何求点 B 的坐标信息。(不要忘了,坐标信息其实就是相对于页面上的 left 和 top 而已。)

在这里插入图片描述

一步一步来,我们先求 X 坐标的值,换算下来其实就是要求 a 的长度。

在这里插入图片描述

此时我们准备好拿出已有的数据,来套公式即可。度数我们是有的,因为我们已经用变量 angle 来假设我们绕过的度数,则弧度radian =(angle*π)/180 ,然后根据三角函数的正弦定理可得 sin(rad)=a/radius 。

此时半径已知,sin(rad) 已知,则 a=sin(rad) X 50,然后加上圆心的 x 坐标值 100,即可得出此时 B 点相对于页面的 left 值。

Y 坐标同理,只不过公式换为 cos 即可,换算过程不再重复,但是需要注意的点是,我们计算 Y 坐标 的目的其实在求的是 B 点的 top 值,又因为我们前端的坐标Y轴其实和数学的坐标Y轴的正负极是相反的,所以我们其实要算的值是这一段的距离。如下图:

在这里插入图片描述

即 B 点的 top 值为圆心的 Y 坐标值100 - 距离b,至此我们所有需要的数据都已经获得,接下来就是用代码验证我们思路的可行性。

<template><div class="home"><div class="big"><div ref="box" class="box"></div></div></div>
</template><script>export default {name: 'HomeView',data() {return {box: {},centerPointer: { x: 100, y: 100 },radius: 50,angle: 0}},mounted() {this.run()},methods: {/** * 1. 确定圆心* 2. 确定半径* 3. 旋转 */run() {this.box = this.$refs['box']setInterval(() => {if (!this.box) return;this.angle += 1;const radian = (this.angle * Math.PI) / 180;const a = Math.sin(radian) * this.radius;const b = Math.cos(radian) * this.radius;const x = this.centerPointer.x + a;const y = this.centerPointer.y - b;this.box.style.left = x + "px";this.box.style.top = y + "px";}, 16);}}
}
</script><style scoped>
.home {width: 100%;height: 100%;
}.big {width: 500px;height: 500px;background-color: #00bbff;position: relative;
}.box {position: absolute;width: 50px;height: 50px;/* background-color: red; */background-image: url('/public/static/img/magnifier.png');background-size: 50px 50px;
}
</style>

实现逆时针转动(添加负号在下面这一行代码中)

const a = -Math.sin(radian) * this.radius;

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

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

相关文章

linux防火墙和开放端口命令

一、firewalld防火墙: 1.firewalld的基本使用 启动&#xff1a; systemctl start firewalld 查状态&#xff1a; systemctl status firewalld 停止&#xff1a; systemctl stop firewall 禁用&#xff1a; systemctl disable firewalld 在开机时启用一个服务&#xff1a;s…

2024蓝桥杯每日一题(差分)

一、第一题&#xff1a;空调 解题思路&#xff1a;差分 希望P减掉T后就相当于从0到New_P&#xff0c;想到得到New_P只需要对全0数组进行若干次区间加操作&#xff0c;所以只需要对New_P数组进行差分&#xff0c;累加正数和负数&#xff0c;哪个绝对值大答案就是那个。 …

数据库安全的重要性

数据库作为信息系统的核心&#xff0c;不仅承载着海量的关键数据&#xff0c;还负责向各类用户提供高效、可靠的信息服务。在网络技术高度发展的今天&#xff0c;数据库的安全性显得尤为关键。为了防范不法分子的攻击&#xff0c;维护数据完整性和可靠性&#xff0c;数据库安全…

解决由NVCC编译优化所产生的Bug

Bug描述 在测量如下一个简单的核函数的执行时间的时候&#xff0c;发现测量的时间和循环的次数完全无关&#xff0c;觉得很奇怪&#xff0c;因为循环的次数已经很大了&#xff0c;不管我再怎么提升循环次数&#xff0c;这么大的计算量&#xff0c;不可能保持时间的恒定。 __g…

【Windows】VMware虚拟机应用(二):安装ubuntu-14.04.4

一、下载安装包 ubuntu-14.04.4-server-amd64.iso 注&#xff1a;因为我是用已有的安装包&#xff0c;所以&#xff0c;这里就不写下载步骤了。 二、安装引导 以管理员身份运行 VMware Workstation Pro 注&#xff1a;如果不是管理员身份运行&#xff0c;在安装系统时会出现…

二叉搜索树:查找+插入+删除+性能分析

文章目录 一、搜索树1.二叉搜索树的查找2.二叉搜索树的插入3.二叉搜索树的删除4.性能分析 一、搜索树 二叉搜素树 &#xff08; 二叉排序树 ) 1.要么是空树 2.如果左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 3.如果右子树不为空&#xff0c;则右子树上所…

7款前端实战型项目特效分享(附在线预览)

分享7款实用性的前端动画特效 其中有canvas特效、css动画、svg动画等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的 CSS春节灯笼特效 基于CSS实现的灯笼特效 灯笼会朝左右两个方向来回的摆动着 以下效果图只能体现…

关于Vue3的一些操作

1. 设置浏览器自动打开 在package.json 中设置 dev: vite --open 2.给src文件夹配置别名 在vite.config.ts配置文件中添加以下内容 3. 如果2中有红色波浪线的问题 ***安装一个文件包***npm install types/node3. 在tsconfig.json配置文件中&#xff0c;找到配置项compi…

Windows下Node.js安装保姆级教程

一、Node.js 下载 访问Node.js官网&#xff0c;点击下载Node.js 下载完成后即可在下载文件中查看安装包 二、安装 一&#xff09;点击安装包开始安装&#xff0c;进入Weclcome界面点击Next 二&#xff09;勾选同意协议&#xff0c;点击Next 三&#xff09;根据需要选择安装路…

Open CASCADE学习|表面着色显示模型

模型表面着色具有如下作用&#xff1a; 视觉增强&#xff1a;通过为模型表面添加着色&#xff0c;可以使其更加生动和逼真&#xff0c;提高视觉体验。 信息区分&#xff1a;在复杂的模型中&#xff0c;不同的部分或组件可能需要通过不同的颜色来区分&#xff0c;以便更清晰地…

MySQL 主键与索引的联系与区别

关系数据库依赖主键 主键有两个用途&#xff1a;惟一地标识一行。 主键还作为一个可以被外键有效引用的对象。 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分)&#xff0c;它们包含着对数据表里所有记录的引用指针。 A. 主键是什么? 比如看书&#xff0c…

新手做抖店为什么从无货源做起?无货源怎么做?

我是电商珠珠 一说做电商&#xff0c;不管你去找机构学也好&#xff0c;还是自己上百度搜也好&#xff0c;都是推荐新手小白从无货源开始做起。部分人根本不懂&#xff0c;无货源究竟是什么&#xff0c;应该怎么做。 接下来&#xff0c;我就来给大家详细的讲一下 为什么要从…

mmlspark.lightgbm.LightGBMClassifier参数明

mmlspark.lightgbm.LightGBMClassifier 是一个用于二元分类和多类分类的机器学习模型&#xff0c;它是基于 Microsoft ML for Apache Spark (MMLSpark) 库的。这个类是为了在Spark环境中使用LightGBM实现&#xff0c;提供了大量的参数用于调整模型。下面是一些主要参数的详细中…

简介maven核心:pom项目对象模型

Maven Maven 意思是知识的积累者&#xff0c;最初是为了简化 Jakarta Turbine 项目中的构建过程。有几个项目&#xff0c;每个项目都有自己的 Ant 构建文件&#xff0c;它们都略有不同。JAR 被检入 CVS。我们想要一种标准的方式来构建项目&#xff0c;清楚地定义项目的组成&am…

Redis缓存预热-缓存穿透-缓存雪崩-缓存击穿

什么叫缓存穿透? 模拟一个场景: 前端用户发送请求获取数据,后端首先会在缓存Redis中查询,如果能查到数据,则直接返回.如果缓存中查不到数据,则要去数据库查询,如果数据库有,将数据保存到Redis缓存中并且返回用户数据.如果数据库没有则返回null; 这个缓存穿透的问题就是这个…

电力物联网系统设计

电力物联网系统设计 简介 在新能源行业从业多年&#xff0c;参与和负责过大大小小的的项目&#xff0c;发电侧、电网侧、用户侧系统都有过实际的项目经验&#xff0c;这些项目或多或少都有物联网采集方面的需求&#xff0c;本篇文章将会对电力行业物联网经验做一个总结分享。 …

ubuntu nginx

FFmpeg nginx-http-flv-module flv.js 实现视频流播放-一只小松徐吖 (xaoxu.cn) cat /etc/nginx/sites-enabled/default ## # You should look at the following URLs in order to grasp a solid understanding # of Nginx configuration files in order to fully unleash …

【Spring知识体系】1.1 Java 注解(Annotation)

文章目录 1.1 注解&#xff08;Annotation&#xff09;1.1.1 什么是注解1.1.2 内置注解1.1.3 元注解&#xff08;5种&#xff09;1.14 自定义注解1.15 注解使用场景介绍※ 本文小结 1.1 注解&#xff08;Annotation&#xff09; 1.1.1 什么是注解 注解的定义&#xff1a;它提…

2024-3-8 python管理有序序列使用bisect模块,存放数字array比list更快更省空间

bisect模块 bisect.bisect&#xff08;sequnce, target&#xff09;&#xff1a;返回target在sequence中的位置&#xff0c;该位置的标准是target放在这位置的后方&#xff0c;sequence仍然能保持有序。比如sequence [1,3,4,5,10]&#xff0c;target6&#xff0c;则bisect.bi…

基于工业边缘网关的机械状态监测与故障诊断应用

机械设备工作于各种各样的环境&#xff0c;在运行过程中必然受到力、温度、摩擦等多种物理、化学作用,使机械设备状态和性能变化,进而产生“隐性故障”。随着机械设备“隐性故障”的长期累积&#xff0c;可能造成设备损伤损坏&#xff0c;甚至影响系统整体生产和运营&#xff0…