黑线意外出现在错误的地方

Question

我使用 canvas 创建了这张图，但在这样做之后，出于某种原因，我恼火地在最左边的红色矩形和包含数字 1 的灰色矩形之间出现了一条黑线。可能是什么摆脱那条线？

public class RectangleTextView extends View {
    private final Paint mBackPaint = new Paint();
    private final Paint mRedPaint = new Paint();

    private TextPaint mTextPaint;

    public RectangleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        int valueInPx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics());
        int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());

        mRedPaint.setColor(Color.RED);

        mBackPaint.setAntiAlias(false);
        mBackPaint.setColor(Color.BLACK);
        mBackPaint.setStrokeWidth(valueInPx);
        mBackPaint.setStyle(Paint.Style.STROKE);

        mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(valueInSp);

        String pageTitle = getResources().getString(R.string.app_name);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getWidth() == 0)
            return;

        //draw end rectangles
        int mSideRectWidth = 10;
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle

        //draw grey boxes
        setBackgroundColor(Color.parseColor("#808080"));
        int boxWidth = (getWidth() - mSideRectWidth) / 7;


        for (int i = 0; i < 7; i++) {
            //draw black lines
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

            //draw text views
            canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
        }
    }
}

Answer 1

您不需要“第 1 条”黑线，因此跳过“0”索引。如下所示：

    for (int i = 1; i < 7; i++) {
        //draw black lines
        canvas.drawLine(mSideRectWidth + boxWidth * i, 0, (mSideRectWidth/2) + boxWidth * i, getHeight(), mBackPaint);
    }

    for (int i = 0; i < 7; i++) {
        //draw text views
        canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
    }

这应该有所帮助。

编辑：另外，你没有考虑左边的红线，所以你不会 "centered" （因为每边都有一条线，你只需要将它减少 1/ 2):

    for (int i = 1; i < 7; i++) {
        //draw black lines
        canvas.drawLine((mSideRectWidth/2) + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
    }

    for (int i = 0; i < 7; i++) {
        //draw text views
        canvas.drawText(Integer.toString(i + 1), (mSideRectWidth / 2) + (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
    }

Answer 2

for (int i = 0; i < 7; i++) {
    //draw black lines
    canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
...
}

您调用 drawLine 7 次，i = 0.1.2..6。而是这样做。

for (int i = 0; i < 7; i++) {
    //draw black lines
    if (i != 0) { // guards against the first line from ever being renderd
        canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
    }
...
}

并且您将摆脱那条线，因为您不希望绘制第一条线，而是希望它充当分隔符。

还有许多其他选项，例如配对和链接它们。你可以防范最后一个，然后划清界限。这是我想到的最简单的解决方案。

Answer 3

for (int i = 0; i < 7; i++) {
        //draw black lines
        canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

你的循环绘制了 7 条黑线，我认为你只需要 6 条线，只需移除最左边的第一条线即可。

试试这个：

for (int i = 0; i < 7; i++) {
        //draw black lines
        if(i>0)
        canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);

        //draw text views
        canvas.drawText(Integer.toString(i + 1), (i * boxWidth) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint);
    }

黑线意外出现在错误的地方

Black line unexpectedly appearing in wrong place

java

android

android-canvas

android-drawable