Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

思考题(5.4节):使用Transform对其子组件先进行平移然后再旋转和先旋转再平移,两者最终的效果一样吗?为什么? #341

Open
wendux opened this issue Nov 26, 2019 · 4 comments

Comments

@wendux
Copy link
Member

wendux commented Nov 26, 2019

大家可以把答案贴在这里讨论。

@wendux wendux pinned this issue Nov 26, 2019
@Aaron009
Copy link

Aaron009 commented Nov 27, 2019

因为Transform的操作是改变自身内部像素显示。做过Flash的开发,都知道如果想要正确显示图像永远都是需要 先旋转再平移再缩小放大。 H5是先平移再旋转。

根据上面的理解,再来想象一下以下场景。

把你想象成一个图片,
找根柱子,前面站下来,
先绕柱子旋转,再向前走,
然后回到柱子,先向前走,再绕柱子旋转。

这就理解为啥,最终的不一样了吧。

@Shirley0207
Copy link

我实践了一下,得出以下结论:旋转是以控件自身的中心点旋转,平移是以控件自身的左上角为原点,水平向右为x轴正方向,竖直向下为y轴正方向为参考系的
那么,先旋转后平移的情况下,旋转过后的控件其实自身坐标系已经改变了。比如说旋转90度后x轴正方向变为竖直向下,y轴正方向变为水平向左了,所以平移的方向已经和原来的方向不一样了。
这样的结论是正确的吗?

@yanhao98
Copy link

yanhao98 commented Mar 5, 2020

@wendux
Copy link
Member Author

wendux commented Mar 22, 2020

答案是:效果不一样!因为Transform对子组件的变换是通过矩阵变换,子组件像素矩阵乘以变换矩阵,在这个问题中实际上等同于: 子组件像素矩阵✖️平移变换矩阵✖️旋转变换矩阵 是否等于 子组件像素矩阵✖️旋转变换矩阵✖️平移变换矩阵?学过线性代数的话,我们会知道矩阵乘法是不满足交换律的,所以效果肯定不同。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants