Необходимо отображать предварительный просмотр камеры внутри кругового обзора.

Мне нужно реализовать круговой предварительный просмотр камеры. Я использую camera2 API с TextureView. Я добавил макет следующим образом:

 <FrameLayout>
 <TextureView/>
 <CircularImageView/>
 <FrameLayout/>

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

Любая помощь приветствуется.


android camera android-camera android-camera2 android-textureview
person nibz    schedule 11.11.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо CircularImageView вам нужен обычный вид изображения, где вы загружаете png с круглым прозрачным отверстием желаемого размера.

Таким образом, предлагаемая иерархия может быть примерно такой:

<FrameLayout size="match_parent">
   <TextureView size=<calculated_to_match_camera> centered />
   <ImageView size="match_parent" src="full-screen-gradient-with-transparent-circle-in-center.png" />
<FrameLayout />

Приведенное выше сокращение предполагает размер --> android:width и android:height. Размер текстуры задается программно, чтобы соответствовать соотношению сторон предварительного просмотра камеры, и область интереса выставляется через круглое отверстие в слое ImageView над ним.

person Alex Cohn    schedule 11.11.2017
comment
правда, но как мне установить TextureView на круглое изображение? Как видите, TextureView по-прежнему квадратный. Также проблема заключается в том, что фоновое изображение (которое сейчас желтое) будет градиентным изображением, поэтому я не могу иметь квадратное изображение и сделать углы непрозрачными, а круг прозрачным @Alex Cohn - person nibz; 12.11.2017
comment
Вам не нужно устанавливать TextureView на круглое изображение; вам нужно только круглое окно в прямоугольном предварительном просмотре камеры. Что касается градиентного фона, подумайте о том, чтобы сделать весь фон одним изображением с прозрачным кругом (см. обновленный ответ). - person Alex Cohn; 12.11.2017
comment
Спасибо за решение! Я нарисовал прозрачный круг поверх градиентного изображения, наложенного поверх изображения с камеры, и смог добиться желаемого результата. - person nibz; 16.11.2017
comment
одна проблема, с которой я сталкиваюсь, заключается в том, что предварительный просмотр, отображаемый в этом круге, большой, я просто хочу, чтобы он был достаточно маленьким, чтобы захватить лицо, держащее устройство в руке. Я попытался установить одинаковые ширину и высоту TextureView в макете, но изображение кажется сжатым. Можно ли как-нибудь уменьшить предварительный просмотр, сохранив соотношение сторон? - person nibz; 16.11.2017
comment
Я не совсем понимаю ваш вопрос. Скриншот или набросок может помочь - person Alex Cohn; 16.11.2017
comment
Предварительный просмотр камеры отображается на весь экран, и я рисую круг поверх него. Если бы мне пришлось держать устройство в руке, чтобы щелкнуть селфи, то в этой области круга была бы видна только часть моего лица, так как это круг небольшого радиуса. Я ищу способ уменьшить размер предварительного просмотра, который я вижу, чтобы все лицо можно было увидеть в предварительном просмотре. Эскиз может быть таким же, как я указал выше, просто представьте, что вы делаете с ним селфи, он не будет соответствовать лицу в этой области. постараюсь зарисовать - person nibz; 16.11.2017
comment
А, понял. Как вы видите в моем ответе, размер TextureView в любом случае должен рассчитываться в соответствии с соотношением сторон предварительного просмотра (например, 4: 3 или 16: 9 или, может быть, даже больше, это меняется от устройства к устройству). Обычно мы пытаемся сделать этот размер как можно большим (пока он помещается на экране). Но вы можете уменьшить его. - person Alex Cohn; 16.11.2017