Skip to content

sticker

Jump to bottom
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();
            }
        });

TOP 金山云计算

Home

1. 基本功能说明

1.1 通用

1.2 本地文件导入

1.3 录制

1.4 预编辑

1.5 编辑

1.6 合成

1.7 上传

1.8 播放

2. 进阶功能说明

2.1 付费功能

2.2 进阶操作

3. DEBUG指导

4. API接口速查

5. 联系我们

金山云计算

Clone this wiki locally