آموزش Canvas در برنامه نویسی اندروید

سلام دوستان امیدوارم حالتات خوب باشد در این سری از آموزش برنامه نویسی اندروید به آموزش Canvas در برنامه نویسی اندروید می پردازیم کلاس Canvas بسیار گستردگی دارد و شاید نشود حتی در 10 پست آن را به صورت کامل بیان کرد اما یک توضیح کلی از آن را خواهیم داشت تا بتوانید با آن Shape ها یا حتی View های مختلف رسم کنید در ادامه با ما همراه باشید.
در زیر یک کلاس به نام Myview درست کنید و کد های زیر را در آن قرار دهید.

 public class MyView extends View
     {
         Paint paint = null;
         public MyView(Context context)
         {
              super(context);
              paint = new Paint();
         }
         @Override
         protected void onDraw(Canvas canvas)
         {
            super.onDraw(canvas);
            int x = getWidth();
            int y = getHeight();
            int radius;
            radius = 100;
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.WHITE);
            canvas.drawPaint(paint);
            // Use Color.parseColor to define HTML colors
            paint.setColor(Color.parseColor("#CD5C5C"));
            canvas.drawCircle(x / 2, y / 2, radius, paint);
        }
     }

public class MyView extends View

{

Paint paint = null;

public MyView(Context context)

{

super(context);

paint = new Paint();

}

@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

int x = getWidth();

int y = getHeight();

int radius;

radius = 100;

paint.setStyle(Paint.Style.FILL);

paint.setColor(Color.WHITE);

canvas.drawPaint(paint);

// Use Color.parseColor to define HTML colors

paint.setColor(Color.parseColor("#CD5C5C"));

canvas.drawCircle(x / 2, y / 2, radius, paint);

}

کد بالا یک دایره گرد برای ما میسازد. اگر بخواید آن را وسط چین کنید باید از کد زیر استفاده کنید.

canvas.translate(getWidth()/2f,getHeight()/2f);
canvas.drawCircle(0,0, radius, paint);

1 2	canvas.translate(getWidth()/2f,getHeight()/2f); canvas.drawCircle(0,0, radius, paint);

حالا به یک مثال ساده خواهیم پرداخت
ابتدا یک instance از canvas درست می کنیم مثل زیر

private Canvas mCanvas;

1	private Canvas mCanvas;

سپس باید یک instance از Paint درست کنیم.

private Paint mPaint = new Paint();

1	private Paint mPaint = new Paint();

شاید بپرسید چرا باید از Paint استفاده کنیم اگر بخوایم به صورت کلی Style دهی انجام دهیم مثلا اندازه متن رنگ متن ضخامت رو می تونیم با این object این کار را انجام دهیم.

 private Paint mPaintText = new Paint(Paint.UNDERLINE_TEXT_FLAG);

1	private Paint mPaintText = new Paint(Paint.UNDERLINE_TEXT_FLAG);

در بالا گفتیم یک متن می خوایم که زیر خط دار باشد.

private Bitmap mBitmap;

1	private Bitmap mBitmap;

ما باید از شئی bitmap استفاده کنیم تا روش شکل یا متن رو بکشیم.

private ImageView mImageView;

1	private ImageView mImageView;

حالا باید یک مربع رسم کنیم با کد زیر

private Rect mRect = new Rect();
private Rect mBounds = new Rect();

1 2	private Rect mRect = new Rect(); private Rect mBounds = new Rect();

بعد از اینکه Rect را ساختیم باید offset را تنظیم کنیم.

private static final int OFFSET = 120;
 private int mOffset = OFFSET;

1 2	private static final int OFFSET = 120; private int mOffset = OFFSET;

offset فاصله بین مربع تا لبه canvas را تنظیم می کند.
یک متغیر به نام Multiper می گیریم تا رنگ Random درست بکند.

 private static final int MULTIPLIER = 100;

1	private static final int MULTIPLIER = 100;

سه تا متغیر رنگ درست کنید مثل زیر

 private int mColorBackground;
 private int mColorRectangle;
 private int mColorAccent;

private int mColorBackground;

private int mColorRectangle;

private int mColorAccent;

رنگ ها را با استفاده از کد زیر از res می خوانیم.

mColorBackground = ResourcesCompat.getColor(getResources(),
         R.color.colorBackground, null);
 mColorRectangle = ResourcesCompat.getColor(getResources(),
         R.color.colorRectangle, null);
 mColorAccent = ResourcesCompat.getColor(getResources(),
         R.color.colorAccent, null);

