Masking Bitmaps на Android21.09.2016 17:48

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

Я предполагаю, что читатель имеет опыт в разработке под Android и знаком с классами Canvas, Drawable и Bitmap.

Код, используемый в статье, можно найти на GitHub

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

private void loadImages() {
        mPictureBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.picture);
        mMaskBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mask_circle).extractAlpha();
    }

Теперь, когда изображения загружены, можно переходить к самому интересному — накладыванию маски. Какие средства для этого могут применяться?

Теория

• Da (destination alpha) —исходная прозрачность пиксела холста;
• Dc (destination color) — исходный цвет пиксела холста;
• Sa (source alpha) — прозрачность пиксела накладываемого изображения;
• Sc (source color) — цвет пиксела накладываемого изображения;
• Da» — прозрачность пискела холста после наложения;
• Dc» — цвет пискела холста после наложения.

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

[Da», Dc»] = f (Dc, Da, Sa, Sc)

Например, для режима DST_IN справедливо

Da' = Sa·Da
Dc' = Sa·Dc

или в компактной записи [Da», Dc»] = [Sa·Da, Sa·Dc]. В документации Android это выглядит как 

Но соображать в уме, как будет выглядеть итоговая картинка по этим формулам, довольно утомительно. Гораздо удобнее воспользоваться вот такой шпаргалкой по режимам наложения:

Теперь, когда все стало понятно, можно писать код.

SRC_IN

Чтобы этого избежать, буфер можно выделять заранее и переиспользовать его в вызовах onDraw.
Вот пример Drawable, в которой используется режим SRC_IN. Память под буфер выделяется при изменении размера Drawable.

public class MaskedDrawablePorterDuffSrcIn extends Drawable {

   private Bitmap mPictureBitmap;
   private Bitmap mMaskBitmap;
   private Bitmap mBufferBitmap;
   private Canvas mBufferCanvas;
   private final Paint mPaintSrcIn = new Paint();

   public MaskedDrawablePorterDuffSrcIn() {
       mPaintSrcIn.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
   }

   public void setPictureBitmap(Bitmap pictureBitmap) {
       mPictureBitmap = pictureBitmap;
   }

   public void setMaskBitmap(Bitmap maskBitmap) {
       mMaskBitmap = maskBitmap;
   }

   @Override
   protected void onBoundsChange(Rect bounds) {
       super.onBoundsChange(bounds);
       final int width = bounds.width();
       final int height = bounds.height();

       if (width <= 0 || height <= 0) {
           return;
       }

       mBufferBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);        mBufferCanvas = new Canvas(mBufferBitmap);
   }

   @Override
   public void draw(Canvas canvas) {
       if (mPictureBitmap == null || mMaskBitmap == null) {
           return;
       }

       mBufferCanvas.drawBitmap(mMaskBitmap, 0, 0, null);
       mBufferCanvas.drawBitmap(mPictureBitmap, 0, 0, mPaintSrcIn);

       //dump the buffer
       canvas.drawBitmap(mBufferBitmap, 0, 0, null);
   }

Внимательный читатель заметит, что этот код неоптимален. Зачем перерисовывать холст буфера при каждом вызове draw? Ведь можно делать это только когда что-то изменилось.

public class MaskedDrawablePorterDuffSrcIn extends MaskedDrawable {

   private Bitmap mPictureBitmap;
   private Bitmap mMaskBitmap;
   private Bitmap mBufferBitmap;
   private Canvas mBufferCanvas;
   private final Paint mPaintSrcIn = new Paint();

   public static MaskedDrawableFactory getFactory() {
       return new MaskedDrawableFactory() {
           @Override
           public MaskedDrawable createMaskedDrawable() {
               return new MaskedDrawablePorterDuffSrcIn();
           }
       };
   }

   public MaskedDrawablePorterDuffSrcIn() {
       mPaintSrcIn.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
   }

