如何在画布上现有的矩形上添加矩形 [英] How to add rectangles on top of existing rectangle in canvas
本文介绍了如何在画布上现有的矩形上添加矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想我现有的画布中添加一些红色矩形上的具体箱顶部酷似预期的结果图片，但因为我的code显示了它们不会出现在所有当前不需要的结果当我部署我的应用程序。我的code是要在最后一行创建4长方形顶行和4个矩形，但我只希望这是对盒2-6上部加入，但我知道额外的code需要为添加红色矩形的箱1和顶部; 7，没有人知道我在做什么错的，如何解决这一问题？所有的帮助将是AP preciated。
公共类RectangleTextView扩展视图{
私人最终涂料mBlackPaint =新的油漆（）;
私人最终涂料mRedPaint =新的油漆（）;
私人最终TextPaint mTextPaint;
公共RectangleTextView（上下文的背景下，ATTRS的AttributeSet）{
超（背景下，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（假）;
mBlackPaint.setColor（Color.BLACK）;
mBlackPaint.setStrokeWidth（valueInDp）;
mBlackPaint.setStyle（Paint.Style.STROKE）;
mTextPaint =新TextPaint（TextPaint.ANTI_ALIAS_FLAG）;
mTextPaint.setColor（Color.BLACK）;
mTextPaint.setTextAlign（Paint.Align.CENTER）;
mTextPaint.setTextSize（valueInSp）;
mWindowPaint =新的油漆（）;
mWindowPaint.setColor（Color.parseColor（＃CC3333））;
mWindowPaint.setStrokeWidth（valueInDp）;
}
私人油漆mWindowPaint;
@覆盖保护无效的OnDraw（帆布油画）{
super.onDraw（画布）;
如果（的getWidth（）== 0）
返回;
//初始化红色矩形
INT W = canvas.getWidth（）;
INT H = canvas.getHeight（）;
INT rectWidth = W / 5;
INT空间= W / 15;
诠释为prectHeight = getPaddingTop（）;
INT bottomRectHeight = getPaddingBottom（）;
//结束绘制矩形
INT mSideRectWidth = 10;
canvas.drawRect（0，0，mSideRectWidth，的getHeight（），mRedPaint）; //绘制左端矩形
canvas.drawRect（的getWidth（） - mSideRectWidth，0，的getWidth（），的getHeight（），mRedPaint）; //绘制右端矩形
//画出灰色方块
setBackgroundColor（Color.parseColor（＃808080））;
INT boxWidth =（的getWidth（） - mSideRectWidth）/ 7;
//绘制文本的意见
的for（int i = 0;我7;;我++）{
canvas.drawText（Integer.toString第（i + 1），（I * boxWidth + 10）+（boxWidth / 2），（（canvas.getHeight（）/ 2） - （（mTextPaint.descent（）+ mTextPaint.ascent（ ））/ 2）），mTextPaint）;
}
//画黑线
的for（int i = 1;我7;;我++）{
canvas.drawLine（mSideRectWidth + boxWidth * I，0，mSideRectWidth + boxWidth *我的getHeight（），mBlackPaint）;
}
//绘制红窗
的for（int i = 0;我4;;我++）{
mWindowPaint.setStyle（Paint.Style.STROKE）; //添加此
INT左= I *（rectWidth +空格）;
INT右=左+ rectWidth;
如果（ⅰ== 1）{
mWindowPaint.setStyle（Paint.Style.FILL）; //改变这一
}
矩形RECT =新的矩形（左，0，正确的，以prectHeight）;
canvas.drawRect（矩形，mWindowPaint）;
矩形RECT2 =新的矩形（左，H - bottomRectHeight，右，H）;
canvas.drawRect（RECT2，mWindowPaint）;
}
}
}
预期的结果
目前不需要的结果
activity_main.xml
＆LT; RelativeLayout的的xmlns：机器人=http://schemas.android.com/apk/res/android
的xmlns：工具=http://schemas.android.com/tools机器人：layout_width =match_parent
机器人：layout_height =match_parent机器人：以下属性来=@扪/ activity_horizontal_margin
机器人：paddingRight =@扪/ activity_horizontal_margin
机器人：paddingTop =@扪/ activity_vertical_margin
机器人：paddingBottom会=@扪/ activity_vertical_margin工具：上下文=MainActivity。＆GT;
＆LT; com.apptacularapps.car.RectangleTextView
机器人：layout_width =100dp
机器人：layout_height =45dp
机器人：paddingTop =10dp
机器人：paddingBottom会=10dp
机器人：后台=＃808080
机器人：重力=中心/＆GT;
＆LT; / RelativeLayout的＆GT;
MainActivity.java
进口android.os.Bundle;
进口android.support.v7.app.AppCompatActivity;
公共类MainActivity扩展AppCompatActivity {
@覆盖
保护无效的onCreate（包savedInstanceState）{
super.onCreate（savedInstanceState）;
的setContentView（R.layout.activity_main）;
}
}
解决方案
问题是，你在屏幕witdh尺寸创建只有4个矩形，而不是在一些单元尺寸。 这里是code：
公共类RectangleTextView扩展视图{
私人最终涂料mBlackPaint =新的油漆（）;
私人最终涂料mRedPaint =新的油漆（）;
私人最终TextPaint mTextPaint;
公共RectangleTextView（上下文的背景下，ATTRS的AttributeSet）{
超（背景下，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（假）;
mBlackPaint.setColor（Color.BLACK）;
mBlackPaint.setStrokeWidth（valueInDp）;
mBlackPaint.setStyle（Paint.Style.STROKE）;
mTextPaint =新TextPaint（TextPaint.ANTI_ALIAS_FLAG）;
mTextPaint.setColor（Color.BLACK）;
mTextPaint.setTextAlign（Paint.Align.CENTER）;
mTextPaint.setTextSize（valueInSp）;
mWindowPaint =新的油漆（）;
mWindowPaint.setColor（Color.parseColor（＃CC3333））;
mWindowPaint.setStrokeWidth（valueInDp）;
}
私人油漆mWindowPaint;
矩形RECT =新的矩形（）;
矩形RECT2 =新的矩形（）;
@覆盖保护无效的OnDraw（帆布油画）{
super.onDraw（画布）;
如果（的getWidth（）== 0）
返回;
//初始化红色矩形
INT W = canvas.getWidth（）;
INT H = canvas.getHeight（）;
INT rectWidth =（（W - 20）/ 7）/ 5;
INT空间=（（W - 20）/ 7）/ 15;
诠释为prectHeight = getPaddingTop（）;
INT bottomRectHeight = getPaddingBottom（）;
//结束绘制矩形
INT mSideRectWidth = 10;
canvas.drawRect（0，0，mSideRectWidth，的getHeight（），mRedPaint）; //绘制左端矩形
canvas.drawRect（的getWidth（） - mSideRectWidth，0，的getWidth（），的getHeight（），mRedPaint）; //绘制右端矩形
//画出灰色方块
setBackgroundColor（Color.parseColor（＃808080））;
INT boxWidth =（的getWidth（） - mSideRectWidth）/ 7;
//绘制文本的意见
的for（int i = 0;我7;;我++）{
canvas.drawText（Integer.toString第（i + 1），（I * boxWidth + 10）+（boxWidth / 2），（（canvas.getHeight（）/ 2） - （（mTextPaint.descent（）+ mTextPaint.ascent（ ））/ 2）），mTextPaint）;
}
//画黑线
的for（int i = 1;我7;;我++）{
canvas.drawLine（mSideRectWidth + boxWidth * I，0，mSideRectWidth + boxWidth *我的getHeight（），mBlackPaint）;
}
//绘制红窗
对于（INT指数= 0;指标7;;指数++）{
如果（指数== 0 ||指数== 6）{
的for（int i = 0;我3;;我++）{
mWindowPaint.setStyle（Paint.Style.STROKE）; //添加此
INT左=（I *（rectWidth +空格））+（索引* boxWidth）+ 13 + rectWidth / 2 +空格/ 2;
INT右=左+ rectWidth;
rect.set（左，0，正确的，以prectHeight）;
canvas.drawRect（矩形，mWindowPaint）;
如果（指数== 0安培;＆安培;我== 1）{
mWindowPaint.setStyle（Paint.Style.FILL）; //改变这一
}
rect2.set（左，H - bottomRectHeight，右，H）;
canvas.drawRect（RECT2，mWindowPaint）;
}
} 其他 {
的for（int i = 0;我4;;我++）{
mWindowPaint.setStyle（Paint.Style.STROKE）; //添加此
INT左=（I *（rectWidth +空格））+（索引* boxWidth）+ 13;
INT右=左+ rectWidth;
rect.set（左，0，正确的，以prectHeight）;
canvas.drawRect（矩形，mWindowPaint）;
rect2.set（左，H - bottomRectHeight，右，H）;
canvas.drawRect（RECT2，mWindowPaint）;
}
}
}
}
}
这是全code完全为我工作。如果您有任何问题或疑问，随意张贴吧：）
这是我怎么看他们： 
I'm trying to add some red rectangles within my existing canvas on top of specific boxes exactly like the expected result image but they don't appear at all as my code shows the current undesired outcome when I deploy my app. My code is to create 4 rectangles on the top row and 4 rectangles on the bottom row but I only want this to be added on top of boxes 2-6 but I know extra code needs to be added for the red rectangles on top of boxes 1 & 7. Does anyone know what I'm doing wrong and how to fix this? All help would be appreciated.
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);
}
}
}
expected result
current undesired outcome
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);
}
}
解决方案
the problem was that you created only 4 rectangles in the screen witdh size, not in the number cell size. here is the code:
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);
}
}
}
}
}
this is the full code perfectly working for me. if you have any question or doubt feel free to post it :)
this is how i see them:
这篇关于如何在画布上现有的矩形上添加矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
