Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >实现SVG缩放/旋转转换(以及如何理解坐标系)

实现SVG缩放/旋转转换(以及如何理解坐标系)
EN

Stack Overflow用户
提问于 2012-06-24 21:28:15
回答 1查看 3.6K关注 0票数 3

所以我对SVG坐标系有点困惑。我正在做一个将SVG对象转换为多边形(然后在OpenGL中显示)的项目。我有所有的代码,这些代码取直线、圆圈、路径(用曲线近似)等,并将它们转换为每一个对象的一组点。到目前为止一切都很好。

我现在正处于实现转换的阶段。我已经编写了我所有的矩阵函数并准备就绪,但是我对平移(x,y)和任何以0,0为中心的操作(主要是旋转和缩放)之间的关系感到困惑。

假设我们在0,0有一个对象。rotate(45, 100, 100)相当于translate(100, 100) rotate(45) translate(-100, -100),但是如果我将物体移动到100,100,并且旋转仍然在0,0,那不意味着旋转的中心实际上发生在-100,-100相对于物体的原始位置吗?

我想我的问题是translate是如何影响物体的坐标系的?在某些情况下,它用于在不移动对象的情况下将0,0移动到指定的点,而在另一些情况下,则用于移动对象。

我对坐标系的理解是完全错误的吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-06-26 07:49:34

我认为SVG规范很清楚地解释了坐标变换。每次转换都意味着将当前坐标乘以3x3矩阵。您可以在属性中指定的最一般的转换是自定义的matrix(...),而所有其他类型的转换(转换、旋转、缩放、倾斜)都很容易使用快捷方式。最后,一切都成了矩阵。

将几个变换结合起来很简单,它只是意味着每个变换矩阵与其他变换按顺序相乘,而保持所有变换的跟踪意味着只需记住从这个乘法中得到的最后3x3矩阵,而计算一个元素的最终坐标就意味着将初始坐标的3x1矩阵与那个3x3矩阵相乘。

因此,我的建议是只处理矩阵,而忘记手动应用每个转换。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11183888

