Skip to content

sticker

zanxiaofei edited this page Nov 28, 2017 · 8 revisions

贴纸

本页介绍1.2.2及以上版本贴纸的使用

1. 功能说明

SDK内部当前提供两种形式的贴纸,同时对贴纸提供片段编辑的功能,可以将贴纸添加到视频的任意时间段:

  1. 静态图片贴纸
  2. 字幕贴纸(包含无背景字幕和气泡(有背景)字幕)
  3. 动态贴纸(gif&webp格式)

2. 关键类说明

2.1 SDK内部提供相关类

  • KSYStickerView 贴纸预览控件,提供贴纸的预览、添加、删除、片段编辑功能
  • StickerHelpBoxInfo 贴纸辅助区域的画笔,用于提供贴纸辅助区域的删除、旋转按钮及辅助区域绘制Paint
  • KSYStickerInfo 贴纸配置信息,包含DrawTextParams(字幕贴纸配置信息)、贴纸背景图、贴纸开始显示时间、贴纸持续时长,贴纸类型
public class KSYStickerInfo {
    public static final int STICKER_TYPE_IMAGE = 1;   //图片贴纸
    public static final int STICKER_TYPE_TEXT = 2;   //字幕贴纸
    public static final int STICKER_TYPE_IMAGE_ANIMATE = 4;    //动态贴纸

    public DrawTextParams textParams; //字幕贴纸配置信息
    public Bitmap bitmap;  //贴纸的背景图(图片贴纸显示的图片信息或者气泡字幕的背景图)
    public long startTime; //贴纸的开始显示时间 
    public long duration;  //贴纸的持续时间
    public boolean stickerType;  //贴纸类型
    public String animateUrl;  //动态贴纸文件路径
}
  • DrawTextParams 字幕贴纸的配置信息,包含字幕内容、画笔、字幕颜色、气泡字幕的有效区域
public class DrawTextParams {
    public static final int DEFAULT_TEXT_SIZE = 80;
    public float text_left_padding;      //0~1.0f  气泡字幕左方不可写区域比例
    public float text_right_padding;     //0~1.0f  气泡字幕右方不可写区域比例
    public float text_top_padding;       //0~1.0f  气泡字幕上方不可写区域比例
    public float text_bottom_padding;   //0~1.0f  气泡字幕下方不可写区域比例
    public boolean autoNewLine = false;    //是否超出背景宽度时自动换行,只有有背景图片时才会生效
    public TextPaint textPaint;  //字幕画笔
    public String text;  //字幕内容
}
  • OnStickerStateChanged 贴纸状态回调
   public interface OnStickerStateChanged {
        //index标记被选中的贴纸,text标记是字幕内容(若不为字幕贴纸,则为null)
        void selected(int index, String text);  //某个贴纸被选择
        void deleted(List<Integer> index, String text); //某个贴纸被删除
    }

2.2 Demo 关键类说明

  • SectionSeekLayout 片段编辑时区域选择的交互UI,可滑动选择起始时间、结束时间和片段长度,提供选择的回调接口
  • StickerAdapter 贴图列表适配器
  • ColorPicker 字幕颜色选择器

3. 贴纸使用说明

3.1 添加预览贴纸控件

在编辑预览的xml中添加KSYStickerView控件来进行贴纸的预览,并需要将该对象设置给SDK内部

所有贴纸只需要添加一个View即可

    //xml中添加控件
        <com.ksyun.media.shortvideo.view.KSYStickerView
            android:id="@+id/sticker_panel"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:visibility="gone"/>  
    //获取控件实例
    mKSYStickerView = (KSYStickerView) findViewById(R.id.sticker_panel);
    //设置给SDK内部
    mEditKit.addStickerView(mKSYStickerView);

3.2 创建辅助区域必要对象

创建StickerHelpBoxInfo实例,以备添加贴纸使用

 if(mStickerHelpBoxInfo == null) {
                mStickerHelpBoxInfo = new StickerHelpBoxInfo();
                mStickerHelpBoxInfo.deleteBit = mStickerDeleteBitmap;  //删除按钮
                mStickerHelpBoxInfo.rotateBit = mStickerRotateBitmap;  //旋转按钮
                //辅助区域画笔
                Paint helpBoxPaint = new Paint();
                helpBoxPaint.setColor(Color.BLACK);
                helpBoxPaint.setStyle(Paint.Style.STROKE);
                helpBoxPaint.setAntiAlias(true);  //抗锯齿
                helpBoxPaint.setStrokeWidth(4);     //宽度
                mStickerHelpBoxInfo.helpBoxPaint = helpBoxPaint;
            }

