如何实现滑块旁显示进度文本的垂直SeekBar并解决文本旋转问题

嘿，我来帮你搞定这个困扰！你现在遇到的核心问题很明确：为了实现垂直SeekBar，你把整个画布旋转了，但绘制进度文本时，文本也跟着画布一起旋转了，导致显示方向不对。咱们只需要在绘制文本时临时恢复画布状态，再调整坐标就能解决。

核心思路 #

旋转画布绘制SeekBar后，先恢复画布到旋转前的状态，再单独计算滑块在原坐标系中的位置，最后绘制文本——这样文本就不会跟着旋转了。同时要注意旋转后滑块的坐标转换，因为此时滑块的bounds是基于旋转后的坐标系的。

修改后的完整代码 #

@Override 
protected final void onDraw(@NonNull final Canvas c) { 
    if (null == mPaint) { 
        mPaint = new Paint(); 
        mPaint.setColor(Color.BLACK); 
        mPaint.setTextSize(50); 
        mPaint.setTextAlign(Paint.Align.CENTER); // 让文本以坐标点为中心对齐，更美观
        mPaint.setAntiAlias(true); // 开启抗锯齿，文本更清晰
    } 

    // 1. 保存当前画布状态，后续绘制文本时要恢复
    c.save();

    // 2. 旋转画布，绘制垂直SeekBar
    c.rotate(ROTATION_ANGLE); 
    c.translate(-getHeight(), 0); 
    super.onDraw(c); 

    // 3. 恢复画布到旋转前的状态，这样绘制文本就不会被旋转了
    c.restore();

    // 4. 获取滑块的边界，转换坐标到原画布坐标系
    Rect thumbBounds = getThumb().getBounds();
    float textX, textY;

    // 根据你的旋转角度调整坐标转换逻辑，这里以常见的顺时针旋转270度（水平转垂直向下）为例
    if (ROTATION_ANGLE == 270) {
        // 旋转后滑块的top对应原画布的x坐标，滑块的中心x对应原画布的y坐标
        textX = thumbBounds.top + 50; // +50是给文本和滑块留间距，可调整
        textY = thumbBounds.exactCenterX();
    } 
    // 如果是顺时针旋转90度（水平转垂直向上），用下面的逻辑
    else if (ROTATION_ANGLE == 90) {
        textX = getWidth() - thumbBounds.bottom - 50;
        textY = thumbBounds.exactCenterX();
    } 
    // 其他旋转角度可根据实际情况推导坐标转换
    else {
        textX = thumbBounds.exactCenterY() + 50;
        textY = getHeight() - thumbBounds.exactCenterX();
    }

    // 5. 绘制进度文本
    c.drawText(getProgress() + "%", textX, textY, mPaint); 
}

关键细节解释 #

• c.save() 和 c.restore()：这对方法是画布状态的“快照”和“还原”，确保绘制文本时画布回到旋转前的状态，文本方向正常。
• 坐标转换：因为SeekBar被旋转，滑块的bounds是旋转后的坐标系数据，必须转换回原画布的坐标系才能让文本出现在滑块旁边。你可以通过打印thumbBounds的坐标（比如Log.d("SeekBar", "top: " + thumbBounds.top)）来观察旋转前后的坐标变化，调整转换逻辑。
• 文本对齐与间距：setTextAlign(Paint.Align.CENTER)让文本以指定坐标为中心，避免偏移；手动加减的数值（比如+50）可以调整文本和滑块的距离，让布局更美观。

新手友好提示 #

• 如果不确定旋转角度对应的坐标转换，建议用不同的进度值测试，观察文本位置，逐步调整坐标参数。
• 可以给文本设置不同的颜色、字号，或者添加阴影（mPaint.setShadowLayer(2, 1, 1, Color.GRAY)），提升视觉效果。

内容的提问来源于stack exchange，提问作者noobEinstien