I have made a draw panel. I want to add text to my panel background, but I've failed. I don't know why.
Here is my code:
public PaintView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setColor(DEFAULT_COLOR);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setXfermode(null);
mPaint.setAlpha(0xff);
mEmboss = new EmbossMaskFilter(new float[] {1, 1, 1}, 0.4f, 6, 3.5f);
mBlur = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);
}
public void init(DisplayMetrics metrics) {
int height = metrics.heightPixels;
int width = metrics.widthPixels;
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
currentColor = DEFAULT_COLOR;
strokeWidth = BRUSH_SIZE;
Paint p = new Paint();
p.setTextSize(50);
p.setTextAlign(Paint.Align.CENTER);
p.setColor(Color.BLACK);
mCanvas.drawText("HI", getLeft()+10, getTop()+30, p);
}
protected void onDraw(Canvas canvas) {
canvas.save();
mCanvas.drawColor(backgroundColor);
for (FingerPath fp : paths) {
mPaint.setColor(fp.color);
mPaint.setStrokeWidth(fp.strokeWidth);
mPaint.setMaskFilter(null);
if (fp.emboss)
mPaint.setMaskFilter(mEmboss);
else if (fp.blur)
mPaint.setMaskFilter(mBlur);
mCanvas.drawPath(fp.path, mPaint);
}
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.restore();
}
I set "HI" drawText, but it does not show.
Thanks in advance.
this is my code
https://github.com/cool3690/bsic
and I hope I can do like this
enter image description here
Related
How to create a layout like shown in image?
I think you can use android:rotation="-45" to put over the image a crossed component and make this effect.
Use this code :
1. Create TriangleImageView.java class in Java folder :
public class TriangleImageView extends ImageView {
public TriangleImageView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
Point point1_draw = new Point(75, 0);
Point point2_draw = new Point(0, 180);
Point point3_draw = new Point(180, 180);
Path path = new Path();
path.moveTo(point1_draw.x, point1_draw.y);
path.lineTo(point2_draw.x, point2_draw.y);
path.lineTo(point3_draw.x, point3_draw.y);
path.lineTo(point1_draw.x, point1_draw.y);
path.close();
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
In Acitivity Use this code :
private imageViewTriangle;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageViewTriangle=(ImageView)findViewById(R.id.imageView_triangle);
Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.images);
imageViewTriangle.setImageBitmap(icon);
}
Output is :
Modify it as your need.
Note : ImageView is define in comment because it give me trouble to improve formatting ..
As stated above you can restructure the custom image class as the code below
public class ProfileImageView extends AppCompatImageView{
public ProfileImageView(Context context) {
super(context);
}
public ProfileImageView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
public ProfileImageView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w,this.getLayoutParams().width,this.getLayoutParams().height);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius, int dimension_w, int dimension_h) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
Log.e("Profile",""+dimension_w);
Point point1_draw = new Point(0, 0);
Point point2_draw = new Point(dimension_w, 0);
Point point3_draw = new Point(dimension_w, (dimension_h/2));
Point point4_draw = new Point(0, dimension_h);
Path path = new Path();
path.moveTo(point1_draw.x, point1_draw.y);
path.lineTo(point2_draw.x, point2_draw.y);
path.lineTo(point3_draw.x, point3_draw.y);
path.lineTo(point4_draw.x, point4_draw.y);
path.lineTo(point1_draw.x, point1_draw.y);
path.close();
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
Sample screen shot
I draw with the code below a algorithm. But how can I make it scrollable (vertical and horizontal)?
The Problem is, that in portrait mode the drawing goes outside the display, but when I make it smaller the user cant read the text anymore.
public class legende extends View {
private Paint paint;
private RectF einstiegRectF;
private RectF massnahmenRectF;
Path arrowPath;
public legende(Context context) {
super(context);
init();
}
public void init(){
paint = new Paint();
einstiegRectF = new RectF(20, 20, 820, 220);
arrowPath = new Path();
massnahmenRectF = new RectF(20, 320, 820, 420);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
paint.setColor(Color.parseColor("#ccd2ec"));
paint.setStyle(Paint.Style.FILL);
canvas.drawOval(einstiegRectF, paint);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
canvas.drawOval(einstiegRectF, paint);
paint.setTextSize(35);
canvas.drawText("Einstiegsbedingungen / Fortsetzung von ...", 100, 130, paint);
paint.setStrokeWidth(8);
canvas.drawLine(420, 220, 420, 300, paint);
arrowPath.moveTo(420, 300);
arrowPath.lineTo(430, 300);
arrowPath.lineTo(420, 310);
arrowPath.lineTo(410, 300);
arrowPath.close();
canvas.drawPath(arrowPath, paint);
paint.setStrokeWidth(4);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRect(massnahmenRectF, paint);
paint.setStrokeWidth(0);
canvas.drawText("Maßnahme", 350, 382, paint);
paint.setStrokeWidth(4);
Path rectArrow = new Path();
rectArrow.moveTo(840, 370);
rectArrow.lineTo(940, 320);
rectArrow.lineTo(1240, 320);
rectArrow.lineTo(1240, 420);
rectArrow.lineTo(940, 420);
rectArrow.close();
canvas.drawPath(rectArrow, paint);
}
}
I'm trying to draw two circles like this:
This is how I'm trying to do it:
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
Canvas c = new Canvas(bmp);
RectF rect = new RectF(0,0,width,width);
Paint paint = new Paint();
drawCircles(paint, c, width, height, width);
ImageView img = (ImageView) findViewById(R.id.imageView1);
img.setImageBitmap(bmp);
img.setScaleType(ScaleType.FIT_CENTER);
And here is my drawCircles() method:
private void drawCircles(Paint paint, Canvas c, int width, int height, int radius) {
paint.setARGB(255, 255 , 10, 21);
paint.setStrokeWidth(10);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.BUTT);
paint.setStyle(Paint.Style.STROKE);
if(width < height && radius == 0){
radius = width/2;
height = width;
} else if (radius == 0){
radius = height/2;
width = height;
}
Paint paint2 = new Paint();
paint2.setARGB(255, 255 , 10, 21);
paint2.setStrokeWidth(10);
paint2.setAntiAlias(true);
paint2.setStrokeCap(Paint.Cap.BUTT);
paint2.setStyle(Paint.Style.STROKE);
c.drawCircle(width/2, height/2, radius-10, paint);
c.drawCircle(width/2, height/2, 50, paint2);
}
I don't know why but I get only one circle, the small one (the one drawn with paint2).
What can be the reason?
Try this code.Hope it may helps :)
public class SimpleCircleActivity extends Activity
{
private CircleDemoView circledemoView ;
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
circledemoView =new CircleDemoView(this);
setContentView(circledemoView);
}
private class CircleDemoView extends View
{
public CircleDemoView(Context context)
{
super(context);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Paint p = new Paint();
p.setColor(Color.RED);
DashPathEffect dashPath = new DashPathEffect(new float[]{5,5}, (float)1.0);
p.setPathEffect(dashPath);
p.setStyle(Style.STROKE);
for (int i = 0; i < 2; i ++) {
canvas.drawCircle(200, 200, 50+(i*40), p);
}
invalidate();
}
}
}
In my application I am taking the image from the gallery and the shape of that image is in square I want to set that image to an imageView then it should be oval shape. I.e in my case I need to crop that image like human face. can anybody tell me how to do that thanks in advance.
Use the following class instead of image view.
RoundedCornerImageView imageView1;
imageView1.setRadius(10);
This will make the image radius by 10 px, you can give wat value you want and make it as the shape you want. Have a try.
All the best :)
public class RoundedCornerImageView extends ImageView {
private int radius = 10;
public RoundedCornerImageView(Context context) {
super(context);
}
protected void onDraw(Canvas canvas) {
Path clipPath = new Path();
int w = this.getWidth();
int h = this.getHeight();
clipPath.addRoundRect(new RectF(0, 0, w, h), radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
public RoundedCornerImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public RoundedCornerImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setRadius(int radius){
this.radius = radius;
this.invalidate();
}
}
You can use this
public Drawable getRoundedCornerImage(Drawable bitmapDrawable) {
Bitmap bitmap = ((BitmapDrawable)bitmapDrawable).getBitmap();
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 100;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
Drawable image = new BitmapDrawable(output);
return image;
}
Hope this helps you
Also you can use this or Download demo code example
public class Shape {
private Bitmap bmp;
private ImageView img;
public Shape(Bitmap bmp, ImageView img) {
this.bmp=bmp;
this.img=img;
onDraw();
}
private void onDraw(){
Canvas canvas=new Canvas();
if (bmp.getWidth() == 0 || bmp.getHeight() == 0) {
return;
}
int w = bmp.getWidth(), h = bmp.getHeight();
Bitmap roundBitmap = getOvalCroppedBitmap(bmp, w);
img.setImageBitmap(roundBitmap);
}
public static Bitmap getOvalCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
RectF oval = new RectF(0, 0, 130, 150);
canvas.drawOval(oval, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, oval, paint);
return output;
}
Finally, on your main activity, instantiate your class Shape and pass two parameters to your class. The image to be cropped to oval and the imageview where your final image will be set.
Download demo code example
I am trying to use masks.
I want to use one image to expose part of an underlying image.
E.g. I have an arrow which exposes part of an underlying (red) square.
My problem is that although the mask works, anything which is not exposed is rendered as a black rectangle, whereas I want a transparent background. My arrow image has a transparent canvas.
My code is:
private class MaskAttempt extends View {
private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mItemToBeMasked;
private Bitmap mMask;
public MaskAttempt(Context context) {
super(context);
this.setBackgroundColor(Color.WHITE);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
final Resources res = context.getResources();
mItemToBeMasked = BitmapFactory.decodeResource(res, R.drawable.red_rectangle);
mMask = BitmapFactory.decodeResource(res, R.drawable.icon_mask);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate((getWidth() - mItemToBeMasked.getWidth()) >> 1, (getHeight() - mItemToBeMasked.getHeight()) >> 1);
canvas.drawBitmap(mItemToBeMasked, 0, 0, null);
canvas.drawBitmap(mMask, 0, 0, mPaint);
canvas.restore();
}
You can see what I mean by looking at http://www.steveharris100.pwp.blueyonder.co.uk/
You need to add one more Bitmap in MaskAttempt.
public MaskAttempt(Context context) {
super(context);
this.setBackgroundColor(Color.WHITE);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
final Resources res = context.getResources();
mItemToBeMasked = BitmapFactory.decodeResource(res, R.drawable.red_rectangle);
mMask = BitmapFactory.decodeResource(res, R.drawable.icon_mask);
duplicate = BitmapFactory.decodeResource(res, R.drawable.icon_mask).copy(Config.ARGB_8888, true);
c = new Canvas(duplicate);
x = new Paint(Paint.ANTI_ALIAS_FLAG);
x.setColor(Color.BLACK);
x.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate((getWidth() - mItemToBeMasked.getWidth()) >> 1, (getHeight() - mItemToBeMasked.getHeight()) >> 1);
c.drawBitmap(mItemToBeMasked, 0, 0, null);
c.drawBitmap(mMask, 0, 0, mPaint);
canvas.drawBitmap(duplicate, 0, 0, null);
canvas.restore();
}