如何在自定义视图中更改起始点以绘制矩形（Android）

Question

我想通过进度条来绘制类似于该图片的自定义drawrect：

但是，我的问题是如何将起始点从左上角改为中间顶部。到目前为止，这是我的自定义视图：

public class RoundProgress extends View {
Path path = new Path();
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
float length;
float[] intervals = {0, 0};

public RoundProgress(Context context) {
    super(context);
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(100);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    path.reset();
    RectF rect = new RectF(0, 0, w, h);
    float inset = paint.getStrokeWidth();
    rect.inset(inset, inset);

    path.addRoundRect(rect, 100, 100, Path.Direction.CCW);
    length = new PathMeasure(path, false).getLength();
    intervals[0] = intervals[1] = length;
    PathEffect effect = new DashPathEffect(intervals, length);
    paint.setPathEffect(effect);
}

public void setProgress(int progress) {
    PathEffect effect = new DashPathEffect(intervals, length - length * progress / 100);
    paint.setPathEffect(effect);
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawPath(path, paint);
}

有人有想法如何修改它吗？我已经尝试更改path.move(x, y)的路径，但它没有起作用。

- Muhammad Nafian Wildana

---

你有阅读DashPathEffect文档吗？ - pskink

是的，但我对相位参数的工作原理感到困惑。@pskink - Muhammad Nafian Wildana

如果您感到困惑，请尝试更改其值并查看发生了什么。 - pskink

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Muhammad Nafian Wildana

你找到任何解决方案了吗？ - Umer Khan

Answer 1

对于那些不喜欢猜测的人来说，使用addRoundedRect创建的圆角矩形没有改变起始点的方法。

可以使用自定义路径进行绘制：

fun createRoundedRectWithCustomStartPoint(viewWidth: Float, viewHeight: Float) {

        val radius = 20f
        val strokeWidthHalf = paint.strokeWidth/2
        val top = strokeWidthHalf
        val start = strokeWidthHalf

        path.apply {
            moveTo(viewWidth/2, top)
            lineTo(viewWidth - radius, top)
            arcTo(viewWidth - 2 * radius, top, viewWidth, 2 * radius, -90F, 90F, false)
            lineTo(viewWidth, radius)
            arcTo(viewWidth - 2 * radius, viewHeight - 2 * radius, viewWidth, viewHeight, 0F, 90F, false)
            lineTo(radius, viewHeight)
            arcTo(start, viewHeight - 2 * radius, 2 * radius, viewHeight, 90F, 90F, false)
            lineTo(start, radius)
            arcTo(start, top, 2 * radius, 2 * radius, 180F, 90F, false)
            lineTo(viewWidth/2, top)
        }
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        path.reset()
        createRoundedRectWithCustomStartPoint(viewWidth = w.toFloat()-paint.strokeWidth/2,viewHeight = h.toFloat()-paint.strokeWidth/2)
        length = PathMeasure(path, false).length
        intervals[1] = length
        intervals[0] = intervals[1]
        val effect: PathEffect = DashPathEffect(intervals, length)
        paint.pathEffect = effect
    }

- AndreasReiff

Answer 2

感谢 @AndreasReiff 的回答 以下是自定义的完整代码

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.DashPathEffect
import android.graphics.Paint
import android.graphics.Path
import android.graphics.PathEffect
import android.graphics.PathMeasure
import android.util.AttributeSet
import android.view.View


class RoundProgressBar @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

var path: Path = Path()
var paint = Paint(Paint.ANTI_ALIAS_FLAG)
var length = 0f
var intervals = floatArrayOf(0f, 0f)

init {
    paint.color = Color.parseColor("#B3832B")
    paint.style = Paint.Style.STROKE
    paint.strokeWidth = 10f
}

private fun createRoundedRectWithCustomStartPoint(viewWidth: Float, viewHeight: Float) {
    val radius = 20f
    val strokeWidthHalf = paint.strokeWidth / 2
    val top = strokeWidthHalf
    val start = strokeWidthHalf

    path.apply {
        moveTo(viewWidth / 2, viewHeight - top)
        lineTo(radius, viewHeight)
        arcTo(start, viewHeight - 2 * radius, 2 * radius, viewHeight, 90F, 90F, false)
        lineTo(start, radius)
        arcTo(start, top, 2 * radius, 2 * radius, 180F, 90F, false)
        lineTo(viewWidth - radius, top)
        arcTo(viewWidth - 2 * radius, top, viewWidth, 2 * radius, -90F, 90F, false)
        lineTo(viewWidth, viewHeight-2*radius)
        arcTo(
            viewWidth - 2 * radius,
            viewHeight - 2 * radius,
            viewWidth,
            viewHeight,
            0F,
            90F,
            false
        )
        lineTo(viewWidth / 2, viewHeight)

    }
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    path.reset()

    createRoundedRectWithCustomStartPoint(
        viewWidth = w.toFloat() - paint.strokeWidth / 2,
        viewHeight = h.toFloat() - paint.strokeWidth / 2
    )
    length = PathMeasure(path, false).length
    intervals[1] = length
    intervals[0] = intervals[1]
    val effect: PathEffect = DashPathEffect(intervals, length)
    paint.pathEffect = effect
}

fun setProgress(progress: Int) {
    val effect: PathEffect = DashPathEffect(intervals, length - length * progress / 100)
    paint.pathEffect = effect
    invalidate()
}

override fun onDraw(canvas: Canvas) {
    canvas.drawPath(path, paint)
}

}

- Nguyễn Kim Khánh