3.3 图片贴纸

3.3.1 添加图片贴纸

调用KSYStickerView的addSticker(KSYStickerInfo info, StickerHelpBoxInfo helpInfo)接口用于添加贴纸,示例如下:

           //进入贴纸编辑状态,需要先暂停预览播放
            pausePreview();
            //KSYStickerInfo 创建贴纸配置信息
            KSYStickerInfo info = new KSYStickerInfo();
            initStickerHelpBox();
            info.bitmap = getImageFromAssetsFile(path);  //贴纸背景
            info.startTime = Long.MIN_VALUE;   //贴纸的开始时间,此处为从预览播放开始
            info.duration = mEditKit.getEditDuration();  //贴纸的持续时间,此处为整个预览的时长
            info.stickerType = KSYStickerInfo.STICKER_TYPE_IMAGE; //是否是图片贴纸  
            //添加一个贴纸
            int index = mKSYStickerView.addSticker(info, mStickerHelpBoxInfo);
            //选择下一个贴纸时,让上一个贴纸生效(如果之前已选择贴纸)
            if (mSectionView.isSeeking()) {
                mSectionView.calculateRange();
            }
            //开始当前贴纸的片段编辑,传入贴纸的唯一标识作为片段编辑的贴纸标记
            mSectionView.startSeek(index);

3.3.1 删除图片贴纸

  • 删除单个贴纸(所有贴纸共用)
 // 删除贴纸,id为贴纸的唯一标识
mKSYStickerView.removeSticker(id);
  • 删除所有图片贴纸
 mKSYStickerView.removeBitmapStickers();

3.3.2 更新贴纸显示时间

(所有贴纸共用)

//id为贴纸的唯一标识, start为贴纸显示开始时间、end - start为贴纸持续时长  
mKSYStickerView.updateStickerInfo(index, start, end - start);  

3.3.2 更新预览贴纸的显示

(所有贴纸共用)

//暂停播放后,seek后,更新预览贴纸的显示
mKSYEdit.updateStickerDraw()

3.4 字幕贴纸

3.4.1 添加字幕贴纸

调用KSYStickerView的addSticker(KSYStickerInfo info, StickerHelpBoxInfo helpInfo)接口用于添加字幕贴纸,示例如下:

    KSYStickerInfo params = new KSYStickerInfo();
            //进入字幕编辑状态,需要先暂停预览播放
            pausePreview();
            //字幕贴纸的文字相关信息
            DrawTextParams textParams = new DrawTextParams();
            textParams.textPaint = new TextPaint();
            textParams.textPaint.setTextSize(DrawTextParams.DEFAULT_TEXT_SIZE);
            textParams.textPaint.setColor(mKSYStickerView.getCurrentTextColor());
            textParams.textPaint.setTextAlign(Paint.Align.LEFT);
            textParams.textPaint.setStyle(Paint.Style.FILL);
            textParams.textPaint.setAntiAlias(true);
            textParams.text = mTextInput.getText().toString().trim();
            textParams.autoNewLine = false;

            //气泡字幕贴纸的文字有效范围限制
            if (path.contains("3")) {
                textParams.text_left_padding = 0.11f;
                textParams.text_right_padding = 0.17f;
                textParams.text_top_padding = 0.35f;
                textParams.text_bottom_padding = 0.23f;
            }

            if (path.contains("1")) {
                //添加无背景的字幕
                params.bitmap = null;
                if (TextUtils.isEmpty(textParams.text)) {
                    mTextInput.setText("input text");
                    textParams.text = mTextInput.getText().toString().trim();
                }
            } else {
                params.bitmap = getImageFromAssetsFile(path);
            }

            params.textParams = textParams;
            params.startTime = Long.MIN_VALUE;
            params.duration = mEditKit.getEditDuration();
            params.stickerType = KSYStickerInfo.STICKER_TYPE_TEXT;  //是否是字幕贴纸

            int index = mKSYStickerView.addSticker(params, mStickerHelpBoxInfo);
            // 选择下一个字幕时让前一个字幕生效(如果之前已选择一个字幕)
            if (mSectionView.isSeeking()) {
                mSectionView.calculateRange();
            }
            //开始当前字幕的片段编辑
            mSectionView.startSeek(index);

3.4.2 删除字幕贴纸

  • 删除单个贴纸(所有贴纸共用)
 // 删除贴纸,id为贴纸的唯一标识
mKSYStickerView.removeSticker(id);
  • 删除所有字幕贴纸
 mKSYStickerView.removeTextStickers();

