如何在canvas上的现有矩形顶部添加矩形

我正在尝试在特定框的顶部添加一些红色矩形,就像预期的结果图像一样,但它们并没有出现,因为当我部署我的应用程序时,我的代码显示了当前不期望的结果 。 我的代码是在最上面的一行上创build4个矩形,最下面的一行创build4个矩形,但是我只想把它添加到2-6的顶部,但是我知道额外的代码需要被添加到框顶部的红色矩形1和7.有谁知道我在做什么错,如何解决这个问题? 所有的帮助将不胜感激。

public class RectangleTextView extends View { private final Paint mBlackPaint = new Paint(); private final Paint mRedPaint = new Paint(); private final TextPaint mTextPaint; public RectangleTextView(Context context, AttributeSet attrs) { super(context, attrs); int valueInDp = (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.parseColor("#CC3333")); mBlackPaint.setAntiAlias(false); mBlackPaint.setColor(Color.BLACK); mBlackPaint.setStrokeWidth(valueInDp); mBlackPaint.setStyle(Paint.Style.STROKE); mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); mTextPaint.setColor(Color.BLACK); mTextPaint.setTextAlign(Paint.Align.CENTER); mTextPaint.setTextSize(valueInSp); mWindowPaint = new Paint(); mWindowPaint.setColor(Color.parseColor("#CC3333")); mWindowPaint.setStrokeWidth(valueInDp); } private Paint mWindowPaint; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (getWidth() == 0) return; //initialise red rectangles int w = canvas.getWidth(); int h = canvas.getHeight(); int rectWidth = w / 5; int space = w / 15; int topRectHeight = getPaddingTop(); int bottomRectHeight = getPaddingBottom(); //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; //draw text views for (int i = 0; i < 7; i++) { canvas.drawText(Integer.toString(i + 1), (i * boxWidth + 10) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint); } //draw black lines for (int i = 1; i < 7; i++) { canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBlackPaint); } //draw red windows for (int i = 0; i < 4; i++) { mWindowPaint.setStyle(Paint.Style.STROKE);//add this int left = i * (rectWidth + space); int right = left + rectWidth; if (i == 1){ mWindowPaint.setStyle(Paint.Style.FILL); // change to this } Rect rect = new Rect(left, 0, right, topRectHeight); canvas.drawRect(rect, mWindowPaint); Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); canvas.drawRect(rect2, mWindowPaint); } } } 

预期结果 在这里输入图像说明

目前不受欢迎的结果 在这里输入图像说明

activity_main.xml中

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <com.apptacularapps.car.RectangleTextView android:layout_width="100dp" android:layout_height="45dp" android:paddingTop="10dp" android:paddingBottom="10dp" android:background="#808080" android:gravity="center"/> </RelativeLayout> 

MainActivity.java

 import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } 

Solutions Collecting From Web of "如何在canvas上的现有矩形顶部添加矩形"

问题是你在屏幕上只能创build4个矩形,而不是数字单元的大小。 这里是代码:

 public class RectangleTextView extends View { private final Paint mBlackPaint = new Paint(); private final Paint mRedPaint = new Paint(); private final TextPaint mTextPaint; public RectangleTextView(Context context, AttributeSet attrs) { super(context, attrs); int valueInDp = (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.parseColor("#CC3333")); mBlackPaint.setAntiAlias(false); mBlackPaint.setColor(Color.BLACK); mBlackPaint.setStrokeWidth(valueInDp); mBlackPaint.setStyle(Paint.Style.STROKE); mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); mTextPaint.setColor(Color.BLACK); mTextPaint.setTextAlign(Paint.Align.CENTER); mTextPaint.setTextSize(valueInSp); mWindowPaint = new Paint(); mWindowPaint.setColor(Color.parseColor("#CC3333")); mWindowPaint.setStrokeWidth(valueInDp); } private Paint mWindowPaint; Rect rect = new Rect(); Rect rect2 = new Rect(); @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (getWidth() == 0) return; //initialise red rectangles int w = canvas.getWidth(); int h = canvas.getHeight(); int rectWidth = ((w - 20) / 7) / 5; int space = ((w - 20) / 7) / 15; int topRectHeight = getPaddingTop(); int bottomRectHeight = getPaddingBottom(); //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; //draw text views for (int i = 0; i < 7; i++) { canvas.drawText(Integer.toString(i + 1), (i * boxWidth + 10) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint); } //draw black lines for (int i = 1; i < 7; i++) { canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBlackPaint); } //draw red windows for (int index = 0; index < 7; index++) { if (index == 0 || index == 6) { for (int i = 0; i < 3; i++) { mWindowPaint.setStyle(Paint.Style.STROKE);//add this int left = (i * (rectWidth + space)) + (index * boxWidth) + 13 + rectWidth/2 + space/2; int right = left + rectWidth; rect.set(left, 0, right, topRectHeight); canvas.drawRect(rect, mWindowPaint); if (index == 0 && i == 1) { mWindowPaint.setStyle(Paint.Style.FILL); // change to this } rect2.set(left, h - bottomRectHeight, right, h); canvas.drawRect(rect2, mWindowPaint); } } else { for (int i = 0; i < 4; i++) { mWindowPaint.setStyle(Paint.Style.STROKE);//add this int left = (i * (rectWidth + space)) + (index * boxWidth) + 13; int right = left + rectWidth; rect.set(left, 0, right, topRectHeight); canvas.drawRect(rect, mWindowPaint); rect2.set(left, h - bottomRectHeight, right, h); canvas.drawRect(rect2, mWindowPaint); } } } } } 

