Alignment issues in view

Question

This question is in continuation to my previous doubt

Now I am trying to make a guage view. I am drawing a scale but the alignment is not proper and I am not able to figure out the problem. Here is my code:

 protected void onDraw(Canvas canvas) {

                                    super.onDraw(canvas);

                                    w= canvas.getWidth();
                                    h=canvas.getHeight();
                                    DrawRange(canvas,innerRadius,outerRadius);
                            }

here innerRadius =250; and outer radius = 300;

 private void DrawRange(Canvas canvas,int r,int R) {
                                RectF rect = new RectF(canvas.getWidth()/2- r, canvas.getHeight()/2-r, canvas.getWidth()/2+r, canvas.getHeight()/2+r);
                                RectF rect1 = new RectF(canvas.getWidth()/2- R, canvas.getHeight()/2-R, canvas.getWidth()/2+R, canvas.getHeight()/2+R);

                                Paint scalePaint = new Paint();
                                scalePaint.setStyle(Paint.Style.STROKE);
                                scalePaint.setColor(0x9f004d0f);
                                scalePaint.setStrokeWidth(2);
                                scalePaint.setAntiAlias(true);

                                scalePaint.setTextSize(35.0f);
                                scalePaint.setTypeface(Typeface.SANS_SERIF);
                                scalePaint.setTextScaleX(0.4f);
                                scalePaint.setTextAlign(Paint.Align.CENTER);
                                canvas.drawOval(rect1, scalePaint);
                                canvas.drawOval(rect, scalePaint);

                                canvas.save(Canvas.CLIP_SAVE_FLAG);
                                int xc = 0;
                                for (int i = 0; i < totalNicks; i++) {

                                    float y1 = 330;
                                    float y2 = y1 + 5;

                                    if (i % 5 == 0) {
                                            canvas.drawText(""+xc, r-15, y2 , scalePaint);



                                            xc+=5;
                                    }else{
                                        canvas.drawLine(r, y1, r, y2, scalePaint);
                                    }

                                    canvas.rotate(degreesPerNick, w/2, h/2);

                                }
                                canvas.restore();

                            }

enter image description here

What do you mean when you say "the alignment is not proper"? Can you describe what you're expecting it to look like, and how the actual results differ from that? — Michelle, Aug 19 '13 at 13:38
Sure I will attach the screenshot so that you can understand — baloo, Aug 19 '13 at 13:39
The problem which i guess is the value of y1 and y2; For time being i was making them hard coded as I was just trying to learn — baloo, Aug 19 '13 at 13:41
Okay, and you're expecting the numbers to be rotated 1/12 clockwise around the ring from where they are, right? — Michelle, Aug 19 '13 at 13:42

score 1 · Accepted Answer · answered Aug 19 '13 at 14:13

I wonder if you are drawing the text and the dashes in the wrong place. The key reference point is the centre of the circles:

int cX = canvas.getWidth()/2;
int cY = canvas.getHeight()/2;

The other key reference is the difference between the two radii:

int deltaR = R - r;

The dashes and text are always drawn at 12 o'clock, say 20% above the inner circle to 1/3 of the way from the outer circle:

int dashInnerY = cY - r - deltaR/5; // 20% of the way between inner and outer radii
int dashOuterY = cY - R + deltaR/3; // 1/3 of the way between outer and inner radii

Then to render a dash:

canvas.drawLine(cX, dashInnerY, cX, dashOuterY, scalePaint);

And the number:

canvas.drawText(""+xc, cX, dashInnerY, scalePaint);

That was indeed very helpful. Now I could figure out where was my mistake ... thanks a lot — baloo, Aug 19 '13 at 14:19

Alignment issues in view

1 Answers1