圓形視訊和圓角視訊的一種實現方式

hupihuai發表於2018-04-12

###介紹

因為專案的需要需要實現圓角視訊,一開始接到需求的時候是驚訝的,因為很少有圓角的視訊(主要是一開始沒有思路了。。。。。) github 上已經有一個實現了 videoroundedcorners 但是對於我的需要有些不滿足,不能了在上面新增view,因為它設定了

setZOrderOnTop
複製程式碼

所以才有了這邊文章 ###效果

螢幕快照 2018-04-12 下午5.38.26.png

螢幕快照 2018-04-12 下午5.38.35.png

好了效果就是這樣的,接下來是程式碼了

###實現部分 這裡是採用MediaPlayer 和 Opengl 實現的 用到了Opengl的模板測試功能

@Override
    public void onDrawFrame(GL10 gl) {
        GLES20.glEnable(GLES20.GL_STENCIL_TEST);
        GLES20.glClear(GLES20.GL_STENCIL_BUFFER_BIT);
        GLES20.glStencilFunc(GLES20.GL_ALWAYS, 1, 0xff); // 總是通過
        GLES20.glStencilOp(GLES20.GL_KEEP, GLES20.GL_KEEP, GLES20.GL_REPLACE);
        if (currentShape == SHAPE_CIRCL) {
            mCircleShape.draw();
        } else {
            mRoundShape.draw();
        }
        GLES20.glStencilFunc(GLES20.GL_EQUAL, 1, 0xff); // 只有模板緩衝區中的模板值為1的地方才被繪製
        GLES20.glStencilOp(GLES20.GL_KEEP, GLES20.GL_KEEP, GLES20.GL_KEEP);

        mVideoTextture.draw();
        GLES20.glDisable(GLES20.GL_STENCIL_TEST);

    }
複製程式碼

先畫一個形狀然後再把視訊覆蓋到上面進行裁剪實現還是不復雜的。 跟Canvas的PorterDuffXfermode實現圓形圖片有點異曲同工的意思。 有需要可以去看看程式碼 如果對你有幫助就給他stars吧 程式碼連結

參考連結 videoroundedcorners

相關文章