I have a custom View which draw some bitmaps on canvas in onDraw(). The drawing is working. Look at the code snippet:
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.save();
if(appInitialized) {
hsSide.draw(canvas);
scaleA.draw(canvas);
scaleB.draw(canvas);
}
canvas.scale(mScaleFactor, mScaleFactor, pivotX, pivotY);
canvas.restore();
}
I have implemented a ScaleGestureListener which scale the canvas when pinch zoom is applied on screen. The problem is that canvas is not scaling. if I put canvas.scale(mScaleFactor, mScaleFactor, pivotX, pivotY); before if(appInitialized) { it scales the canvas but after it the drawing i.e. hsSide.draw(canvas); is not scaling. It draws on its normal scale.
Here are draw methods:
hsDide.draw:
#Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
canvas.drawBitmap(mBitmap, canvas.getWidth()/2 - mBitmap.getWidth()/2, 0, null);
}
scaleA.draw:
#Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
canvas.drawBitmap(mBitmap, canvas.getWidth()/2 - mBitmap.getWidth()/2, canvas.getHeight()/2 - mBitmap.getHeight()/2, null);
}
scaleB.draw:
#Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
canvas.save();
mMatrix.setRotate(currentAngle, canvas.getWidth()/2, canvas.getHeight()/2);
canvas.setMatrix(mMatrix);
canvas.drawBitmap(mBitmap, canvas.getWidth()/2 - mBitmap.getWidth()/2, canvas.getHeight()/2 - mBitmap.getHeight()/2, null);
canvas.restore();
}
Any idea where I am going wrong...???
Looking at your code infact, you should scale the canvas before drawing onto it, then restore it once drawn. So move your canvas scale as follows:
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.save();
canvas.scale(mScaleFactor, mScaleFactor, pivotX, pivotY); // MOVED HERE.
if(appInitialized) {
hsSide.draw(canvas);
scaleA.draw(canvas);
scaleB.draw(canvas);
}
canvas.restore();
}
You are then basing the draw size on the canvas size. So when you scale the canvas, you are still drawing it to its entire size, then resizing back to normal size. Hence not getting any effect.
What you need do is take the canvas size BEFORE scaling, then pass this to your draw method too. Then use those sizes to draw onto canvas.
Related
I'm trying to draw 4 rectangles on the canvas so that the canvas is divided in 4 equal rectangles. With the code I now have, only the last rectangle in my code is drawn.
This is the code in my Activity:
protected void onCreate(Bundle savedInstanceState) {
...
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
setFocusableInTouchMode(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
Paint paintTopLeft = new Paint();
paintTopLeft.setStyle(Paint.Style.FILL);
paintTopLeft.setColor(Color.WHITE);
canvas.drawPaint(paintTopLeft);
// Use Color.parseColor to define HTML colors
paintTopLeft.setColor(Color.parseColor("#F44336"));
canvas.drawRect(0,0,x / 2,y / 2,paintTopLeft);
Paint paintTopRight = new Paint();
paintTopRight.setStyle(Paint.Style.FILL);
paintTopRight.setColor(Color.WHITE);
canvas.drawPaint(paintTopRight);
// Use Color.parseColor to define HTML colors
paintTopRight.setColor(Color.parseColor("#2196F3"));
canvas.drawRect(x / 2, 0, x, y / 2, paintTopRight);
}
}
What am I doing wrong?
Actually I see only two rectangles that are drawn with your code. But anyway, the problem is that you are calling canvas.drawPaint which clears/fills the complete canvas with that color. So you are erasing all rectangles that have been drawn already just before you draw the last one.
This code should work:
protected void onCreate(Bundle savedInstanceState) {
...
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
setFocusableInTouchMode(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
Paint paintTopLeft = new Paint();
paintTopLeft.setStyle(Paint.Style.FILL);
paintTopLeft.setColor(Color.WHITE);
//canvas.drawPaint(paintTopLeft); // don't do that
// Use Color.parseColor to define HTML colors
paintTopLeft.setColor(Color.parseColor("#F44336"));
canvas.drawRect(0,0,x / 2,y / 2,paintTopLeft);
Paint paintTopRight = new Paint();
paintTopRight.setStyle(Paint.Style.FILL);
paintTopRight.setColor(Color.WHITE);
// canvas.drawPaint(paintTopRight); // don't do that
// Use Color.parseColor to define HTML colors
paintTopRight.setColor(Color.parseColor("#2196F3"));
canvas.drawRect(x / 2, 0, x, y / 2, paintTopRight);
}
}
I simply need to draw a line which moves from one coordinate of a canvas to another. I am having troubles with synchronizing my drawing code with time.\
public class CustomMYChart extends View {
float x=0,y=0;
Canvas canvas;
Paint paint;
public CustomMYChart(Context context) {
super(context);
// TODO Auto-generated constructor stub
paint = new Paint();
paint.setColor(Color.GREEN);
}
#Override
protected void onDraw(final Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
this.canvas=canvas;
for(int i=0; i<1000; i++){
canvas.drawCircle(x, y, 5, paint);
x+=1;
y+=1;
invalidate();
}
}
}
Just remove the for statement in onDraw, with just one for iteration you call 1000 times invalidate() and then you get x and y out of the screen.
#Override
protected void onDraw(final Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
this.canvas=canvas;
canvas.drawCircle(x, y, 5, paint);
x+=1;
y+=1;
invalidate();
}
I have multiple rectangles in the middle of the view (canvas). I want to move them all to the edges of the screen smoothly simultaneously. This is not a jump, i need to see the between positions from start to end so it appear as a smooth transition.
Whats the best way to do that?
Try this code :
public class animatedView extends View {
Bitmap i;
int x=0;
int y=0;
public animatedView(Context context) {
super(context);
// TODO Auto-generated constructor stub
i = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Rect bk = new Rect();
bk.set(0, 0, canvas.getWidth(), canvas.getHeight());
Paint pBk = new Paint();
pBk.setStyle(Paint.Style.FILL);
pBk.setColor(Color.BLUE);
canvas.drawRect(bk, pBk);
canvas.drawBitmap(i, x, y, pBk);
x+=10;
invalidate();
}
}
Hope it helps !
I'm using this method to draw a circle in my app:
public void drawCircle(){
paint.setColor(Color.rgb(52, 73, 94));
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawCircle(100, 200, 60, paint);
}
The problem is that the circle appears kind of oval and with pixellated edges.
I used the ANTI_ALIAS_FLAG but it didn't work.
How to draw a circle with smooth edges?
EDIT
I using a framework for games. from this book: http://www.amazon.com/Beginning-Android-Games-Mario-Zechner/dp/1430246774
Try This
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawCircle(x, y, radius, paint);
}
For a better reference on drawing custom views check out the official Android documentation
Good Luck!
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
int radius;
radius = 100;
Paint paint = new Paint();
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);
}
}
This link shows how to use AlphaAnimation on a View pre API 11.
What I have to animate now works with API 11 and above.
ObjectAnimator fader = ObjectAnimator.ofInt(paint1,"alpha", 250, 00);
fader.setDuration(1000);
fader.setRepeatCount(0);
fader.setRepeatMode(ValueAnimator.RESTART);
fader.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// TODO Auto-generated method stub
invalidate();
}
});
and then in onDraw() method, I animate my bitmap as
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.save();
canvas.drawBitmap(bitmap1, x, y , paint1);
canvas.restore();
}
What API can I use to make it work with API 8 ?