如何使用 css3 校正鱼眼全景图? [英] How to deskew a fisheye panorama using css3?

问题描述

感觉是时候把我的flash全景图转换成js/html5/css3了.我见过一些使用单独平面图像的优雅解决方案，但我的都是鱼眼...

I feel that it has come time to convert my flash panoramas to js/html5/css3. I've seen some elegant solutions using separate flat images, but mine are all fisheye...

我的直觉告诉我，使用 -webkit-transform: matrix3d 是可行的，但我并没有完全成功.

My intuition tells me that it's doable using -webkit-transform: matrix3d but I'm not quite hitting it.

任何想法是否真的可以在 css3 中完成?

Any ideas if this can really be done in css3?

谢谢你.

推荐答案

是的，可以做到，但你最好了解你的数学.请注意，您使用的不是 CSS3 而是专有扩展，这仅适用于 webkit 浏览器.使用 Canvas 元素来完成这项工作可能会更好，它不仅得到更多浏览器的支持，而且还为您提供了更大的自由来进行任何您想要的转换.

Yes, it can be done, but you better know your mathematics. Note that you are not using CSS3 but rather a proprietary extension, this will only work in webkit browsers. You'll probably be better off using a Canvas element for the job, not only is it supported by more browsers, it also gives you far greater freedom to do whatever transformation you desire.

那么，将您的图像切成许多薄的垂直切片，每个切片应按大约 1/cos([角度偏离中心]) 缩放，并倾斜以考虑右侧和左侧的角度不同片.通过这种方式，您应该最终得到一个反鱼眼"形状，其中图像的顶部和底部是凹的，您可能希望将其切成正方形.

Well then, cut your image into a number of thin vertical slices, each slice should be scaled by approx 1/cos([angle off centre]), and skewed to account for the angle being different at the right and the left side of the slice. This way you should end up with an "inverse fisheye" shape where the top and the bottom of the image is concave, you might want to cut it to a square.

这篇关于如何使用 css3 校正鱼眼全景图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！