在 3D 中包裹/扭曲 CALayer/UIView(或 OpenGL)(iPhone)
我有一个 UIView(以及一个 CALayer),我试图在 3D 空间中稍微扭曲或弯曲。也就是说,假设我的 UIView 是一个平面标签,我想将其部分包裹在啤酒瓶上(不是 360 度,只是在一侧)。
我认为通过对视图的图层应用变换可以实现这一点,但据我所知,这种变换仅限于图层的统一旋转、缩放和平移。至少可以说,我在这里可能是错的,因为我的线性代数目前还很模糊。
我怎样才能实现这个目标?
I've got a UIView (and thus a CALayer) which I'm trying to warp or bend slightly in 3D space. That is, imagine my UIView is a flat label which I want to partially wrap around a beer bottle (not 360 degrees around, just on one "side").
I figured this would be possible by applying a transform to the view's layer, but as far as I can tell, this transform is limited to rotation, scale and translation of the layer uniformly. I could be wrong here, as my linear algebra is foggy at this point, to say the least.
How can I achieve this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用核心动画可以做的最好的事情就是进行分段线性近似。
例如,您可以将“圆柱体”分为八段,并像这样排列它们:
您可以为它们提供相同的图像,但更改翻译,以便它们在边缘对齐。然后对每个进行变换(如果您想要透视外观,可以是简单的水平压缩,也可以是某种“梯形失真”)。
实际上,您可能想要使用八个以上的段。请注意,它们将集中在您视图的边缘附近。
这个 CSS 动画可能会给你一些灵感。
The best you can do with Core Animation is to do a piecewise-linear approximation.
For instance, you might divide your "cylinder" into eight segments, and arrange them like so:
You could give them all the same image but change the translation so that they line up at the edges. Then give each a transform (either a simple horizontal compression or a sort of "keystone" if you are going for a perspective look).
In reality you'd probably want to use more than eight segments. Note that they would be concentrated near the edges of your view.
This CSS animation might give you some inspiration.
看看Apple的示例代码 PVR纹理加载器
这是一个 OpenGL 项目,演示如何在表面(在您的情况下为圆柱体)上显示纹理(您的标签)。
Jeff LaMarche 发布了一个不错的教程< /a> 开始使用 Open GL。
Take a look at the Apple's sample code PVRTextureLoader
This is an OpenGL project that demonstrates how to display a texture (your label) on a surface (on a cylinder in your case).
Jeff LaMarche has posted a nice tutorial to get started with Open GL.
此页面上有一些“扭曲”示例: http://www .sgi.com/products/software/opengl/examples/more_samples/
我(老实说)不知道该怎么做,但我已经将此页面添加为书签相当长一段时间来尝试扭曲/变形 UIView带有网格/网格。
祝你好运。
^.^
There are a few "distort" examples on this page: http://www.sgi.com/products/software/opengl/examples/more_samples/
I (honestly) am not sure how to do it, but I have had this page Bookmarked for quite some time to try to Warp/Morph a UIView with a mesh/grid.
Best of luck.
^.^