评论

微剪 1.4.2 来了——多段拍摄、动态贴纸、多样字体,更多功能等你来玩

微剪1.4.0版本发布啦!本期新增了炫酷多样的新功能,包括动态贴纸、文字字体、任意拖拽缩放、多段拍摄等,接入便捷、体验更丰富。

微剪1.4.2版本发布啦!本期新增了炫酷多样的新功能,拍摄编辑体验更加丰富,快一起和小编来看看吧。

相机多段拍摄、切换滤镜

倒计时拍摄

动态贴纸


文字字体

拖拽旋转缩放

动态编辑

升级新功能

如果你之前没有尝试接入过微剪,可以先移步基础功能介绍和接入了解如何快速接入。

集成方式升级

直接接入微剪最新版或升级插件至最新版即刻享受所有新功能。

组件化方式升级

组件化方式接入教程请移步官方文档-Demo 体验与源码解读

升级相机

插件升级至1.4.0版本,将wj-camera组件的mode属性改为advanced,即可自动开启高级相机。

<wj-camera
	id="camera"
  mode="advanced">
</wj-camera>

接入贴纸

新版本内置了大量贴纸,同时封装了统一资源获取方式,通过此方式可以在开发者小程序中获取到微剪默认提供的所有资源,无需自行准备。详情和参考官方文档-内置资源

app.js:

var myPluginInterface = requirePlugin('myPlugin');

App({
  onLaunch: function () {
    let resources = myPluginInterface.resources
    global['resources'] = resources
    let {
      filters,
      effects,
      fonts,
      stickers
    } = resources
  }
})

获取到sticker列表之后,只需在初始化Clip时传入贴纸的key,即可在播放器中实时加载渲染贴纸。

let stickerclip = new global['wj-types'].Clip({
     id: 'my-sticker',
     type: 'sticker',
     section: {
       start: 0,
       end: 10,
       duration: 10
     },
     designSize: {
        xPercent: 0.20, //初始位置
        yPercent: 0.30,
        rotation: 0.4, // 旋转角度(单位弧度)
        scale: 2 // 缩放尺寸
     },
     startAt: 0,
     key: 'guodong',  // 贴纸key
   })
let stickerTrack1 = new global['wj-types'].Track({
  type: 'sticker',
  clips: [stickerclip]
})
playerInstance.updateData(oldTracks.concat(stickerTrack1))

字体

上一节中获取到的内置资源也包含微剪内置的字体文件。

  • 加载字体:

    wx.loadFontFace({
       family: 'fangzhengyouhei',
        source: "https://fontPath",
        scopes: ['webview','native'],
        success(res) {
          console.log('font success')
          console.log(res.status)
          resolve()
        },
        fail: function(res) {
          console.log('font fail')
          console.log(res.status)
          reject()
        }
    });
    
  • 构造Clip

      let mytext = new global['wj-types'].Clip({
              type: 'text',
              content: {
                content: "文字", // 文字内容
                style: {
                  type: 'background', // 文字样式
                  color: '#ffffff', // 文字颜色
                  backgroundColor: '#ff00ff',
                  fontfamily: 'fangzhengyouhei',
                  fontloaded: true
                },
                position: {
                  x: 50,
                  y: 90
                },
              },
              section: {
                start: 0,
                end: 10,
                duration: 10
              },
              
            })
      let textTrack = new global['wj-types'].Track({
      type: 'text',
      clips: [mytext]
    })
    playerInstance.updateData(oldTracks.concat(textTrack))
    

文字和贴纸均支持开发者自行定制以及缩放旋转和动态编辑功能,更多用法和优化,可参考自定义贴纸和字体编辑控件

还在等什么呢,快来0成本接入微剪,体验小程序端的视频剪辑吧。

最后一次编辑于  10-29  
点赞 2
收藏
评论

3 个评论

  • wang li
    wang li
    10-29

    666

    10-29
    赞同
    回复
  • 神马
    神马
    10-29

    视频里可以加动态图片?

    10-29
    赞同
    回复 1
    • 神马
      神马
      10-29
      卧槽,试下下还真是动态的
      10-29
      1
      回复
  • 小样
    小样
    10-29

    哇,正好需要多段拍摄诶,给力哈

    10-29
    赞同
    回复
登录 后发表内容