这是完全为我工作的代码。 如果您有任何问题或疑问随时发布:)

这是我如何看待他们: 在这里输入图像说明

尝试这个:

在这里输入图像说明

 public class RectangleTextView extends View { private final Paint mBlackPaint = new Paint(); private final Paint mRedPaint = new Paint(); private final TextPaint mTextPaint; public RectangleTextView(Context context, AttributeSet attrs) { super(context, attrs); int valueInDp = (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.parseColor("#CC3333")); mBlackPaint.setAntiAlias(false); mBlackPaint.setColor(Color.BLACK); mBlackPaint.setStrokeWidth(valueInDp); mBlackPaint.setStyle(Paint.Style.STROKE); mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); mTextPaint.setColor(Color.BLACK); mTextPaint.setTextAlign(Paint.Align.CENTER); mTextPaint.setTextSize(valueInSp); mWindowPaint = new Paint(); mWindowPaint.setColor(Color.parseColor("#CC3333")); mWindowPaint.setStrokeWidth(valueInDp); } private Paint mWindowPaint; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (getWidth() == 0) return; //initialise red rectangles int h = canvas.getHeight(); int topRectHeight = getPaddingTop(); int bottomRectHeight = getPaddingBottom(); //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; int redRectWidth = boxWidth / 5; int redRectSpace = redRectWidth / 3; //draw text views for (int i = 0; i < 7; i++) { canvas.drawText(Integer.toString(i + 1), (i * boxWidth + 10) + (boxWidth / 2), ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)), mTextPaint); int baseStartX = i * boxWidth; //draw red windows for (int j = 0; j < 4; j++) { mWindowPaint.setStyle(Paint.Style.STROKE);//add this int left = mSideRectWidth + baseStartX + (j * (redRectWidth + redRectSpace)); int right = left + redRectWidth; if (j == 1) { mWindowPaint.setStyle(Paint.Style.FILL); // change to this } Rect rect = new Rect(left, 0, right, topRectHeight); canvas.drawRect(rect, mWindowPaint); Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); canvas.drawRect(rect2, mWindowPaint); } } //draw black lines for (int i = 1; i < 7; i++) { int startX = mSideRectWidth + boxWidth * i; int startY = 0; int stopX = mSideRectWidth + boxWidth * i; int stopY = getHeight(); canvas.drawLine(startX, startY, stopX, stopY, mBlackPaint); } } } 

你正在绘制所有的矩形,但是看起来你想要跳过所有的“奇数”矩形 – 或者每一个第二个矩形…并且一定要把颜色改成“红色” – 就像这样:

  //draw red windows for (int i = 0; i < 4; i++) { mWindowPaint.setStyle(Paint.Style.STROKE);//add this int left = i * rectWidth; int right = left + rectWidth; if (i == 1){ mWindowPaint.setStyle(Paint.Style.FILL); // change to this } if (i % 2 == 0) { Rect rect = new Rect(left, 0, right, topRectHeight); canvas.drawRect(rect, mRedPaint); Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); canvas.drawRect(rect2, mRedPaint); } } } 

编辑:

我认为底部的“填充”矩形应该更像是:

  //draw red windows for (int i = 0; i < 4; i++) { int left = i * rectWidth; int right = left + rectWidth; mWindowPaint.setStyle(Paint.Style.STROKE);//add this if (i % 2 == 0) { Rect rect = new Rect(left, 0, right, topRectHeight); canvas.drawRect(rect, mRedPaint); if (i == 1){ mWindowPaint.setStyle(Paint.Style.FILL); // change to this } Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); canvas.drawRect(rect2, mRedPaint); } } }