Android с масштабируемым/прокручиваемым ImageView с оверлеями

Я хотел бы отобразить изображение (включая функции прокрутки и масштабирования). Кроме того, мне нужно добавить некоторые наложения к изображению динамически. Оверлеи находятся в зависимости от содержимого внутри изображения.

  • Если пользователь прокручивает, наложения также должны перемещаться.
  • Если пользователь масштабирует, наложения не должны увеличиваться, а удерживать их относительное изображение

Другими словами: я хотел бы реализовать карту с некоторыми маркерами, но я предоставляю свой собственный материал карты.

Мой главный вопрос: как я мог это сделать?

Что я пробовал до сих пор

  • Я попытался реализовать его в WebView, поскольку он обеспечил основные функции масштабирования и масштабирования. Однако мне не удалось добавить наложения без использования Javascript и HTML (то, что я считал не очень удобным способом решения проблемы)
  • Существуют проекты (т.е. TouchImageView), которые реализуют функцию прокрутки/масштабирования, но им еще сложнее добавить собственные функции оверлея с моей точки зрения.

Вопросы

Есть ли простое решение или подход к моей проблеме?

Каков правильный способ добавления и перемещения просмотров во время выполнения на Android? (Обычно я бы использовал базовый макет и играл с маркой - это было бы лучшей практикой?)

Может ли кто-нибудь указать мне в правильном направлении, пожалуйста.

Мин. Уровень API: 10

Ответы

Ответ 1

После долгого времени я нашел точный ответ на свое решение: TileView

Настройка вида карты:

@Override
protected void onCreate( Bundle savedInstanceState ) {
  super.onCreate( savedInstanceState );
  TileView tileView = new TileView( this );
  tileView.setSize( 2000, 3000 );  // the original size of the untiled image
  tileView.addDetailLevel( 1f, "tile-%d-%d.png");
  setContentView( tileView );
}

Добавление маркера:

tileView.addMarker( someView, 250, 500, -0.5f, -1.0f );

Код из документации.

Ответ 2

Я бы предложил расширить класс View и переопределить метод onDraw. Взгляните на Canvas API.

Вероятно, у вас будет метод onDraw, который выглядит следующим образом:

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    canvas.translate(mPosX, mPosY); //position of your actual data
    canvas.scale(mScaleFactor, mScaleFactor); // zoom factor
    map.draw(canvas); //you draw your map here
    canvas.restore(); //go back to saved state 
    //for each marker you have, do the same "save - translate - scale - draw" loop        
}

Поскольку вам не нужны маркеры для масштабирования, вам, вероятно, не понадобится масштабный шаг, но вам нужно правильно рассчитать их позицию.

В зависимости от ваших # объектов и т.д. вам может потребоваться более оптимизированный способ рисования ваших маркеров (например, повторное рисование только измененных прямоугольных областей). см. View.invalidate(Rect)

Ответ 3

Думаю, это поможет вам

Обратитесь к этому проекту Ссылка

У него есть автоматический прокрутка изображения и увеличение изображения Когда вы нажимаете на него.

Ответ 4

Пробовали ли вы подклассифицировать View и обрабатывать сами жесты пользователя? Это мой первый выбор для сложного поведения как такового. Он должен выглядеть примерно так:

  • В вашем классе, расширяющем View, вы должны создать экземпляр требуемого изображения и наложений во время создания в виде объектов Bitmap
  • Событие OnScroll вы подсчитаете, как изображение и наложения могут быть после такой прокрутки, обновить растровые изображения и аннулировать текущий вид
  • Используя GestureDetector, вы можете обрабатывать события пинча и обрабатывать события масштабирования/уменьшения масштаба так же, как события прокрутки
  • Не забудьте всегда вызывать invalidate после изменения растровых изображений
  • Нарисуйте растровые изображения во время метода onDraw

Многочисленные материалы об этих индивидуальных задачах в StackOverflow, дайте мне знать, если вам нужна аддитивная помощь в любом из них.