记录一个文本随手指缩放的功能

火柴就是我2026-06-10 15:22

需求是如上图,边框包裹文本用户可以通过右下角拉伸边框，如何实现文本也随着缩放，并且文本持续处于被边框包裹的状态。

实现前提: 1 只兼顾水平方向边框随手指移动一起进行缩放

我的实现方案:

部分代码

js 复制代码

// 通过循环计算最合适的文本textSize
 while (true){
               //preSize 当前手势之前的边框尺寸
               //tSize 目标尺寸(preSize + 未处理的手势尺寸)
               //totalMove 当前未处理的所有手势距离
                if(tSize > preSize){
                    //每次增加1 知道找到最接近的textSize
                    nTextSize += 1;
                    nTextSize = Math.min(nTextSize,maxTxtSizePx);
                    //处理边界达到最大值
                    if(nTextSize == maxTxtSizePx){
                        totalMove = 0;
                        break;
                    }
                    
                    setTextSizeInPixel(nTextSize);
                    //重新计算在当前textSize的情况下边框的宽度
                    reComputeViewSize();
                    int nSize = isVerticalText() ? mItemH : mItemW;
                    if(nSize >= tSize){
                        //如果超出 返回到上一个尺寸
                        nTextSize -= 1;
                        setTextSizeInPixel(nTextSize);
                        pxTextSize = nTextSize;
                        reComputeViewSize();
                        nSize = isVerticalText() ? mItemH : mItemW;
                        //totalMove 记录未处理的尺寸
                        totalMove = tSize -  nSize;
                        break;
                    }
                }else {
                    nTextSize -= 1;
                    nTextSize = Math.max(minTxtSizePx,nTextSize);
                    pxTextSize = nTextSize;
                    setTextSizeInPixel(nTextSize);
                    reComputeViewSize();
                    int nSize = isVerticalText() ? mItemH : mItemW;

                    if(nTextSize == minTxtSizePx){
                        totalMove = 0;
                        break;
                    }
                    if(nSize <= tSize){
                        //如果超出 返回到上一个尺寸
                        totalMove = tSize - nSize;
                        break;
                    }
                }
            }

这里的关键点就是 totalMove，不是每次手势都做到完美的处理,只是找到最接近的textSize,然后计算剩余未处理的尺寸,当下次手势的时候（dx + 上次未处理的尺寸） = 本次需要处理的尺寸。