Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw wheel on canvas?

I want to draw circle with scale lines on canvas. the circle contain 100 ticks.But between 1 to 2 there is a more number of sub ticks compare to other, also I want to calculate the scale depending upon the user input(circle rotation). please help me.. enter image description here

i tried this http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/

private void drawScale(Canvas canvas) {
        //canvas.drawOval(scaleRect, scalePaint);
        canvas.drawCircle(0.5f,0.5f, 0.49f,scalePaint);
        canvas.save(Canvas.MATRIX_SAVE_FLAG);
        for (i = 0; i < totalNicks; ++i) {
            float y1 = scaleRect.top;
            float y2 = y1 - 0.020f;

            //canvas.drawLine(0.5f, y1, 0.5f, y2, scalePaint);

            if (i % 1 == 0) {
                int value = nickToDegree(i);
                if(value<=360)
                {
                    float y3 = 0;
                    scaleText =new Paint();
                    scaleText.setTextSize(0.035f);
                    scaleText.setColor(Color.BLACK);
                    scaleText.setTypeface(Typeface.DEFAULT_BOLD);
                    scaleText.setTextScaleX(0.8f);
                    scaleText.setTextAlign(Paint.Align.CENTER); 
                    scaleText.setStrokeWidth(0.015f);
                    scaleText.setAntiAlias(true);

                    scaleline =new Paint();
                    scaleline.setStyle(Paint.Style.FILL);
                    scaleline.setColor(Color.BLACK);
                    scaleline.setStrokeWidth(0.005f);
                    scaleline.setAntiAlias(true);   
                    switch (value) {

                    case 0:y3 = y1 - 0.120f;
                    canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                            canvas.drawText("1", 0.5f, y3 - 0.05f, scaleText);

                        break;
                    case 2:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 1/16", 0.5f, y3 - 0.015f, scaleText);

                        break;

                    case 4:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 1/8", 0.5f, y3 - 0.015f, scaleText);

                        break;


                    case 6:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 3/16", 0.5f, y3 - 0.015f, scaleText);
                        break;

                    case 8:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 1/4", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 10:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 5/16", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 12:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 3/8", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 14:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 7/16", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 16:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 1/12", 0.5f, y3 - 0.015f, scaleText);

                    break;
                    case 18:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                     canvas.drawText("1 9/16", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 20:y3 = y1 - 0.070f;

                       canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                       canvas.drawText("1 5/8", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 22:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 11/16", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 24:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 3/4", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 26:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 13/16", 0.5f, y3 - 0.015f, scaleText);

                        break;
                    case 28:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 7/8", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 30:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("1 15/16", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 32:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("2", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 34:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("2 1/4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 36:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("2 1/2", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 38:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("2 3/4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 40:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("3", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 42:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("3 1/4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 44:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("3 1/2", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 46:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("3 3/4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 48:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 50:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("4 1/4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 52:y3 = y1 - 0.070f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("4 1/2", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 54:y3 = y1 - 0.030f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("4 3/4", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 56:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("5", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 60:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("6", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 64:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("7", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 68:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("8", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 71:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("9", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 74:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("10", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 77:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("11", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 80:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("12", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 82:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("13", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 84:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("14", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 86:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("15", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 89:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("20", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 92:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("25", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 94:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("30", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 96:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("35", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 98:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("40", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 101:y3 = y1 - 0.090f;
                     canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("45", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 103: 
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("50", 0.5f, y3 - 0.015f, scaleText);
                        break;
                    case 105: y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("55", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 107: y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("60", 0.5f, y3 - 0.015f, scaleText);
                    case 109:
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("65", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 111:
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("70", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 113:
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("75", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 115:
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("80", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 117:
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("85", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    case 119:
                        y3 = y1 - 0.090f;
                        canvas.drawLine(0.5f, y1, 0.5f, y3, scaleline);
                    canvas.drawText("90", 0.5f, y3 - 0.015f, scaleText);
                    break;
                    }
                }

            }

            canvas.rotate(degreesPerNick, 0.5f, 0.5f);
        }
        canvas.restore();       
    }

guys I have one more problem. enter image description here

When i rotate a wheel. textview should show the fraction displayed on the tick pointed by the pointer

like image 285
ShreeshaDas Avatar asked Nov 30 '12 09:11

ShreeshaDas


1 Answers

Try to use gesture on the canvas (or on canvas imageview) use Gesture listeners, ScaleListener for calculating the scale.

Link: Image in Canvas with touch events

Other than that use prerecorded gestures or implement GestureOverlayView to detect gestures inputs for calculating the scale (little more complex)

For more Info: Gestures detection and canvas scale, translate and rotate

Also More info on implementing Gestures : Link1 , Link2

like image 155
LOG_TAG Avatar answered Nov 18 '22 16:11

LOG_TAG