   @Override
   public void setPictureBitmap(Bitmap pictureBitmap) {
       mPictureBitmap = pictureBitmap;
       redrawBufferCanvas();
   }

   @Override
   public void setMaskBitmap(Bitmap maskBitmap) {
       mMaskBitmap = maskBitmap;
       redrawBufferCanvas();
   }

   @Override
   protected void onBoundsChange(Rect bounds) {
       super.onBoundsChange(bounds);
       final int width = bounds.width();
       final int height = bounds.height();

       if (width <= 0 || height <= 0) {
           return;
       }

       if (mBufferBitmap != null
           && mBufferBitmap.getWidth() == width
           && mBufferBitmap.getHeight() == height) {
           return;
       }

       mBufferBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); //that's too bad
       mBufferCanvas = new Canvas(mBufferBitmap);
       redrawBufferCanvas();
   }

   private void redrawBufferCanvas() {
       if (mPictureBitmap == null || mMaskBitmap == null || mBufferCanvas == null) {
           return;
       }

       mBufferCanvas.drawBitmap(mMaskBitmap, 0, 0, null);
       mBufferCanvas.drawBitmap(mPictureBitmap, 0, 0, mPaintSrcIn);
   }

   @Override
   public void draw(Canvas canvas) {
       //dump the buffer
       canvas.drawBitmap(mBufferBitmap, 0, 0, null);
   }

   @Override
   public void setAlpha(int alpha) {
       mPaintSrcIn.setAlpha(alpha);
   }

   @Override
   public void setColorFilter(ColorFilter cf) {
       //Not implemented
   }

   @Override
   public int getOpacity() {
       return PixelFormat.UNKNOWN;
   }

   @Override
   public int getIntrinsicWidth() {
       return mMaskBitmap != null ? mMaskBitmap.getWidth() : super.getIntrinsicWidth();
   }

   @Override
   public int getIntrinsicHeight() {
       return mMaskBitmap != null ? mMaskBitmap.getHeight() : super.getIntrinsicHeight();
   }
}

DST_IN

mPaintDstIn.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));


mBufferCanvas.drawBitmap(mPictureBitmap, 0, 0, null);
mBufferCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaintDstIn);

CLEAR + DST_OVER

Но если подумать, то в некоторых случаях можно обойтись вообще без выделения буфера и рисовать сразу на холст, который нам передали в draw. При этом нужно иметь в виду, что на нем уже что-то нарисовано.

Для этого в холсте мы как бы прорезаем дырку по форме маски с помощью режима CLEAR, а затем рисуем картинку в режиме DST_OVER — образно говоря, подкладываем картинку под холст. Через эту дырку видно картинку и эффект получается как раз такой, как нам нужно.

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

Код будет выглядеть так:

mPaintDstOver.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
mPaintClear.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

//draw the mask with clear mode
canvas.drawBitmap(mMaskBitmap, 0, 0, mPaintClear);

//draw picture with dst over mode
canvas.drawBitmap(mPictureBitmap, 0, 0, mPaintDstOver);

Как видим, использование режимов PorterDuff на Android связано либо с выделением лишней памяти, либо с ограничением применения. К счастью, есть способ избежать всех этих проблем. Достаточно воспользоваться BitmapShader.

Как их использовать? Очень просто: если шейдер зарядить в Paint, то все, что рисуется с помощью этого Paint, будет брать цвет пикселов из шейдера. В пакете есть реализации шейдеров для рисования градиентов, комбинирования других шейдеров и (самый полезный в контексте нашей задачи) BitmapShader, который инициализируется с помощью Bitmap. Такой шейдер возвращает цвет соответствующих пикселов из Bitmap, которое было передано при инициализации.

В документации есть важное уточнение: рисовать шейдером можно все, кроме Bitmap. На самом деле, если Bitmap в формате ALPHA_8, то при отрисовке такого Bitmap с помощью шейдера все прекрасно работает. А наша маска как раз в таком формате, так давайте попробуем отобразить маску с помощью шейдера, который использует изображения цветка.