mColorBackground = ResourcesCompat.getColor(getResources(),

R.color.colorBackground, null);

mColorRectangle = ResourcesCompat.getColor(getResources(),

R.color.colorRectangle, null);

mColorAccent = ResourcesCompat.getColor(getResources(),

R.color.colorAccent, null);

سپس با کد زیر رنگ را به Paint میدهیم.

 mPaint.setColor(mColorBackground);

1	mPaint.setColor(mColorBackground);

حالا با کد زیر اندازه را تنظیم می کنیم.

 mPaintText.setTextSize(70);

1	mPaintText.setTextSize(70);

حالا باید image را find کنیم.

 mImageView = (ImageView) findViewById(R.id.myimageview);

1	mImageView = (ImageView) findViewById(R.id.myimageview);

یک متود به نام drawSomething ایجاد کنید و کدهایی که در ادامه قرار میدهیم را در آن قرار دهید.

 public void drawSomething(View view) {}

1	public void drawSomething(View view) {}

حالا باید اندازه را به دست بیاریم از کد زیر استفاده می کنیم.

 int vWidth = view.getWidth();
 int vHeight = view.getHeight();
 int halfWidth = vWidth / 2;
 int halfHeight = vHeight / 2;

int vWidth = view.getWidth();

int vHeight = view.getHeight();

int halfWidth = vWidth / 2;

int halfHeight = vHeight / 2;

حالا یک bitmap درست می کنیم.

mBitmap = Bitmap.createBitmap(vWidth, vHeight, Bitmap.Config.ARGB_8888);

1	mBitmap = Bitmap.createBitmap(vWidth, vHeight, Bitmap.Config.ARGB_8888);

سپس bitmap را به imageview می دهیم.

 mImageView.setImageBitmap(mBitmap);

1	mImageView.setImageBitmap(mBitmap);

در نهایت کد زیر را قرار دهید.

mCanvas = new Canvas(mBitmap);
Fill the entire canvas with the background color.
mCanvas.drawColor(mColorBackground);
mCanvas.drawText("programchi.ir", 100, 100, mPaintText);
mOffset += OFFSET;

mCanvas = new Canvas(mBitmap);

Fill the entire canvas with the background color.

mCanvas.drawColor(mColorBackground);

mCanvas.drawText("programchi.ir", 100, 100, mPaintText);

mOffset += OFFSET;

و در آخر با استفاده از invalidate کار به به پایان می رسانیم.

view.invalidate();

1	view.invalidate();

وقتی برنامه رو اجرا کنید چیزی نمی بینید با کلیک بروی صفحه ظاهر خواهد شد !
حالا شرط زیر را در ادامه کد های قبلی قرار دهید.

if (mOffset < halfWidth && mOffset < halfHeight) {
      mPaint.setColor(mColorRectangle - MULTIPLIER*mOffset);
      mRect.set(
          mOffset, mOffset, vWidth - mOffset, vHeight - mOffset);
      mCanvas.drawRect(mRect, mPaint);
      mOffset += OFFSET;
}else {
  mPaint.setColor(mColorAccent);
  mCanvas.drawCircle(halfWidth, halfHeight, halfWidth / 3, mPaint);
  String text = getString(R.string.done);
  mPaintText.getTextBounds(text, 0, text.length(), mBounds);
  int x = halfWidth - mBounds.centerX();
  int y = halfHeight - mBounds.centerY();
  mCanvas.drawText(text, x, y, mPaintText);
}

if (mOffset < halfWidth && mOffset < halfHeight) {

mPaint.setColor(mColorRectangle - MULTIPLIER*mOffset);

mRect.set(

mOffset, mOffset, vWidth - mOffset, vHeight - mOffset);

mCanvas.drawRect(mRect, mPaint);

mOffset += OFFSET;

}else {

mPaint.setColor(mColorAccent);

mCanvas.drawCircle(halfWidth, halfHeight, halfWidth / 3, mPaint);

String text = getString(R.string.done);

mPaintText.getTextBounds(text, 0, text.length(), mBounds);

int x = halfWidth - mBounds.centerX();

int y = halfHeight - mBounds.centerY();

mCanvas.drawText(text, x, y, mPaintText);

}

کد بالا اندازه را برای تنظیم می کند (به شکلی آن را وسط چین می کند)
موفق و پیروز باشید.

مطالعه بیشتر

آموزش Canvas در برنامه نویسی اندروید

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی