ワードアート - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

ショートビデオSDKは、さまざまな機能、製品レベルのインタラクション、およびミュージックビデオ (MV) 、ステッカー、バブル、ワードアートを含む豊富なビデオマテリアルライブラリを提供します。ショートビデオSDKを使用すると、さまざまなシナリオや業界の材料要件を満たすカスタムエフェクトを作成することもできます。このトピックでは、ワードアートの設定方法について説明します。

概要

ワードアートは字幕に基づく効果です。ワードアートリソースパッケージフォルダーには、config.jsonというワードアート構成ファイルといくつかの画像素材が含まれています。ショートビデオSDKが提供する編集API操作を使用して、ワードアートリソースパッケージのフォルダーを指定することで、ワードアート効果を適用できます。

完全なワードアートリソースパッケージには、次の部分が含まれています。

config.json: ワードアート構成ファイル。このファイルは必須です。設定ファイルの設定方法の詳細については、「config.jsonのパラメータ」をご参照ください。
icon.png: アートのサムネイルという言葉。このファイルはオプションです。
lieheng.png: ワードアートのテクスチャ。このファイルはオプションです。設定ファイルで対応する設定が行われている場合は、このテクスチャに基づいてワードアート効果を設定できます。

ワードアートリソースパッケージの設定

次の表に、config.jsonファイルのパラメーターを示します。

表 1. config.jsonのパラメータ

パラメーター	データ型	必須／任意	説明
version	String	必須	バージョン番号。デフォルト値：1。
color	String	必須	フォントの色。フォーマット: #AARRGGBBまたは# RRGGBB。
テクスチャ	String	任意	ワードアートのテクスチャ。 JPGおよびPNG形式のみがサポートされています。このファイルは、config.jsonと同じフォルダに配置する必要があります。各単語のテクスチャは同じです。テキストとテクスチャが重なる部分が適用されます。
outline1	JSONObject	必須	最初のレイヤーのアウトライン。 outline1の属性の詳細については、「アウトライン属性」をご参照ください。
outline2	JSONObject	任意	第2層のアウトライン。このアウトラインはoutline1と同じデータ構造を持っています。 outline2の属性の詳細については、「アウトライン属性」をご参照ください。

outline1とoutline2の属性を次の表に示します。

表 2. アウトライン属性

属性	データ型	必須／任意	説明
type	String	必須	フォントのタイプ。デフォルト値はnormalです。つまり、システムフォントが使用されます。
data	JSONArray	必須	アウトラインの色と幅。詳細については、「データ属性のサブ属性」をご参照ください。 type属性をnormalに設定すると、data属性に対して最大3つのカラー設定を行うことができます。 3つ以上のカラー構成が存在する場合、最初の3つのカラー構成のみが有効になります。

次の表に、data属性のサブ属性を示します。

表 3. データ属性のサブ属性

サブ属性	データ型	必須／任意	説明
color	String	必須	アウトラインの色。フォーマット: #AARRGGBBまたは# RRGGBB。
width	float	必須	アウトラインの幅。有効値: 0 ~ 64。 next data属性の幅は、この値より大きくなければなりません。注: すべてのアウトラインについて、データ属性の幅は前のデータ属性の幅より大きくなければなりません。

例: width of data5 > width of data4 > width of data3 > width of dataa2> width of data1 次のサンプルコードを参照してください。

{    
  "outline1": {
    "type": "normal" 、
    "data":[ // data1
      {
        "color": "#5350DD" 、
        「幅」: 2    
      },
      {// data2
        "color": "#B5FAA7" 、
        「幅」: 4  
      }
    ]
  },
  "outline2": {
    "type": "normal" 、
    "data":[ 
      {// data3
        "カラー": "#6E58F8" 、
        「幅」: 8
      },
      {// data4
        "color": "#69F88C" 、
        「幅」: 10
      },
      {// data5
        "カラー": "#FA55D8" 、
        「幅」: 12
      }
    ]
  }
}

設定例

この例では、次のアートという単語を使用します。デモパッケージをダウンロードするには、effect.zipをクリックします。サンプルワードアート

デモパッケージのフォルダ構造:
â ─ ─ config.json
â ─ ─ icon.png
└ ─ ─ lieheng.png

次のコードは、config.jsonの設定方法を示しています。

{
  "version": 1、
  "カラー":"#000000" 、
  "texture": "lieheng.png" 、
  "outline1": {
    "type": "normal" 、
    "data":[
      {
        "color": "#ffffff" 、
        「幅」: 8
      }
    ]
  },
  "outline2": {
    "type": "normal" 、
    "data":[
      {
        "カラー": "#000000" 、
        「幅」: 15
      }
    ]
  }
}

短いビデオSDKでワードアートを使用する

ワードアートは、ビデオを編集するときにのみ使用できます。

Android
AliyunPasterControllerCompoundCaption.setFontEffectTemplateメソッドを呼び出して、ワードアート効果を適用します。詳細については、「字幕とアニメーションステッカーの構成」をご参照ください。
iOS
AliyunCaptionStickerController.setFontEffectTemplateメソッドを呼び出して、ワードアート効果を適用します。詳細については、「字幕とアニメーションステッカーを設定する」をご参照ください。