По шагам:

• создаем BitmapShader, в который загружаем изображение цветка;
• создаем Paint, в который заряжаем этот BitmapShader;
• рисуем маску с помощью этого Paint.

public void setPictureBitmap(Bitmap src) {
   mPictureBitmap = src;
   mBitmapShader = new BitmapShader(mPictureBitmap,
       Shader.TileMode.REPEAT,
       Shader.TileMode.REPEAT);
   mPaintShader.setShader(mBitmapShader);
}

public void draw(Canvas canvas) {
   if (mPaintShader == null || mMaskBitmap == null) {
       return;
   }
   canvas.drawBitmap(mMaskBitmap, 0, 0, mPaintShader);
}

Чтобы привести размер картинки к размеру маски, можно воспользоваться методом android.graphics.Shader#setLocalMatrix, в который нужно передать матрицу преобразования. К счастью, вспоминать курс аналитической геометрии не придется: класс android.graphics.Matrix содержит удобные методы формирования матрицы. Будем сжимать шейдер так, чтобы изображение полностью поместилось в маску без искажений пропорций, и сдвинем его так, чтобы совместить центры изображения и маски:

private void updateScaleMatrix() {
   if (mPictureBitmap == null || mMaskBitmap == null) {
       return;
   }

   int maskW = mMaskBitmap.getWidth();
   int maskH = mMaskBitmap.getHeight();
   int pictureW = mPictureBitmap.getWidth();
   int pictureH = mPictureBitmap.getHeight();

   float wScale = maskW / (float) pictureW;
   float hScale = maskH / (float) pictureH;

   float scale = Math.max(wScale, hScale);

   Matrix matrix = new Matrix();
   matrix.setScale(scale, scale);
   matrix.postTranslate((maskW - pictureW * scale) / 2f, (maskH - pictureH * scale) / 2f);
   mBitmapShader.setLocalMatrix(matrix);
}

public class MaskedDrawableBitmapShader extends Drawable {

   private Bitmap mPictureBitmap;
   private Bitmap mMaskBitmap;
   private final Paint mPaintShader = new Paint();
   private BitmapShader mBitmapShader;

   public void setMaskBitmap(Bitmap maskBitmap) {
       mMaskBitmap = maskBitmap;
       updateScaleMatrix();
   }

   public void setPictureBitmap(Bitmap src) {
       mPictureBitmap = src;
       mBitmapShader = new BitmapShader(mPictureBitmap,
           Shader.TileMode.REPEAT,
           Shader.TileMode.REPEAT);
       mPaintShader.setShader(mBitmapShader);
       updateScaleMatrix();
   }

   @Override
   public void draw(Canvas canvas) {
       if (mPaintShader == null || mMaskBitmap == null) {
           return;
       }
       canvas.drawBitmap(mMaskBitmap, 0, 0, mPaintShader);
   }

   private void updateScaleMatrix() {
       if (mPictureBitmap == null || mMaskBitmap == null) {
           return;
       }

       int maskW = mMaskBitmap.getWidth();
       int maskH = mMaskBitmap.getHeight();
       int pictureW = mPictureBitmap.getWidth();
       int pictureH = mPictureBitmap.getHeight();

       float wScale = maskW / (float) pictureW;
       float hScale = maskH / (float) pictureH;

       float scale = Math.max(wScale, hScale);

       Matrix matrix = new Matrix();
       matrix.setScale(scale, scale);
       matrix.postTranslate((maskW - pictureW * scale) / 2f, (maskH - pictureH * scale) / 2f);
       mBitmapShader.setLocalMatrix(matrix);
   }

   @Override
   public void setAlpha(int alpha) {
       mPaintShader.setAlpha(alpha);
   }

   @Override
   public void setColorFilter(ColorFilter cf) {
       mPaintShader.setColorFilter(cf);
   }

