球面全景图（Spherical Panorama）是沉浸式浏览体验的核心技术，常见的应用场景包括线上看房、VR相册、街景预览等。在iOS平台上，实现这类效果通常有Metal、OpenGL ES和Core Image三条路线。其中Core Image作为系统自带的高层图像处理框架，通过GPU加速的滤镜链即可完成球面畸变映射，无需手写着色器代码，开发效率明显更高。本文将围绕Core Image方案，完整讲解球面全景图的生成、手势导航以及惯性滑动的实现细节。
一、球面全景图的成像原理与Core Image实现思路
球面全景图的本质是一张等距圆柱投影（Equirectangular Projection）的二维图像，它把球面上的经纬度信息展开成矩形。图像的横向对应经度（0到360度），纵向对应纬度（-90到90度）。浏览全景图时，实际上是在做反向计算：根据当前视角方向（yaw偏航角、pitch俯仰角）和视场角（FOV），把矩形图像重投影到屏幕上。
用Core Image实现这个映射，核心是CITorusLensDistortion或者更通用的CISphereLensDistortion（球面透镜畸变）滤镜配合几何变换滤镜。不过实际工程中，直接使用CILanczosTransform配合自定义的CIColorKernel往往更灵活。下面是一个基础的处理流程示例：
CIImage *panoramaImage = [CIImage imageWithContentsOfURL:imageURL];
// 视角参数：yaw偏航角、pitch俯仰角、fov视场角
CGFloat yaw = self.currentYaw; // 单位：度
CGFloat pitch = self.currentPitch;
CGFloat fov = self.currentFOV;
// 第一步：根据fov计算缩放比例，fov越小放得越大
CGFloat scale = 90.0 / fov;
// 第二步：平移图像，将当前注视点移到画面中心
CIFilter *transform = [CIFilter filterWithName:@"CIAffineTransform"];
[transform setValue:panoramaImage forKey:kCIInputImageKey];
CGAffineTransform t = CGAffineTransformMakeTranslation(
-panoramaImage.extent.size.width * (yaw / 360.0),
-panoramaImage.extent.size.height * ((pitch + 90.0) / 180.0 - 0.5)
);
t = CGAffineTransformScale(t, scale, scale);
[transform setValue:[NSValue valueWithCGAffineTransform:t]
forKey:@"inputTransform"];
CIImage *output = transform.outputImage;
self.context = [CIContext contextWithOptions:@{
CIContextWorkingColorSpace: [NSNull null]
}];
需要注意，等距圆柱投影在两极区域会被严重拉伸，直接线性采样会导致极点附近图像畸变。严谨的做法是在采样时按纬度做余弦校正：对横向采样坐标乘以1/cos(pitch)的补偿因子。如果对画质要求极高，可以改用自定义的CIColorKernel编写GLSL风格的内核函数，Core Image会自动将其编译到GPU上执行，性能与手写Metal差距不大。
二、旋转、缩放、平移三类导航手势的实现
全景导航的手势体系围绕三个自由度展开：单指拖拽改变视角方向（旋转）、双指捏合改变视场角（缩放）、某些业务场景还需要平移整张全景图做预览。建议直接在视图层挂载UIPanGestureRecognizer和UIPinchGestureRecognizer，并通过UIGestureRecognizerDelegate的代理方法让它们同时识别。
单指拖拽换算成角度变化的公式很直观：拖拽像素距离除以屏幕宽度，再乘以当前FOV，就得到角度增量。这样做的好处是手指划过一个屏幕宽度的距离，恰好转动一个视场角，视觉上跟手性最好：
- (void)handlePan:(UIPanGestureRecognizer *)gesture {
CGPoint translation = [gesture translationInView:self.view];
CGFloat width = CGRectGetWidth(self.view.bounds);
// 像素位移换算为角度位移，方向取反模拟"抓住场景"的感觉
CGFloat yawDelta = -translation.x / width * self.currentFOV;
CGFloat pitchDelta = translation.y / width * self.currentFOV;
self.currentYaw += yawDelta;
self.currentPitch += pitchDelta;
// 约束俯仰角范围，避免翻转过头
self.currentPitch = fmax(-90.0, fmin(90.0, self.currentPitch));
// 偏航角按360度取模，保证循环浏览
self.currentYaw = fmod(self.currentYaw + 360.0, 360.0);
[gesture setTranslation:CGPointZero inView:self.view];
[self renderPanorama];
}
- (void)handlePinch:(UIPinchGestureRecognizer *)gesture {
// 捏合放大对应FOV变小，即"拉近看"
CGFloat newFOV = self.currentFOV / gesture.scale;
self.currentFOV = fmax(30.0, fmin(110.0, newFOV));
gesture.scale = 1.0;
[self renderPanorama];
}
平移手势在全景场景中用得较少，但看房类应用有时需要临时切换到平面模式查看原始全景图。实现上可以维护一个isFlatMode标志位，平面模式下用CATransform3D直接操作CALayer，球面模式下走Core Image滤镜链，两种模式共享同一份CIImage数据源，切换时做交叉渐隐过渡即可。另外要注意pitch的限制逻辑：如果业务希望永远看不到天顶和地面，可以把上下限收紧到正负60度，观感会更自然。
三、惯性滑动的物理模拟与性能优化
惯性滑动是提升体验的关键细节。手指离开后画面继续滑行并逐渐减速，能带来接近原生滚动的顺滑感。实现思路是在pan手势结束的瞬间采样当前速度，然后以固定时间步长做衰减模拟。Core Animation提供了UIDynamicAnimator，但对于这种单参数衰减场景，自己写一个简单的指数衰减模型反而更可控：
- (void)handlePan:(UIPanGestureRecognizer *)gesture {
// ... 前面的位移处理逻辑 ...
if (gesture.state == UIGestureRecognizerStateEnded) {
CGPoint velocity = [gesture velocityInView:self.view];
CGFloat width = CGRectGetWidth(self.view.bounds);
// 记录离开瞬间的角速度（度/秒）
self.angularVelocity = -velocity.x / width * self.currentFOV;
self.verticalVelocity = velocity.y / width * self.currentFOV;
[self startInertiaAnimation];
}
}
- (void)startInertiaAnimation {
// 用CADisplayLink驱动衰减，比NSTimer更精准
self.displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(stepInertia)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSRunLoopCommonModes];
}
- (void)stepInertia {
CFTimeInterval dt = 1.0 / 60.0; // 近似帧间隔
CGFloat damping = 0.95; // 衰减系数，越大滑得越远
self.currentYaw += self.angularVelocity * dt;
self.currentPitch += self.verticalVelocity * dt;
self.currentPitch = fmax(-90.0, fmin(90.0, self.currentPitch));
// 俯仰到边界时垂直速度清零，水平继续滑
if (fabs(self.currentPitch) >= 90.0) {
self.verticalVelocity = 0;
}
self.angularVelocity *= damping;
self.verticalVelocity *= damping;
[self renderPanorama];
// 速度低于阈值后停止动画
if (fabs(self.angularVelocity) < 0.5 &&
fabs(self.verticalVelocity) < 0.5) {
[self.displayLink invalidate];
self.displayLink = nil;
}
}
衰减系数的取值直接影响手感，0.95对应大约一秒出头自然停止，0.92则更干脆。如果想让停止曲线更像iOS原生ScrollView，可以把指数衰减换成velocity / (1 + t * friction)的分式衰减，停止阶段会更柔和。另外还有几个性能要点值得注意：第一，CIContext必须全局复用，频繁创建会带来高昂的GPU上下文开销；第二，渲染目标建议绑定CAMetalLayer或使用CIContext render:toBitmap输出到缓存位图，避免每帧都走UIImage中转；第三，全景原图分辨率通常在4K以上，应预先构建多级Mipmap式的降采样副本，根据FOV动态选择输入源，宽视野时用小图，放大看细节时再切换原图。
最后补充一个容易踩的坑：滤镜链中的中间CIImage是惰性求值的，如果每次渲染都重新构建整条链，CPU端的参数解析开销会累积。正确做法是把滤镜对象缓存下来，手势回调中只更新inputTransform等参数值并触发重绘，这样整条链在GPU上的编译结果可以被复用，实测在iPhone上能稳定跑满60帧。掌握这些要点后，配合陀螺仪数据驱动视角，还可以进一步扩展出体感转动全景的效果，为VR类功能打下基础。
Core Image球面全景图iOS图像处理修改时间：2026-09-01 18:18:42