How to make my canvas scrollable - android

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);
}
}

Related

android draw panel set draw text

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

Circle animation in different directions with Canvas and TimerTask

How to make that circles rotate in different directions?I have to make a Solar system animation.In the center is Sun and the planet rotate around sun with different direction and speed.Problem is that all circles are turning in clockwise directions and the degrees in rotate() method is negative for blue and gray circle...Thanks in advance
public class MainActivity extends AppCompatActivity {
ImageView imageView;
Timer timer;
Canvas canvas;
Paint paint, paint1, paint2, paint3, paint4;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Bitmap bitmap = Bitmap.createBitmap(1000, 1500, Bitmap.Config.ARGB_8888);
bitmap.eraseColor(Color.parseColor("#EBEBEB"));
canvas = new Canvas();
canvas.setBitmap(bitmap);
paint = new Paint();
paint1 = new Paint();
paint2 = new Paint();
paint3 = new Paint();
paint4 = new Paint();
paint.setColor(Color.YELLOW);
paint1.setColor(Color.RED);
paint2.setColor(Color.BLUE);
paint3.setColor(Color.GREEN);
paint4.setColor(Color.GRAY);
canvas.drawCircle(500f, 750f, 130, paint);
canvas.drawCircle(400f, 560f, 51, paint1);
canvas.drawCircle(750f, 920f, 48, paint2);
canvas.drawCircle(300f, 1100f, 45, paint3);
canvas.drawCircle(320f, 300f, 42, paint4);
imageView = findViewById(R.id.imageView);
imageView.setImageBitmap(bitmap);
timer = new Timer();
timer.schedule(new TimerTask() {
#Override
public void run() {
runOnUiThread(
new Runnable() {
#Override
public void run() {
animationFrame();
}
}
);
}
}, 3000, 80);
}
private void animationFrame() {
canvas.drawColor(Color.parseColor("#EBEBEB"));
paint.setColor(Color.YELLOW);
canvas.drawCircle(500f, 750f, 130f, paint);
if (paint1 != null | paint3 != null) {
paint1.setColor(Color.RED);
canvas.drawCircle(400f, 560f, 51f, paint1);
canvas.rotate(10f, 500f, 750f);
paint3.setColor(Color.GREEN);
canvas.drawCircle(350f, 1050f, 45, paint3);
canvas.rotate(30f, 500f, 750f);
}
if (paint2 != null | paint4 != null) {
paint2.setColor(Color.BLUE);
canvas.drawCircle(720f, 950f, 48, paint2);
canvas.rotate(-10f, 500f, 750f);
paint4.setColor(Color.GRAY);
canvas.drawCircle(290f, 330f, 42, paint4);
canvas.rotate(-25f, 500f, 750f);
}
imageView.invalidate();
}

Draw and fill custom shape

I'm trying to create a custom shape using the Path object in Android and I'm running into a weird problem.
What I'm trying to achieve is depicted in the picture below
Here is the code I'm using to draw and fill the shape:
public class BallView extends RelativeLayout {
....
protected void onDraw(Canvas canvas) {
...
PaintArc(canvas);
}
private void PaintArc(Canvas canvas) {
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setAntiAlias(true);
p.setStyle(Paint.Style.FILL_AND_STROKE);
p.setStrokeWidth(2);
p.setColor(Color.RED);
RectF oval = new RectF(20, 20, getWidth() - 20, getHeight() - 20);
RectF oval2 = new RectF(0, 0, getWidth(), getHeight());
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.addArc(oval, 0, 180);
path.addArc(oval2, 0, 180);
float y=20+oval.height()/2;
float x=20;
path.moveTo(x,y);
path.lineTo(x - 20, y);
x=oval.width()+20;
path.moveTo(x,y);
path.lineTo(x+20,y);
path.close();
canvas.drawPath(path, p);
}
}
The actual result that I'm getting looks like this:
The resulting shape without Filling looks like this:
Can you tell me what I'm doing wrong ?
try this:
class MyView extends View {
private Path mPath;
private Paint mPaint;
private RectF mOval;
public MyView(Context context) {
super(context);
mPath = new Path();
mPaint = new Paint();
mPaint.setColor(0xffff0000);
mOval = new RectF();
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
int dx = w / 4;
mOval.set(0, 0, w, w);
mPath.reset();
mPath.moveTo(0, w / 2f);
mPath.arcTo(mOval, 180, 180);
mPath.rLineTo(-dx, 0);
mOval.inset(dx, dx);
mPath.addArc(mOval, 0, -180);
mPath.rLineTo(-dx, 0);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(0xffffffff);
mPaint.setStyle(Style.FILL);
canvas.drawPath(mPath, mPaint);
canvas.translate(0, getWidth() / 2);
mPaint.setStyle(Style.STROKE);
canvas.drawPath(mPath, mPaint);
}
}
- I have just edited my answer
and i add below code
RectF oval3 = new RectF(10, 20, getWidth() - 10, getHeight() - 10);
/**
*Now check this code output seem like your thought
*/
private void PaintArc(Canvas canvas) {
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setAntiAlias(true);
p.setStyle(Paint.Style.STROKE);
p.setStrokeWidth(2);
p.setColor(Color.RED);
Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG);
p1.setAntiAlias(true);
p1.setStyle(Paint.Style.STROKE);
p1.setStrokeWidth(10);
p1.setColor(Color.RED);
RectF oval = new RectF(20, 20, getWidth() - 20, getHeight() - 20);
RectF oval2 = new RectF(0, 0, getWidth(), getHeight());
RectF oval3 = new RectF(10, 20, getWidth() - 10, getHeight() - 10);
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.addArc(oval, 0, 180);
path.addArc(oval2, 0, 180);
path.addArc(oval3, 0, 180);
float y = 20 + oval.height() / 2;
float x = 20;
path.moveTo(x, y);
path.lineTo(x - 20, y);
x = oval.width() + 20;
path.moveTo(x, y);
path.lineTo(x + 20, y);
path.close();
canvas.drawArc(oval3, 0, 180, false, p1);
canvas.drawPath(path, p);
}

Drawing 2 circles on a canvas

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();
}
}
}

how to convert the square shape image into oval shape

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

Categories

Resources