   @Override
   public int getOpacity() {
       return PixelFormat.UNKNOWN;
   }

   @Override
   public int getIntrinsicWidth() {
       return mMaskBitmap != null ? mMaskBitmap.getWidth() : super.getIntrinsicWidth();
   }

   @Override
   public int getIntrinsicHeight() {
       return mMaskBitmap != null ? mMaskBitmap.getHeight() : super.getIntrinsicHeight();
   }
}

Например, используемая в этой статье в качестве примера маска — это довольно простая геометрическая фигура, которую несложно отрисовать.

public class FixedMaskDrawableBitmapShader extends Drawable {

   private Bitmap mPictureBitmap;
   private final Paint mPaintShader = new Paint();
   private BitmapShader mBitmapShader;
   private Path mPath;


   public void setPictureBitmap(Bitmap src) {
       mPictureBitmap = src;
       mBitmapShader = new BitmapShader(mPictureBitmap,
           Shader.TileMode.REPEAT,
           Shader.TileMode.REPEAT);
       mPaintShader.setShader(mBitmapShader);

       mPath = new Path();
       mPath.addOval(0, 0, getIntrinsicWidth(), getIntrinsicHeight(), Path.Direction.CW);
       Path subPath = new Path();
       subPath.addOval(getIntrinsicWidth() * 0.7f, getIntrinsicHeight() * 0.7f, getIntrinsicWidth(), getIntrinsicHeight(), Path.Direction.CW);
       mPath.op(subPath, Path.Op.DIFFERENCE);
   }

   @Override
   public void draw(Canvas canvas) {
       if (mPictureBitmap == null) {
           return;
       }
       canvas.drawPath(mPath, mPaintShader);
   }

   @Override
   public void setAlpha(int alpha) {
       mPaintShader.setAlpha(alpha);
   }

   @Override
   public void setColorFilter(ColorFilter cf) {
       mPaintShader.setColorFilter(cf);
   }

   @Override
   public int getOpacity() {
       return PixelFormat.UNKNOWN;
   }

   @Override
   public int getIntrinsicWidth() {
       return mPictureBitmap != null ? mPictureBitmap.getWidth() : super.getIntrinsicWidth();
   }

   @Override
   public int getIntrinsicHeight() {
       return mPictureBitmap != null ? mPictureBitmap.getHeight() : super.getIntrinsicHeight();
   }
}

public void setPictureBitmap(Bitmap src) {
   mPictureBitmap = src;
   mBitmapShader = new BitmapShader(mPictureBitmap,
       Shader.TileMode.REPEAT,
       Shader.TileMode.REPEAT);
   mPaintShader.setShader(mBitmapShader);

   mPaintShader.setTextSize(getIntrinsicHeight());
   mPaintShader.setStyle(Paint.Style.FILL);
   mPaintShader.setTextAlign(Paint.Align.CENTER);
   mPaintShader.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
}

@Override
public void draw(Canvas canvas) {
   if (mPictureBitmap == null) {
       return;
   }
   canvas.drawText("A", getIntrinsicWidth() / 2, getIntrinsicHeight() * 0.9f, mPaintShader);
}

Напомню, что на графиках по оси абсцисс — время, по оси ординат — количество миллисекунд, затраченное на отрисовку каждого кадра. В идеале график должен помещаться ниже зеленой линии, что соответствует 60 FPS.

Plain BitmapDrawable (no masking)

SRC_IN

BitmapShader

Видно, что использование BitmapShader позволяет добиться такого же высокого фреймрейта, что и без накладывания маски вообще. В то время как SRC_IN решение уже нельзя признать достаточно производительным, интерфейс ощутимо «подтормаживает» при быстром скроллинге, что подтверждается графиком: многие кадры отрисовываются дольше 16 мс, а некоторые и больше 33 мс, то есть FPS падает ниже 30.

Делитесь своими мыслями в комментариях!

Да пребудет с вами stackoverflow.com!

Комментарии (0)