Android Gauge Animation Вопрос - PullRequest
Новая
       36

Android Gauge Animation Вопрос

11 голосов
/ 27 мая 2011

Хорошо, так что я пытался сделать это в течение нескольких дней, и я не получаю.Итак, у меня есть следующие два изображения:

Первое - это датчик оборотов

RPM Gauge

Второе изображение - это полностью белый рисунок, представляющий заполнение датчика оборотов:

Full Gauge

Я хочу сделать следующее:

  1. попросить пользователя ввести об / мин, если, например, он введет 1,2, датчик заполнится какследует:

output

У меня работает пользовательский ввод, мне нужна помощь с анимацией.Вот что я пробовал:

  1. Я пробовал использовать PorterDuff, но он также обрезает датчик на фоне, а не только белую полосу
  2. Я пытался разбить изображение на маленькиерастровые изображения и сохранять их в массивах, чтобы я мог вызывать детали, но это было медленно и часто падало
  3. Я добился определенного прогресса, применив сначала калибровку к холсту, а затем сохранив холст: canvas.save ();затем обтравочный контур на белом изображении и восстановление холста.Однако я не знаю, как обрезать по кругу, начиная с нижнего левого до 180 градусов внизу справа (CW).Это лучший способ?

Я знаю, что, возможно, есть более простой или более эффективный способ сделать это, но я просто не имею понятия.Кто-нибудь с хорошими идеями?

* Обратите внимание, что все изображения PNG

Заранее спасибо!

Ответы [ 2 ]

9 голосов
/ 27 мая 2011

Как вы уже нашли, я бы использовал клип:

  • Нарисуйте фоновое изображение
  • установить клип
  • Нарисуйте изображение переднего плана

Я бы использовал 

Canvas.clipPath()

с траекторией, похожей на кусок пирога, начинающейся в центре круга, например:

Clip path

Для создания пути клипа используйте что-то вроде: 

public class PieView extends View {

    private int width = 200;
    private int angleStart = 135;
    private int sweep = 270;

    private Path p;

    private Paint paint = new Paint();

    public PieView(Context context, AttributeSet attrs) {
    super(context, attrs);
        p = new Path();
        //move into center of the circle
        p.setLastPoint(width/2, width/2);
        //add line from the center to arc at specified angle
        p.lineTo(width/2+(float)Math.cos(Math.toRadians(angleStart))*(width/2), 
                 width/2+(float)Math.sin(Math.toRadians(angleStart))*(width/2));
        //add arc from start angle with specified sweep
        p.addArc(new RectF(0, 0, width, width), angleStart, sweep);
        //from end of arc return to the center of circle
        p.lineTo(width/2, width/2);

        paint.setColor(Color.RED);
        paint.setStrokeWidth(1);
        paint.setStyle(Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0,0,width,width, paint);
        canvas.drawPath(p,paint);
    }
}
1 голос
/ 28 мая 2011

Как рисовать дуги из Android ApiDemos: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html

Затем вам нужно использовать xfermode, чтобы удалить часть верхнего изображения, используя холст, полученный из растрового изображения. Вы можете увидеть один пример такого подхода здесь: Сделать определенную область растрового изображения прозрачной на ощупь

...