当前有个d3.js实现的地图,其中有一元素会根据rest获取的坐标做移动动画。现在需要将地图整体顺时针旋转90度。不改变接口的情况下,如何在旋转后正确的做移动动画?

时间: 2023-09-26 13:06:47 浏览: 33
### 回答1: 在旋转后正确做移动动画,需要对原来的移动动画进行修改。假设原来的移动动画是根据原始坐标移动,现在需要根据旋转后的坐标进行移动。具体步骤如下: 1. 在旋转地图之前获取元素的坐标,保存下来; 2. 旋转地图后,重新计算元素的坐标,保存下来; 3. 在移动动画中,根据旋转后的坐标进行移动。 下面是一些具体的实现细节: - 获取元素的坐标:可以通过元素的位置信息(x、y、width、height)计算得到,也可以通过查找元素在SVG中的位置信息得到。 - 计算旋转后的坐标:可以通过矩阵变换来实现。矩阵变换可以通过d3.js中的transform属性来设置,可以使用d3.transform()方法来获取元素的transform属性值,然后使用d3.transform().rotate()方法来旋转。 - 在移动动画中,根据旋转后的坐标进行移动:可以通过d3.transition()方法创建一个过渡效果,然后使用.attr()方法来设置元素的位置信息(x、y)。在设置位置信息时,需要将旋转后的坐标作为输入。 总的来说,在修改移动动画时,需要考虑如何计算旋转后的坐标,并将其作为输入。 ### 回答2: 在不改变接口的情况下,在旋转地图后正确地做移动动画,可以通过以下步骤实现: 1. 获取旋转后的地图坐标系:将地图的坐标系按顺时针方向旋转90度,可以通过修改地图的SVG元素的旋转属性实现。 2. 转换移动动画坐标:原本基于旧的地图坐标系的移动动画坐标需要进行转换,以适应新的坐标系。可以通过将旧坐标系的点坐标按照逆时针方向旋转90度的方式进行转换。 3. 更新动画数据:将转换后的坐标更新至动画数据中,此时动画将基于旋转后的地图坐标系进行移动。 需要注意的是,在进行步骤2和3时,需要对原始坐标和动画数据进行相应的数学计算,以确保正确的转换和更新。另外,还要考虑到旋转后的地图可能对应的屏幕坐标的变化,也要相应调整动画的目标位置。 通过以上步骤,就可以在地图整体顺时针旋转90度后,正确地进行移动动画,而不改变原有的接口。 ### 回答3: 如果需要将地图整体顺时针旋转90度,但不改变接口的情况下如何正确地进行移动动画呢? 首先,要实现地图的旋转,可以通过CSS的transform属性来实现。可以将地图的容器元素应用transform: rotate(90deg)的样式,来旋转整个地图顺时针90度。这样,地图中的所有元素(包括需要做移动动画的元素)都会跟着旋转。 接下来,我们需要考虑如何正确地进行移动动画。由于地图整体顺时针旋转90度后,原本的x轴变为了y轴,y轴变为了-x轴。因此,原来在x轴上的移动现在应该改为在y轴上的移动,原来在y轴上的移动现在则应该改为在-x轴上的移动。即,需要对移动的坐标进行调整。 为了实现这个调整,可以通过以下步骤进行: 1. 获取每个元素当前的移动坐标。 2. 将x轴上的坐标转换为y轴上的坐标,即新的x坐标为原来的y坐标(即原来的x坐标对应的y坐标),新的y坐标为原来的负x坐标(即原来的y坐标对应的-x坐标)。 3. 根据新的坐标进行移动动画。 通过以上步骤,即可在地图旋转90度后,正确地进行移动动画,使得元素能够按照旋转后的方向进行正确的移动。同时不改变接口,只需要在旋转时对坐标进行一次转换即可。

相关推荐

最新推荐

2018年数学建模赛题及优秀论文.zip

数学建模真题及优秀论文资料

数据仓库数据挖掘综述.ppt

数据仓库数据挖掘综述.ppt

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

springboot新闻信息管理系统开发技术文档更新

# 1. 系统概述 ## 1.1 项目背景 在当今信息爆炸的时代,新闻信息是人们获取信息的重要渠道之一。为了满足用户对新闻阅读的需求,我们决定开发一个新闻信息管理系统,该系统旨在提供便捷的新闻发布、浏览与管理功能,同时也要保证系统的性能和安全防护。 ## 1.2 系统目标与功能需求 系统的目标是构建一个高效、稳定、安全的新闻信息管理平台,主要包括但不限于以下功能需求: - 新闻信息的增加、修改、删除、查询 - 用户的注册、登录与权限控制 - 数据库性能优化与缓存机制实现 - 安全防护措施的设计与漏洞修复 ## 1.3 技术选型与架构设计 在系统设计中,我们选择采用Java

hive 分区字段获取10天账期数据

假设你的 Hive 表名为 `my_table`,分区字段为 `account_date`,需要获取最近 10 天的数据,可以按照以下步骤操作: 1. 首先,获取当前日期并减去 10 天,得到起始日期,比如: ``` start_date=$(date -d "10 days ago" +"%Y-%m-%d") ``` 2. 接下来,使用 Hive 查询语句从分区中筛选出符合条件的数据。查询语句如下: ``` SELECT * FROM my_table WHERE account_date >= '${start_date}' ```

生活垃圾卫生填埋场运营管理手册.pdf

生活垃圾卫生填埋场运营管理手册.pdf

"互动学习:行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动,互动学习以行动为中心的强化学习学会互动,互动学习,以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授:智囊团论文联合主任菲利普·普雷教授,大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授,Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士,Deepmind对于那些及时看到自己错误的人...3谢谢你首先,我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔,"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲,你知道在这篇论文的(许多)错误中,你是我可以依

springboot新闻信息管理系统系统与用户功能示范

# 1. 引言 ## 1.1 背景介绍 在当今信息爆炸的时代,新闻信息管理系统对于各类机构和企业来说是至关重要的。它能够帮助用户高效地管理新闻信息,提升信息传播的效率和准确性。随着技术的不断发展,采用先进的技术手段来构建新闻信息管理系统已经成为一种趋势。 ## 1.2 目的和意义 本文旨在通过使用Spring Boot框架构建一个新闻信息管理系统,展示系统的基本功能和用户操作示范。通过这个系统,用户可以实现新闻信息的发布、编辑和管理,同时也可以进行用户权限管理等操作,提高了信息管理的效率和便利性。 ## 1.3 系统概述 新闻信息管理系统主要包括用户管理模块、新闻管理模块和权限管理模块。

python 实现创建一个文件(绝对路径,但是上级目录可能不存在)的代码

可以使用Python内置的os模块来实现创建一个文件(绝对路径,但是上级目录可能不存在)的代码,具体实现如下: ```python import os # 绝对路径 file_path = '/path/to/file.txt' # 获取文件所在目录 dir_path = os.path.dirname(file_path) # 如果文件所在目录不存在,则递归创建目录 if not os.path.exists(dir_path): os.makedirs(dir_path) # 创建空文件 open(file_path, 'w').close() ``` 以上代码通过os

计算机在商业银行审计中应用PPT学习教案.pptx

计算机在商业银行审计中应用PPT学习教案.pptx