复制
相关文章
2d转换缩放与旋转
## 本章将介绍简单的2d缩放的实现,并且举几个简单的应用案例。 No.1缩放属性
用户8247415
2021/04/13
5070
2d转换缩放与旋转
svg平移缩放
svg平移缩放,我刚开始尝试的是自己处理外层容器的控制,结果发现能用,但是效果不太好,有拖尾现象,后来用个js库svg-pan-zoom即可。如果想支持手机端手势操作,需要先安装Hammer.js。
IT晴天
2018/08/20
3.2K0
一篇文章带你了解SVG 转换知识
SVG 转换在SVG图像中创建的形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。
前端皮皮
2020/11/25
1.9K0
一篇文章带你了解SVG 转换知识
UE 实现镜头平移,旋转和缩放
在数字孪生三维场景中,通过键盘和鼠标来控制镜头的移动,缩放是很常见的行为,也是很必要的行为,用户正是通过这些操作,达到对整个三维场景的观看和控制。
用户3158888
2022/09/28
3.3K0
UE 实现镜头平移,旋转和缩放
分享一个自由拖拽组件的实现思路
最近的项目中遇到一个需求,在页面上添加一个可以自由拖拽、缩放、编辑颜色的 svg 图片,项目中引用了两个现有的插件,对插件进行解读之后略有心得,与大家分享一下。
zz_jesse
2021/05/07
2.3K0
svg中矩形旋转问题
场景: 矩形绕原始的中心点旋转后,再调整宽高,这个时候原始点其实已经发生变化,但是旋转角度未变,我们需要计算新的原始点。
JadePeng
2021/08/23
9040
坐标系与矩阵(1):旋转
坐标系转换在很多方面都会用到,比如机器人中的骨骼关节间的空间关系,GIS中的坐标系,渲染和计算机视觉中的相机等,往往需要采用矩阵来实现不同坐标系间的转换。因此,这里主要涉及到几何和线性代数两方面的数学知识。
Peter Lu
2021/06/21
1.8K0
坐标系与矩阵(1):旋转
仿射变换实现组合操作 抠图+缩放+旋转
之前在工作中需要用仿射变换的方式来实现,用给定的bounding box(标注框)从一张
Ldpe2G
2018/06/22
8540
仿射变换实现组合操作 抠图+缩放+旋转
前言          之前在工作中需要用仿射变换的方式来实现,用给定的bounding box(标注框)从一张图片 中扣出特定的区域,然后做旋转和缩放等特定操作。然后在网上搜索了一下与仿射变换相关的资料, 看了仿射变换的思想和一些例子,然后结合手头上的代码,做了一些实验,最后终于搞懂了如何实现。 实验代码(提供C++、Scala和Python三种语言的实现): 码云地址 Github地址 正文          根据给定的标注框从原图中裁剪出物体并且对裁剪出的图片做各种随机旋转和缩放变换, 如果这几个步骤
Ldpe2G
2018/07/09
1.8K0
JS控制SVG缩放+鼠标控制事件
直接撸代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js控制SVG缩放</title> </head> <body> <svg id="svg" style="background-color: #FAFAFA;"> <g id="svgPanel"> <g id="grid"></g> <defs>
青梅煮码
2023/03/13
24.6K0
「音视频直播技术」OpenGL渲染之距阵变换
在Android下进行视频渲染使用的是 OpenGLES。OpenGLES(OpenGL for Embedded Systems)就是用在嵌入式系统中的 OpenGL。
音视频_李超
2020/04/02
1.1K0
「音视频直播技术」OpenGL渲染之距阵变换
Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路
这篇文章将给大家讲解如何在Android系统上基于OpenGL ES 2.0来实现相机实时图片涂鸦效果,所涂内容跟随人脸出现、消失、移动、旋转及缩放,在这里,我们假设您: 已经搭建好一个相机框架,能够获得相机的预览图像 有了一个人脸检测的SDK,能够得到相机预览时每帧人脸在屏幕中的坐标及旋转角度。 在开始讲解之前,先简要介绍一下OpenGL ES 2.0的一些必要的基础知识,方便对文章的理解。 基础知识一:OpenGL的坐标系 为方便讲解,以下只讲解二维的情况,在OpenGL使用中,我们主要会涉及到以下三个
天天P图攻城狮
2018/02/02
7.3K1
Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路
骚操作:使用RxJava实现ImageView的拖动、旋转和缩放
本文介绍一种使用Rxjava实现图片交互操作的方法。支持单指拖动,双指旋转缩放,效果如下:
Android技术干货分享
2019/05/13
1.3K0
骚操作:使用RxJava实现ImageView的拖动、旋转和缩放
Android使用BottomNavigationView以及如何使用SVG图片
我们经常在iconfont上找图片 然后下载下载放在项目里面,为了适配我们还要下载不同尺寸的图片,但是明明iconfont上的图片就是矢量图,为何我们不用矢量图呢?
码客说
2020/05/09
1.9K0
坐标系旋转变换公式图解[通俗易懂]
平时开发程序,免不了要对图像做各种变换处理。有的时候变换可能比较复杂,比如平移之后又旋转,旋转之后又平移,又缩放。
全栈程序员站长
2022/09/20
6.2K0
坐标系旋转变换公式图解[通俗易懂]
【Unity3D】游戏物体操作 ③ ( 旋转操作 | 旋转工具 | 基本旋转 | 设置旋转属性 | 增量旋转 | 缩放操作 | 轴向缩放 | 整体缩放 | 操作工具切换 | 操作模式切换 )
鼠标左键按住旋转 : 在 Unity 旋转 游戏物体 GameObject 时 ,
韩曙亮
2023/03/30
4.6K0
【Unity3D】游戏物体操作 ③ ( 旋转操作 | 旋转工具 | 基本旋转 | 设置旋转属性 | 增量旋转 | 缩放操作 | 轴向缩放 | 整体缩放 | 操作工具切换 | 操作模式切换 )
SVG的动态之美-搜狗地铁图重构散记
搜狗地图发布了新版的移动端地铁图,改版初衷是为了用户交互体验的提升以及性能的改善。原版地铁图被用户吐槽最多的是pinch缩放不流畅、无过渡动画、拖拽边界不合理等等,大体上都是交互体验上的问题。实际上原版的问题不仅仅存在于交互体验上,源代码也是一团糟: 无模块化概念; 存在冗余逻辑和文件; 滥用第三方库&工具; UI的更新仍旧是直接操作DOM; 构建&发布流程不规范。 以上问题其实跟业务以及技术选型无关,可以说是任何一个“历史悠久”的项目都难以避免的问题。针对以上问题的重构方案不是本文要阐述的核心,所以就一笔
寒月十八
2018/05/30
2.2K0
OpenGL ES for Android 视频缩放、旋转、平移
在上一篇文章中我们介绍了使用OpenGL ES 播放视频,在末尾提到如果渲染视频的窗口宽高比和视频宽高比不一致会导致视频拉伸,这篇文章将会介绍如何通过视频的缩放来解决这个问题。
老孟Flutter
2020/09/11
2.8K0
你不知道的SVG
在过去的几年里,SVG已经变得越来越流行。这是有原因的。它们是可扩展的、灵活的,而且最重要的是,是轻量级的。而且,它们所提供的东西甚至比你想象的还要多。我们最近发现了一些神奇的SVG技术,我们很愿意与你分享。从SVG网格、SVG五星制打分效果到SVG蒙版、花哨的颗粒状SVG梯度渐变,以及方便的SVG工具。我们希望你会在这里找到有用的东西。
智影Yodonicc
2022/06/02
3.8K0
你不知道的SVG
点击加载更多

相似问题

SVG旋转和缩放:如何改变旋转/缩放中心?

20

平移、缩放和旋转坐标系

10

svg.js旋转元件旋转整个坐标系

13

SVG坐标系旋转倾斜角

20

捕捉SVG旋转和缩放

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文