圆形视频和圆角视频的一种实现方式

作者: 暗影1 | 来源:发表于2018-04-12 17:56 被阅读422次

    介绍

    因为项目的需要需要实现圆角视频,一开始接到需求的时候是惊讶的,因为很少有圆角的视频(主要是一开始没有思路了。。。。。)
    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

    相关文章

      网友评论

        本文标题:圆形视频和圆角视频的一种实现方式

        本文链接:https://www.haomeiwen.com/subject/wbdlrxtx.html