I have a custom indicator view that I have created.
as you can see on the first picture everything is drawn correctly,
but sometimes when i close the app and start it again it is not drawn correctly (the second picture)
trying to figure out what could be the reason for this.
maybe some caching ?
this is my onDraw Code:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawUnselected(canvas, mUnselectedPaint);
drawSelected(canvas, mSelectedPaint);
drawDone(canvas, mDonePaint);
}
private void drawDone(Canvas canvas, Paint mDonePaint) {
for (Integer page : mDonePages) {
canvas.drawBitmap(mDoneItemBitmap, dotCenterX[page], mDotTopY, mDonePaint);
}
}
private void drawSelected(Canvas canvas, Paint mSelectedPaint) {
float dist = ((mSelectedPaint.descent() + mSelectedPaint.ascent()) / 2);
for (Integer page : mSelectedPages) {
canvas.drawBitmap(mSelectedItemBitmap, dotCenterX[page], mDotTopY, mSelectedPaint);
canvas.drawText("" + (page + 1), dotCenterX[page] + mDotRadius + dist, mDotTopY + mDotRadius - dist, mSelectedPaint);
}
}
private void drawUnselected(Canvas canvas, Paint mUnselectedPaint) {
int paddingTop = getPaddingTop();
for (int page = 0; page < mDotsNumber; page++) {
Paint test = new Paint();
test.setColor(Color.BLACK);
test.setStrokeWidth(30);
canvas.drawBitmap(mUnSelectedItemBitmap, dotCenterX[page], mDotTopY, mUnselectedPaint);
float dist = ((mNumbersPaint.descent() + mNumbersPaint.ascent()) / 2);
canvas.drawText("" + (page + 1), dotCenterX[page] + mDotRadius + dist, mDotTopY + mDotRadius - dist, mNumbersPaint);
if (page == mDotsNumber - 1) {
//last page
} else {
canvas.drawLine(dotCenterX[page] + mDotDiameter - 2, mDotRadius + paddingTop, dotCenterX[page] + mDotDiameter + mDotGap + 1, mDotRadius + paddingTop, mUnselectedPaint);
}
}
}
Related
I have a problema animating a rectangle in Zxing, I am building a qr reader with this library, and my client asked me for an animated laser. No problem for this, laser animation works fine.
But he asked me a texture over laser :/ and I can't animate this.
Sincerely, code for laser is a copy past.
#Override
public void drawLaser(Canvas canvas) {
// Draw a red "laser scanner" line through the middle to show decoding is active
mLaserPaint.setAlpha(155);
int middle = mFramingRect.height() / 2 + mFramingRect.top;
middle = middle + cntr;
if ((cntr < 300) && (!goingup)) {
canvas.drawRect(mFramingRect.left + 2,
middle - 5,
mFramingRect.right - 1,
middle + 10,
mLaserPaint);
cntr = cntr + 4;
}
if ((cntr >= 300) && (!goingup)) goingup = true;
if ((cntr > -300) && (goingup)) {
canvas.drawRect(mFramingRect.left + 4,
middle - 5,
mFramingRect.right - 1,
middle + 10,
mLaserPaint);
cntr = cntr - 4;
}
if ((cntr <= -300) && (goingup)) goingup = false;
postInvalidateDelayed(ANIMATION_DELAY,
mFramingRect.left - POINT_SIZE,
mFramingRect.top - POINT_SIZE,
mFramingRect.right + POINT_SIZE,
mFramingRect.bottom + POINT_SIZE);
}
And my code for trying animate texture over laser
public void drawTexture (Canvas canvas) {
int a = 200;
int b = 220;
int c = 400;
int d = 440;
Paint paint = new Paint();
paint.setColor(Color.RED);
c = c + 100;
d = d + 100;
canvas.drawRect(a,b,c,d,paint);
invalidate();
}
both methods are called in method onDraw
public void onDraw(Canvas canvas) {
if (this.getFramingRect() != null) {
...
this.drawLaser(canvas);
this.drawTexture(canvas);
}
}
I don't know how to animate my rectangle :(, thanks for your help.
Here is my full code
https://gist.github.com/memoadian/2266fbfe6bdf5a3345f2776bdbe7bf2c
UPDATE
Ok, the animation was like this.
public void drawTexture (Canvas canvas) {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.codi_texture);
BitmapShader fillBMPshader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
Paint paint = new Paint();
paint.setShader(fillBMPshader);
int middle = mFramingRect.height() / 2 + mFramingRect.top;
middle = middle + cntr;
if ((cntr < 300) && (!goingup)) {
canvas.drawRect(mFramingRect.left,
mFramingRect.top,
mFramingRect.right,
middle,
paint);
cntr = cntr + 4;
}
if ((cntr >= 300) && (!goingup)) goingup = true;
if ((cntr > -300) && (goingup)) {
canvas.drawRect(mFramingRect.left,
mFramingRect.top,
mFramingRect.right,
middle,
paint);
cntr = cntr - 4;
}
if ((cntr <= -300) && (goingup)) goingup = false;
}
And the result is
I'm use lottie for animation and disable laser and transparent rectangle, maybe this could be your next idea
mScannerView.setLaserColor(mContext.getResources().getColor(R.color.btn_color));
mScannerView.setLaserEnabled(false);
mScannerView.setBorderColor(mContext.getResources().getColor(android.R.color.transparent));
mScannerView.setMaskColor(mContext.getResources().getColor(android.R.color.transparent));
List<BarcodeFormat> enableFormat = new ArrayList<>();
enableFormat.add(BarcodeFormat.QR_CODE);
mScannerView.setFormats(enableFormat);
mScannerView.setAutoFocus(true);
try {
int padding = paddingInDp(100);
lottieView.setPadding(-padding, -padding, -padding, -padding);
lottieView.setAnimation("barcode_scan.json");
lottieView.setSpeed(0.5f);
lottieView.playAnimation();
lottieView.loop(true);
} catch (Exception e){
e.printStackTrace();
}
I want to create a Cloud shape in Canvas.
When the user clicks anywhere on the canvas, it will create a cloud shape,.
The user should be able to drag the shape.
I have achieved rectangle and arrow draw in canvas using below code.
But I can't succeed to draw an arc.
private void drawOnRectProjectedBitMap(ImageView iv, Bitmap bm, int x, int y) {
if (x < 0 || y < 0 || x > iv.getWidth() || y > iv.getHeight()) {
//outside ImageView
return;
} else {
int projectedX = (int) ((double) x * ((double) bm.getWidth() / (double) iv.getWidth()));
int projectedY = (int) ((double) y * ((double) bm.getHeight() / (double) iv.getHeight()));
//clear canvasDrawingPane
canvasDrawingPane.drawColor(Color.TRANSPARENT, Mode.CLEAR);
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(3);
canvasDrawingPane.drawRect(startPt.x, startPt.y, projectedX, projectedY, paint);
imageDrawingPane.invalidate();
textSource.setText(x + ":" + y + "/" + iv.getWidth() + " : " + iv.getHeight() + "\n" +
projectedX + " : " + projectedY + "/" + bm.getWidth() + " : " + bm.getHeight()
);
}
}
I don't need an answer any more!
I created an app and there should be bubbles bouncing around the screen.
Everything is working, but they're not being drawn live.
Here the code (not ALL the code, but the important code):
The Bubble Class:
public class Bubble{
private int ID;
private float coordX;
private float coordY;
private float velX;
private float velY;
private float radius;
private int color;
private boolean popped;
private boolean alive;
private boolean dead;
public Bubble(int coordX, int coordY, int velocityX, int velocityY, int ID, int color) {
this.coordX = coordX;
this.coordY = coordY;
this.velX = velocityX;
this.velY = velocityY;
this.radius = 30;
this.ID = ID;
this.color = color;
this.alive = true;
}
public void drawMe(Paint paint, Canvas canvas) {
int paintStartColor = paint.getColor();
paint.setColor(this.color);
canvas.drawCircle(this.coordX, this.coordY, radius, paint);
paint.setColor(paintStartColor);
Log.d("Bubble","drawn bubble [" + ID + "] at (" + this.coordX + "|" + this.coordY + ")");
}
public void update() {
//damit die bubble am rand anstößt und zurück prallt
if(this.coordX - this.radius <= 0) this.velX = - this.velX;
if(this.coordY - this.radius <= 0) this.velY = - this.velY;
if(this.coordX + this.radius >= MainActivity.getInstance().getScreenSize().x) this.velX = - this.velX;
if(this.coordY + this.radius >= MainActivity.getInstance().getScreenSize().y) this.velY = - this.velY;
coordX += velX;
coordY += velY;
updateRadius();
// Log.d("Bubble", "CoordX: " + coordX + ", velX: " + velX);
}
}
The drawing method:
public void drawBubbles() {
Paint paint = new Paint();
for(Bubble b : bubbles) {
b.drawMe(paint, MainActivity.getInstance().getCanvas());
}
}
And the game loop:
while(this.isRunning()) {
updateBubbles(); //update bubbles just calls the update() function in every bubble (for each loop)
drawBubbles();
//...sleep...
}
to draw all the bubbles, and it works, but I only see a difference, when I leave (not close!) the app and then go back into it. I call the method in a loop, and it is called 60 times per second, but why does it not appear on the screen? Also I can't invalidate the canvas.
I just misused the invalidate() method, so it worked fine after I fixed that.
I've managed to draw a staircase and also a smiley face (called Avatar in the code) using paths in my custom view. Id like to move the happy face up the stairs using my nextStep function. nextStep iterates the current step and then calls a function called moveToStep(int step) which offsets the Avatar to the location of the specified step. Lastly, nextStep calls this.invalidate so that onDraw gets called again in hopes that the Avatar is redrawn at the new offset. The problem is that after nextStep is called, the Avatar disappears even though the staircase still remains. I know its not offscreen because I checked the coordinates the smiley is offset to.
Custom View Code
public class StaircaseView extends View {
// setup initial color
private final int paint_color = Color.BLACK;
private int curr_step = 1;
int STEPS = 5;
private float avatar_radius;
// defines paint and canvas
private Paint DrawPaint;
private int view_width, view_height, view_size;
private Path StaircasePath, Avatar;
private float scale, side_length;
private char constrainer;
public StaircaseView(Context context, AttributeSet attrs) {
super(context, attrs);
setupPaint();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("StaircaseView", "onDraw called");
canvas.drawPath(StaircasePath, DrawPaint);
canvas.drawPath(Avatar, DrawPaint);
}
#Override
protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld){
super.onSizeChanged(xNew, yNew, xOld, yOld);
view_height = yNew;
view_width = xNew;
view_size = Math.min(view_height, view_width);
if (view_width == view_size) {
constrainer = 'w';
} else {
constrainer = 'h';
}
scale = (float)view_size/100;
Log.i("StaircaseView", "onSizeChanged --> view width: " + String.valueOf(xNew) + ", view height: " + String.valueOf(yNew) + ", scale: " + String.valueOf(scale) + ", view size: " + String.valueOf(view_size));
float padding = 5 * scale;
StaircasePath = createStaircase(padding);
avatar_radius = 7*scale;
Avatar = createAvatar(0, 0, avatar_radius);
StaircasePath.offset(0, view_height);
moveToStep(curr_step);
}
public void nextStep() {
if (curr_step < STEPS) {
curr_step++;
} else {
curr_step = 1;
}
moveToStep(curr_step);
this.invalidate();
}
private void moveToStep(int step) {
float x = step * side_length - avatar_radius;
float y = view_height - (step - 1) * side_length - avatar_radius;
Log.i("StaircaseView", String.valueOf(x) + ", " + String.valueOf(y));
Avatar.offset(x, y);
}
// Setup paint with color and stroke styles
private void setupPaint() {
DrawPaint = new Paint();
DrawPaint.setColor(paint_color);
DrawPaint.setAntiAlias(true);
DrawPaint.setStrokeWidth(5);
DrawPaint.setStyle(Paint.Style.STROKE);
DrawPaint.setStrokeJoin(Paint.Join.ROUND);
DrawPaint.setStrokeCap(Paint.Cap.ROUND);
}
private Path createStaircase(float padding) {
if (constrainer == 'w') {
side_length = (view_size-padding)/(STEPS+1);
} else {
side_length = (view_size-padding)/STEPS;
}
Path path = new Path();
float curr_x = 0;
float curr_y = 0;
path.moveTo(curr_x, curr_y);
curr_x += side_length;
path.lineTo(curr_x, curr_y);
for(int i=0; i<STEPS; i++) {
curr_y -= side_length;
path.lineTo(curr_x, curr_y);
curr_x += side_length;
path.lineTo(curr_x, curr_y);
}
path.lineTo(curr_x, 0);
path.lineTo(0, 0);
return path;
}
private Path createShape(ArrayList<PointF> points) {
Path path = new Path();
path.moveTo(points.get(0).x, points.get(0).y);
for(int i=1; i< points.size(); i++) {
path.lineTo(points.get(i).x, points.get(i).y);
}
return path;
}
private Path createAvatar(int x, int y, float radius){
Path avatar = new Path();
float width = radius*2;
avatar.addCircle(x, y, radius, Path.Direction.CW);
avatar.addCircle(x - (radius /2), y - (radius / 5), radius/5, Path.Direction.CW);
avatar.addCircle(x + (radius / 2), y - (radius / 5), radius / 5, Path.Direction.CW);
avatar.addRect((float) x - (radius / 5), (float) y - (radius / 5), (float) x + (radius / 5), (float) y - (radius/5), Path.Direction.CCW);
return avatar;
}
}
After looking at this question decided to figure out another way to do this. So what I did was I changed my moveToStep method to return the coordinates to move the Avatar to instead of offsetting him. I then passed these coordinates to the createAvatar method as start coordinates. It worked after that.
New Code
/**
* Created by yako on 11/5/15.
*/
public class StaircaseView extends View {
// setup initial color
private final int paint_color = Color.BLACK;
private int curr_step = 1;
int STEPS = 5;
private float avatar_radius;
// defines paint and canvas
private Paint DrawPaint;
private int view_width, view_height, view_size;
private Path StaircasePath, Avatar;
private float scale, side_length;
private char constrainer;
public StaircaseView(Context context, AttributeSet attrs) {
super(context, attrs);
setupPaint();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("StaircaseView", "onDraw called");
canvas.drawPath(StaircasePath, DrawPaint);
canvas.drawPath(Avatar, DrawPaint);
}
#Override
protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld){
super.onSizeChanged(xNew, yNew, xOld, yOld);
view_height = yNew;
view_width = xNew;
view_size = Math.min(view_height, view_width);
if (view_width == view_size) {
constrainer = 'w';
} else {
constrainer = 'h';
}
scale = (float)view_size/100;
Log.i("StaircaseView", "onSizeChanged --> view width: " + String.valueOf(xNew) + ", view height: " + String.valueOf(yNew) + ", scale: " + String.valueOf(scale) + ", view size: " + String.valueOf(view_size));
float padding = 5 * scale;
// Log.i("StaircaseView", String.valueOf(view_height/2 + padding/2));
StaircasePath = createStaircase(padding);
// Center the staircase in the view
// if (constrainer == 'w') {
// StaircasePath.offset(padding/2, view_height - (view_height - view_width - padding*2));
// } else {
// StaircasePath.offset(view_height/2 - padding/2, view_height-padding/2);
// }
avatar_radius = 7*scale;
Avatar = createAvatar(moveToStep(curr_step), avatar_radius);
StaircasePath.offset(0, view_height);
}
public void nextStep() {
if (curr_step <= STEPS) {
curr_step++;
} else {
curr_step = 1;
}
Avatar = createAvatar(moveToStep(curr_step), avatar_radius);
this.invalidate();
}
private float[] moveToStep(int step) {
float[] offset = new float[2];
offset[0] = step * side_length - avatar_radius;
offset[1] = view_height - (step - 1) * side_length - avatar_radius;
Log.i("StaircaseView", "Moving avatar to "+ String.valueOf(offset[0]) + ", " + String.valueOf(offset[1]));
return offset;
}
// Setup paint with color and stroke styles
private void setupPaint() {
DrawPaint = new Paint();
DrawPaint.setColor(paint_color);
DrawPaint.setAntiAlias(true);
DrawPaint.setStrokeWidth(5);
DrawPaint.setStyle(Paint.Style.STROKE);
DrawPaint.setStrokeJoin(Paint.Join.ROUND);
DrawPaint.setStrokeCap(Paint.Cap.ROUND);
}
private Path createStaircase(float padding) {
if (constrainer == 'w') {
side_length = (view_size-padding)/(STEPS+1);
} else {
side_length = (view_size-padding)/(STEPS+1);
}
Path path = new Path();
float curr_x = 0;
float curr_y = 0;
path.moveTo(curr_x, curr_y);
curr_x += side_length;
path.lineTo(curr_x, curr_y);
for(int i=0; i<STEPS; i++) {
curr_y -= side_length;
path.lineTo(curr_x, curr_y);
curr_x += side_length;
path.lineTo(curr_x, curr_y);
}
path.lineTo(curr_x, 0);
path.lineTo(0, 0);
return path;
}
private Path createShape(ArrayList<PointF> points) {
Path path = new Path();
path.moveTo(points.get(0).x, points.get(0).y);
for(int i=1; i< points.size(); i++) {
path.lineTo(points.get(i).x, points.get(i).y);
}
return path;
}
private Path createAvatar(float[] offset, float radius){
float x = offset[0];
float y = offset[1];
Path avatar = new Path();
float width = radius*2;
avatar.addCircle(x, y, radius, Path.Direction.CW);
avatar.addCircle(x - (radius /2), y - (radius / 5), radius/5, Path.Direction.CW);
avatar.addCircle(x + (radius / 2), y - (radius / 5), radius / 5, Path.Direction.CW);
avatar.addRect((float) x - (radius / 5), (float) y - (radius / 5), (float) x + (radius / 5), (float) y - (radius/5), Path.Direction.CCW);
return avatar;
}
}
So here is the thing. I am monitoring certain distances, and i would like to display them in a radar animation. The base radar image would be something like this (not exactly)
where every circle means a distance range. The idea is that the dot moves towards the circles as the distance changes. My initial approach was to make different images of the same radar with the dot on each circle and simply switch them according the distance. But then i wonder if there any chance(performant, and that works fine on different resolutions) to have one base image of the radar and simply move the dot. I hope I am being clear and if anyone has an idea i would be very thankful
I am not posting any code, cause i need the idea, then ill struggle with the implementation
Have you tried these examples?
https://github.com/jfabrix101/RadarCustomVIew
https://github.com/gpfduoduo/RadarScanView
i.e
Radar.java
public class RadarView extends View {
private final String LOG = "RadarView";
private final int POINT_ARRAY_SIZE = 25;
private int fps = 100;
private boolean showCircles = true;
float alpha = 0;
Point latestPoint[] = new Point[POINT_ARRAY_SIZE];
Paint latestPaint[] = new Paint[POINT_ARRAY_SIZE];
public RadarView(Context context) {
this(context, null);
}
public RadarView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
Paint localPaint = new Paint();
localPaint.setColor(Color.GREEN);
localPaint.setAntiAlias(true);
localPaint.setStyle(Paint.Style.STROKE);
localPaint.setStrokeWidth(1.0F);
localPaint.setAlpha(0);
int alpha_step = 255 / POINT_ARRAY_SIZE;
for (int i=0; i < latestPaint.length; i++) {
latestPaint[i] = new Paint(localPaint);
latestPaint[i].setAlpha(255 - (i* alpha_step));
}
}
android.os.Handler mHandler = new android.os.Handler();
Runnable mTick = new Runnable() {
#Override
public void run() {
invalidate();
mHandler.postDelayed(this, 1000 / fps);
}
};
public void startAnimation() {
mHandler.removeCallbacks(mTick);
mHandler.post(mTick);
}
public void stopAnimation() {
mHandler.removeCallbacks(mTick);
}
public void setFrameRate(int fps) { this.fps = fps; }
public int getFrameRate() { return this.fps; };
public void setShowCircles(boolean showCircles) { this.showCircles = showCircles; }
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int r = Math.min(width, height);
//canvas.drawRect(0, 0, getWidth(), getHeight(), localPaint);
int i = r / 2;
int j = i - 1;
Paint localPaint = latestPaint[0]; // GREEN
if (showCircles) {
canvas.drawCircle(i, i, j, localPaint);
canvas.drawCircle(i, i, j, localPaint);
canvas.drawCircle(i, i, j * 3 / 4, localPaint);
canvas.drawCircle(i, i, j >> 1, localPaint);
canvas.drawCircle(i, i, j >> 2, localPaint);
}
alpha -= 0.5;
if (alpha < -360) alpha = 0;
double angle = Math.toRadians(alpha);
int offsetX = (int) (i + (float)(i * Math.cos(angle)));
int offsetY = (int) (i - (float)(i * Math.sin(angle)));
latestPoint[0]= new Point(offsetX, offsetY);
for (int x=POINT_ARRAY_SIZE-1; x > 0; x--) {
latestPoint[x] = latestPoint[x-1];
}
int lines = 0;
for (int x = 0; x < POINT_ARRAY_SIZE; x++) {
Point point = latestPoint[x];
if (point != null) {
canvas.drawLine(i, i, point.x, point.y, latestPaint[x]);
}
}
lines = 0;
for (Point p : latestPoint) if (p != null) lines++;
boolean debug = false;
if (debug) {
StringBuilder sb = new StringBuilder(" >> ");
for (Point p : latestPoint) {
if (p != null) sb.append(" (" + p.x + "x" + p.y + ")");
}
Log.d(LOG, sb.toString());
// " - R:" + r + ", i=" + i +
// " - Size: " + width + "x" + height +
// " - Angle: " + angle +
// " - Offset: " + offsetX + "," + offsetY);
}
}
}
in your activity.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/black">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="start"
android:onClick="startAniamtion"/>
<frusso.radartest.RadarView
android:id="#+id/radarView"
android:layout_width="240dp"
android:layout_height="240dp"
android:layout_gravity="center_horizontal"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="stop"
android:onClick="stopAnimation"/>
Activity.java
public class MainActivity extends Activity {
RadarView mRadarView = null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRadarView = (RadarView) findViewById(R.id.radarView);
mRadarView.setShowCircles(true);
}
public void stopAnimation(View view) {
if (mRadarView != null) mRadarView.stopAnimation();
}
public void startAnimation(View view) {
if (mRadarView != null) mRadarView.startAnimation();
}
}
Hope this will guide you for your requirement.
My approach would be to have one static image of the radar and another of the dot (if you wanted a custom one). I'd have 2 main threads, the game loop and one that moves the dot on your radar image based on your position.
"I am monitoring certain distances" ~ What does that mean?
To make a radar create a class that extends ImageView. Override onDraw(Canvas canvas) and set the image resource to a radar background.
#Override
public void onDraw(Canvas canvas) {
//draw background
super.onDraw(canvas);
for(PointF p : points)
{
//draw each point as an image. Maybe, translate by width/2 and height/2
}
}