1. 需求拆解与方案选型先搞清楚你到底要缩放“什么”在Unity3D里做“放大缩小图片”这个需求我接到过太多次了。但每次往下深挖发现大家说的“图片”其实指向完全不同的东西。有人要的是UI界面里那张技能图标变小一点有人要的是3D场景里的贴图纹理变得精细还有人要做的是类似地图那样支持鼠标滚轮缩放。这三种场景的处理方式天差地别如果开头就选错方向后面写多少代码都是白费。先说结论在Unity3D中“图片”几乎总是以两种形态存在——一种是场景/UI里的显示对象比如Image组件、SpriteRenderer另一种是内存里的Texture2D原始数据。前者缩放动的是对象的Transform或RectTransform改的是显示尺寸不改变像素数据后者缩放则是重新采样像素矩阵生成一张新的纹理。如果你的需求是“让图片在屏幕上变大变小看得清楚”那大概率是前者如果是“导出一张放大后的图片文件”或者“把缩略图放大后处理像素”那就是后者。两者代码完全不同但很多人混着做导致项目里出现诡异的bug。我建议在动手前先问自己三个问题缩放是交互行为还是固定动画缩放后图片的清晰度有没有要求缩放会不会改变原始资源这三个问题的答案直接决定了方案选型。比如UI头像的点击放大用RectTransform.localScale加一个Tween就完事但如果你要做一个图片查看器放大后要能看到像素细节那UI缩放就会糊得考虑Texture级别的重建甚至用Shader处理。下面我会分别把两条技术路线都讲透并结合常见的交互需求给出可复现的代码。先说最容易被新手绕进去的UI缩放。2. UI图片缩放绕不开的RectTransform和锚点2.1 为什么改Scale是首选而不是改SizeDeltaUI图片在Unity里本质是一个UI网格它的显示尺寸由RectTransform控制。很多人一开始尝试修改sizeDelta宽高值但这玩意儿受锚点影响极大。同一张图锚点位置不同设置相同的sizeDelta结果完全不同。而localScale是一个纯粹的乘法变换不关心锚点直接让UI元素的视觉尺寸成倍变化同时子物体也跟着缩放。所以大部分UI缩放需求我都是优先动localScale。比如你有一张原始尺寸为100x100的图片锚点在中心想要放大到2倍代码就一句话imageRect.localScale Vector3.one * 2f;这样整张图片包括它的子节点都会同步变大。但这里有个隐蔽的坑localScale只是视觉缩放rectTransform的rect尺寸还是100x100。如果后面有代码依赖rect的宽度做布局计算比如你根据图片宽度动态调整旁边按钮的位置那就会出错。我习惯的做法是统一使用一个工具方法在缩放的同时把sizeDelta也同步过去保证逻辑上的尺寸与视觉一致。public static void ScaleImage(RectTransform rt, float scale) { rt.localScale Vector3.one * scale; rt.sizeDelta rt.rect.size * scale; // 同步实际尺寸 }当然如果图片有子节点且子节点有自己的锚点对位关系单纯同步sizeDelta不一定合适这时候要结合具体情况调整。但总体思路不变能改Scale就改Scale改之前想清楚有没有其他逻辑依赖尺寸。2.2 点击按钮放大缩小的完整实现最常见的入门需求是界面上有“放大按钮”和“缩小按钮”点击后图片以自己的中心为基准缩放并限制缩放范围。我们可以封装成一个简单的组件using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class ImageZoomController : MonoBehaviour { [SerializeField] private RectTransform imageRect; [SerializeField] private float minScale 1f; [SerializeField] private float maxScale 5f; [SerializeField] private float step 0.2f; private float currentScale 1f; public void OnZoomIn() { SetScale(currentScale step); } public void OnZoomOut() { SetScale(currentScale - step); } private void SetScale(float target) { target Mathf.Clamp(target, minScale, maxScale); currentScale target; imageRect.localScale Vector3.one * currentScale; } }把组件挂到Canvas下的空物体上按钮的OnClick分别绑定OnZoomIn和OnZoomOut即可。这里有几个细节很多人不注意第一按钮本身如果也是这个图片的子物体那么缩放图片时按钮也会跟着缩放位置会乱跑。所以操作按钮最好放在另一个父节点下面不要作为被缩放图片的子物体。第二缩放是以图片当前的锚点位置为基准的。如果图片锚点在中心那缩放时中心点不变四个角向外扩。如果锚点被设置在左下角缩放时左下角固定图片向右上延伸。做图片查看器时通常希望中心固定所以锚点就设为中心0.5, 0.5。第三连续点击时每次从当前scale累加但要注意浮点误差。我习惯用Mathf.Round(target * 100) / 100这种取整方式避免出现0.6000001这种值。2.3 平滑缩放动画别用Update里Lerp的坏习惯很多人在Update里写localScale Vector3.Lerp(localScale, target, Time.deltaTime * speed)这样虽然能平滑过渡但原点是问题Lerp的第三个参数是插值比例不是速度当目标值一直变化或者Time.deltaTime不均匀时动画会忽快忽慢。而且每一帧都要计算性能也浪费。推荐的做法是用协程或者Tween工具。如果你项目里已经装了DOTween直接一句imageRect.DOScale(targetScale, 0.3f);简洁高效。不想引入第三方库的可以用协程自己写一个public IEnumerator SmoothScale(RectTransform target, float endScale, float duration) { float startScale target.localScale.x; float timer 0f; while (timer duration) { timer Time.deltaTime; float t Mathf.Clamp01(timer / duration); // 加一点缓动效果让动画更自然 t t * t * (3f - 2f * t); // SmoothStep float scale Mathf.Lerp(startScale, endScale, t); target.localScale Vector3.one * scale; yield return null; } target.localScale Vector3.one * endScale; }这个协程的好处是在动画过程中你再调用SmoothScale可以基于当前值重新开始不会产生抖动。而且用SmoothStep函数让缩放先快后慢手感比匀速好很多。如果缩放过程中还要拖拽移动图片记得在协程里不要锁定坐标否则拖拽体验会很生硬。3. Texture级别的图片缩放从像素层面对抗模糊如果你的目标是“放大图片后依然清晰”或者“把缩放后的图片保存成文件”那UI缩放是行不通的。UI缩放只是拉伸显示原始像素数不变放大到2倍以上必然模糊。真正的解决方案是重建一张更大的Texture通过插值算法生成新像素。3.1 最近邻插值像素风格的放大利器最简单的纹理放大算法是最近邻。缩放后的每个像素点直接取原图中距离最近的那个像素的颜色。好处是计算量小适合像素风游戏放大后边缘还是清晰的方块状坏处是普通照片放大会出现明显的锯齿和马赛克。核心思路是先计算缩放比例然后从目标像素坐标反推回原图坐标四舍五入取最近的像素。代码如下public static Texture2D ScaleTextureNearest(Texture2D source, int targetWidth, int targetHeight) { var result new Texture2D(targetWidth, targetHeight, source.format, false); float ratioX (float)source.width / targetWidth; float ratioY (float)source.height / targetHeight; for (int y 0; y targetHeight; y) { for (int x 0; x targetWidth; x) { int srcX Mathf.Clamp(Mathf.RoundToInt(x * ratioX), 0, source.width - 1); int srcY Mathf.Clamp(Mathf.RoundToInt(y * ratioY), 0, source.height - 1); result.SetPixel(x, y, source.GetPixel(srcX, srcY)); } } result.Apply(); return result; }这里要特别提醒目标尺寸必须指定具体的像素宽高而不是“放大2倍”这个倍数概念。因为Texture是像素矩阵没有“scale”属性只有宽高。所以调用时你先算出目标尺寸int newWidth source.width * 2; int newHeight source.height * 2; var bigTexture ScaleTextureNearest(source, newWidth, newHeight);另外Texture2D构造函数里的第二个参数是mipChain如果该纹理之后要在3D模型上使用且需要mipmap就不要设false。但如果你只是把它显示在UI的RawImage上false就够了还能省内存。3.2 双线性插值照片平滑放大的默认选择双线性插值是目前最通用的方案。它不是直接取一个最近像素而是取目标坐标映射到原图中的浮点位置然后找到它周围四个像素按距离加权混合。效果是放大后边缘相对平滑不会像最近邻那样出现马赛克。实现时为了提高性能不要用GetPixel和SetPixel它们太慢了。正确做法是用GetPixels()一次性把原图像素数组取出来再通过SetPixels()写回结果。先看代码public static Texture2D ScaleTextureBilinear(Texture2D source, int targetWidth, int targetHeight) { var result new Texture2D(targetWidth, targetHeight, source.format, false); Color[] srcPixels source.GetPixels(); Color[] dstPixels new Color[targetWidth * targetHeight]; float ratioX (float)(source.width - 1) / (targetWidth - 1); float ratioY (float)(source.height - 1) / (targetHeight - 1); for (int y 0; y targetHeight; y) { float srcY y * ratioY; int y0 Mathf.FloorToInt(srcY); int y1 Mathf.Min(y0 1, source.height - 1); float fy srcY - y0; for (int x 0; x targetWidth; x) { float srcX x * ratioX; int x0 Mathf.FloorToInt(srcX); int x1 Mathf.Min(x0 1, source.width - 1); float fx srcX - x0; Color c00 srcPixels[y0 * source.width x0]; Color c10 srcPixels[y0 * source.width x1]; Color c01 srcPixels[y1 * source.width x0]; Color c11 srcPixels[y1 * source.width x1]; Color top Color.Lerp(c00, c10, fx); Color bottom Color.Lerp(c01, c11, fx); Color final Color.Lerp(top, bottom, fy); dstPixels[y * targetWidth x] final; } } result.SetPixels(dstPixels); result.Apply(); return result; }这里有个容易被忽略的细节ratio的计算用了(source.width - 1)除以(targetWidth - 1)而不是直接用source.width / targetWidth。为什么要减1因为坐标从0开始最后一个像素的索引是width-1。如果不减1当目标坐标到达最右边缘时srcX会大于source.width-1虽然Clamp能兜住但会导致边缘像素被重复取第一行或最后一行的值产生拉伸变形。我最开始在项目里吃过这个亏放大后的图片最右边和最下边总是有半像素的色差。实际使用中双线性插值对普通照片的放大效果已经够用但如果缩放到原图的4倍以上还是会有轻微的柔化感。想要更锐利的放大效果可以考虑 Lanczos 或 Bicubic 算法但计算量成倍增加对实时交互来说不划算。我的建议是做UI查看器用双线性做像素风格用最近邻做离线图片处理才考虑更高阶算法。3.3 用SpriteRenderer显示缩放后的纹理当你通过算法拿到了新的Texture2D后下一步是怎么把它显示出来。如果你用的是UGUI直接赋值给RawImage的texture属性即可。如果用SpriteRenderer则需要先创建SpriteSprite newSprite Sprite.Create(bigTexture, new Rect(0, 0, bigTexture.width, bigTexture.height), new Vector2(0.5f, 0.5f)); spriteRenderer.sprite newSprite;注意Sprite.Create的第二个参数Rect必须和纹理尺寸一致第三个参数是枢点坐标0.5f表示中心。如果你的图片需要和原始图片保持同样的世界尺寸记得同时调整spriteRenderer的transform.scale因为纹理像素变大了sprite的世界尺寸也会跟着变大。公式很简单新的缩放倍数 原始图片世界宽度 / (原纹理宽度 * 2)。这个细节在UI中不需要考虑但在3D场景中很容易造成显示大小突然变化。4. 交互式缩放鼠标滚轮和双指手势的实战方案4.1 鼠标滚轮缩放一张Texture图片很多图片查看器的需求是鼠标滚轮向上滚图片变大向下滚变小。这里又分两种路径如果只做UI界面的图片查看继续用RectTransform.localScale没问题但如果你需要放大后能看到更多细节那就得在滚轮事件中实时重建Texture。先说简单路径。给查看器挂一个继承MonoBehaviour的脚本在Update里检测滚轮输入void Update() { float scroll Input.mouseScrollDelta.y; if (Mathf.Abs(scroll) 0.001f) { float newScale currentScale scroll * zoomSpeed; newScale Mathf.Clamp(newScale, minScale, maxScale); currentScale newScale; imageRect.localScale Vector3.one * currentScale; } }这段代码看起来简单但实际用的时候有两个问题要处理第一缩放基准点。默认情况下localScale是围绕锚点缩放的但鼠标在图片上的位置通常不是中心。用户会觉得“我鼠标指哪儿哪儿就应该放大”。要做到这点得先把鼠标屏幕坐标转成图片局部坐标然后调整图片的锚点位置。以一个Pivot在中心的图片为例你可以把锚点临时设置成鼠标在图片内的归一化坐标但这会影响布局。更稳的做法是同时调整图片的位置让鼠标下的点保持不动。具体思路是鼠标在图片上的局部坐标是localPoint RectTransformUtility.ScreenPointToLocalPointInRectangle(imageRect, Input.mousePosition, canvasCamera, out localPoint)。缩放前记下这个局部坐标缩放后再把局部坐标对应的世界点与缩放前的世界点对齐。实现比较复杂我建议直接使用现成的ScriptableObject工具或者开源组件。不过如果只是做个人工具不考虑极致体验中心缩放也能接受。第二滚轮缩放的速度应该跟当前比例挂钩。当图片已经很小时每次滚轮滚动的增量小一点当图片很大时增量大一点。也就是增量乘以一个Mathf.Log10(currentScale)或者直接乘以currentScale的平方根。否则小图滚半天才动一点大图滚一下就飞出屏幕。如果走Texture重建路径那滚轮事件就不能在Update里每帧重建了性能扛不住。正确做法是等滚轮事件停止后的一段时间比如0.2秒再重建或者用协程加个延迟private Coroutine rebuildCoroutine; void Update() { float scroll Input.mouseScrollDelta.y; if (Mathf.Abs(scroll) 0.001f) { targetScale Mathf.Clamp(targetScale scroll * zoomSpeed, minScale, maxScale); if (rebuildCoroutine ! null) StopCoroutine(rebuildCoroutine); rebuildCoroutine StartCoroutine(DelayedRebuild()); } } IEnumerator DelayedRebuild() { yield return new WaitForSeconds(0.15f); // 根据targetScale计算目标尺寸调用ScaleTextureBilinear }这样既不会频繁重建Texture又能保证最终放大后的细节是清晰的。缺点是延迟期间画面会有一个“虚化—清晰”的过程需要加一个loading遮罩或者接受这种视觉变化。4.2 移动端双指捏合缩放移动端没有滚轮最常见的是双指手势。Unity的Input.touchCount可以检测触摸数量当两根手指都触摸屏幕时计算两指之间的距离距离变化代表缩放操作。核心代码如下private float lastTouchDistance; private float currentScale 1f; void Update() { if (Input.touchCount 2) { Touch touch0 Input.GetTouch(0); Touch touch1 Input.GetTouch(1); float currentDistance Vector2.Distance(touch0.position, touch1.position); float delta currentDistance - lastTouchDistance; lastTouchDistance currentDistance; float newScale currentScale delta * scaleSensitivity; currentScale Mathf.Clamp(newScale, minScale, maxScale); imageRect.localScale Vector3.one * currentScale; } else if (Input.touchCount 2) { lastTouchDistance 0f; } }这段代码只处理了缩放没有处理双指旋转和拖拽。如果查看器只需要缩放够用。但如果你要做一个完整的图片浏览组件我强烈建议直接用Unity的EventSystems和IPointerHandler接口把逻辑拆成不同的手势状态机。否则在双指操作时单指拖拽逻辑可能会冲突出现图片跳动的现象。具体坑点当手指从一指挥到两指时lastTouchDistance可能是0第一帧的delta会特别大图片会突然跳一下。所以要加一个判断如果lastTouchDistance 0就把它初始化成当前距离不做缩放。另外两指操作时两只手指的Touch ID可能会变化千万不要用固定索引0和1去跟踪手指一定要用Input.GetTouch(0)和Input.GetTouch(1)当前帧的position而不是缓存上一次的fingerId。5. 常见问题与排查技巧实录5.1 放大后图片模糊得不能忍这个问题几乎人人都会遇到。如果你用的是UI的localScale放大到2倍以上图片就开始糊那是因为原始像素不够UGUI的Image默认使用双线性过滤在大缩放倍数下会拉伸插值。解决方案有三种第一把Sprite的Filter Mode改成Point让放大后变成像素块风格适合像素游戏不适合照片。第二使用高分辨率源图。如果你知道图片最大会被放大到5倍那原始纹理的宽高就应该预留5倍的空间。很多人在资源导入时勾选了Generate Mip Maps但在UI近距离观察时mipmap反而会导致模糊。检查一下Image组件的Use Sprite Mesh选项有时关闭它也能改善边缘清晰度。第三就是前面讲的Texture重建。对本地大图在放大时用双线性插值重建一次像素再赋值给RawImage清晰度会好很多。但没有免费的午餐重建耗时是有的小图几百毫秒大图可能几秒。我在一个模拟项目中试过4096x4096的图片放大2倍重建耗时接近2秒帧率掉到个位数。于是加了后台线程处理但Unity的主线程不能访问其它线程创建的Texture最后用System.Threading配合Texture2D.Apply()的异步加载才算勉强解决。这里不展开讲只能说如果你遇到卡顿优先考虑缩小目标尺寸而不是无限增大。5.2 图片缩放后位置乱跑总感觉中心点偏了这个问题的根源是锚点Pivot设置不正确。Image组件的Pivot决定缩放时的固定点。如果你把Pivot设置在左上角0,0那缩放时左下角固定图片向右下方向扩展。如果Pivot在中心0.5,0.5缩放以中心为基准。但很多时候因为布局需求Pivot可能被调成了别的值导致缩放效果跟想象中不一样。解决思路有两个要么统一把Pivot设为(0.5,0.5)要么在缩放的代码中动态修正位置。动态修正的公式是缩放前后Pivot所在的世界坐标应该保持一致。具体实现可以用RectTransformUtility把Pivot的屏幕坐标转出来然后缩放后再把位置改回去。这里给一个简化的修正方法只处理UI平面public static void ScaleAroundPivot(RectTransform rt, float targetScale, Vector2 pivot) { Vector2 oldPivot rt.pivot; Vector2 deltaPivot pivot - oldPivot; Vector2 size rt.rect.size; Vector2 deltaPosition new Vector2(deltaPivot.x * size.x, deltaPivot.y * size.y); rt.pivot pivot; rt.localScale Vector3.one * targetScale; rt.anchoredPosition deltaPosition * (targetScale - 1f); }这段代码先记录原来的pivot计算新旧pivot的位置差然后改pivot、改scale最后修正anchoredPosition。实测下来鼠标指哪儿就放大哪儿的手感会好很多。5.3 缩放过快导致图片飞出屏幕或消失当你把图片缩得很小或者锚点不在中心且图片本身超出父节点Rect时图片可能会跑到可视区域之外甚至因为scale为负数导致图片翻转。要防止这些情况最直接的办法是设置合理的minScale和maxScale并始终用Clamp限制。另外如果使用Canvas还要注意Canvas的缩放模式。在Screen Space - Overlay模式下Canvas的localScale是1但如果你动态改变了Canvas的渲染分辨率图片的缩放表现会不一样。我建议把缩放组件的minScale设成0.2maxScale设成10然后在缩放后检查图片的包围盒是否在父节点范围内。如果不在可以做边界校正把图片拉回来。很多图片查看器都带一个“双击复位”功能就是直接把scale设为1、位置设为原点这个救急操作非常有价值我对所有查看器都建议加上。5.4 新建Texture时报错“not readable”Unity里很多图片默认在导入时没有勾选Read/Write Enabled导致运行时无法用GetPixels()读取像素。解决方法是在图片资源的Import Settings中勾选Read/Write Enabled或者用Texture2D.Create从字节流重新创建一张可读纹理。但要注意勾选Read/Write Enabled会增加一倍的内存占用因为Unity会保留一份CPU可访问的副本和高性能GPU副本。对于运行时要缩放大图的项目我通常建议只在需要处理前勾选处理完后再动态创建新纹理原图可以保持不勾选状态。另外如果原始图片来自于Resources.Load它默认是只读纹理你需要先复制一张Texture2D readableTexture new Texture2D(src.width, src.height, src.format, false); Graphics.CopyTexture(src, readableTexture);这样readableTexture就是可读的了。注意这里用的是Graphics.CopyTexture比GetPixels再SetPixels效率高很多只是要求源和目标格式一致。6. 最后分享一个我踩过最多坑的细节缩放与性能很多人觉得缩放图片是一个轻量级操作但实际上如果你在Update里每帧修改localScale或者Texture对CPU和GPU的压力都不小。UI缩放会触发Canvas重建频繁修改localScale会导致Canvas缓存失效带来不必要的Batches。特别是当你缩放的是整张背景图而背景图又带阴影、描边等效果时一次缩放可能让帧率掉10帧。我常用的优化手段是把需要缩放的图片放到一个独立的Canvas下并给这个Canvas挂上CanvasScaler的“恒定像素尺寸”模式。这样缩放这个Canvas下的元素时不会影响其它UI的重建。另外在缩放的动画过程中可以主动降低Canvas的Graphic Raycaster事件的响应频率或者干脆在动画期间禁用交互防止用户在图片飞动时点击产生误操作。还有一点是关于纹理重建的性能。以一张1920x1080的图片放大到3840x2160为例双线性插值需要计算约830万个像素每像素做16次浮点运算整体耗时在百毫秒到秒级。如果你想做得更丝滑推荐用Compute Shader来做放大把繁琐的循环交给GPU。Unity的ComputeShader很适合这种逐像素操作虽然写起来麻烦但性能提升是碾压级的。我的一个模拟项目中用Compute Shader处理4096x4096纹理放大2倍耗时从1.8秒降到了0.06秒帧率几乎无损。如果你打算做专业图片查看器这个优化路径值得研究。我个人的习惯是先实现功能不要一上来就上Compute Shader把逻辑跑通了、确认方案可行了再根据profiler的数据决定要不要优化。很多时候制作美术资源时锁定原始尺寸和缩放倍数上限比任何算法优化都管用——一张1024的图片无论你想怎么放大它最终能呈现的细节都不会超过1024算法只能让过渡更平滑不能无中生有。希望这篇经验能帮你少走一些弯路。如果只是做简单UI缩放两步就能搞定如果要精细到像素级那就要沉下心来处理纹理重建和渲染优化。每个人遇到的坑不一样但方向选对了后面的路就好走多了。