3.4.3 更新贴纸显示时间

(所有贴纸共用)

//id为贴纸的唯一标识, start为贴纸显示开始时间、end - start为贴纸持续时长  
mKSYStickerView.updateStickerInfo(index, start, end - start);  

3.4.4 更新预览贴纸的显示

(所有贴纸共用)

//暂停播放后,seek后,更新预览贴纸的显示
mKSYEdit.updateStickerDraw()

3.4.5 更新当前字幕贴纸文字内容

mKSYStickerView.setCurrentText(text)

         String text = editable.toString().trim();
            if (!mKSYStickerView.setCurrentText(text)) {
                //返回false,当前并无被选中的字幕
                Toast.makeText(EditActivity.this, "请先选择字幕类型", Toast.LENGTH_SHORT).show();
            }

3.4.6 更新当前字幕贴纸文字颜色

  //只有字幕贴纸该设置才会生效
        mKSYStickerView.setCurrentTextColor(newColor);

3.5 动态贴纸

若使用动态贴纸功能,需要添加动态贴纸对于fresco的依赖,同时对freso进行初始化

    // 初始化fresco库,用来支持动态贴纸功能,若不使用,可以不调用
    Fresco.initialize(this);
    //动态贴纸依赖库,若不使用,使用provided
    compile 'com.facebook.fresco:fresco:1.4.0'
    compile 'com.facebook.fresco:animated-gif:1.4.0'
    compile 'com.facebook.fresco:animated-webp:1.4.0'

3.5.1 添加动态贴纸

调用KSYStickerView的addSticker(KSYStickerInfo info, StickerHelpBoxInfo helpInfo)接口用于添加贴纸,示例如下:

          //进入贴纸编辑状态,需要先暂停预览播放
            pausePreview();
            StringBuilder urlInfo = new StringBuilder("assets://AnimatedStickers/gif/1.gif");
            KSYStickerInfo info = new KSYStickerInfo();
            initStickerHelpBox();

            info.startTime = Long.MIN_VALUE;
            info.duration = mEditKit.getEditDuration();
            info.animateUrl = urlInfo.toString();
            info.stickerType = KSYStickerInfo.STICKER_TYPE_IMAGE_ANIMATE; //是否是动态贴纸
            //添加一个贴纸
            int index = mKSYStickerView.addSticker(info, mStickerHelpBoxInfo);
            // 选择下一个贴纸时让前一个贴纸生效(如果之前已选择一个贴纸)
            if (mSectionView.isSeeking()) {
                mSectionView.calculateRange();
            }
            //开始当前贴纸的片段编辑
            mSectionView.startSeek(index);

若导入SD卡的贴纸需要添加前缀在文件路径基础上添加前缀"file://",例如在sdcard根目录下文件名为1.gif的文件,路径应该如下设置:

info.animateUrl = "file:///sdcard/1.gif";

3.3.1 删除动态贴纸

  • 删除单个贴纸(所有贴纸共用)
 // 删除贴纸,id为贴纸的唯一标识
mKSYStickerView.removeSticker(id);

3.3.2 更新贴纸显示时间

(所有贴纸共用)

//id为贴纸的唯一标识, start为贴纸显示开始时间、end - start为贴纸持续时长  
mKSYStickerView.updateStickerInfo(index, start, end - start);  

3.3.2 更新预览贴纸的显示

(所有贴纸共用)

//暂停播放后,seek后,更新预览贴纸的显示
mKSYEdit.updateStickerDraw()

3.6 部分demo接口说明

StickerAdapter.OnStickerItemClick 贴纸选择区域某个贴纸被选择
SectionSeekLayout.OnSectionSeekListener 片段信息变更回调

        //片段信息变更回调
        mSectionView.setOnSectionSeekListener(new SectionSeekLayout.OnSectionSeekListener() {
            @Override
            public void onRangeChanged(int index, long start, long end) {
                // 更新贴纸显示时间区间
                mKSYStickerView.updateStickerInfo(index, start, end - start);
            }
            @Override
            public void removeSticker(int id) {
                // 删除贴纸
                mKSYStickerView.removeSticker(id);
            }
            @Override
            public void onPausePreview() {
                //在片段编辑区域滑动时暂停播放  
                onPauseClick();
            }
            @Override
            public void onSeekTo(long time) {
                //在片段编辑区域滑动介结束后,seek预览区域并且更新贴纸的绘制 
                mEditKit.seekTo(time);
                mEditKit.updateStickerDraw();
            }
        });
Clone this wiki locally