すべてのプロダクト
Search

このプロダクト

    DataV:宝くじホイール

    ドキュメントセンター

    DataV:宝くじホイール

    最終更新日:Jul 16, 2024

    このトピックでは、ターンテーブル描画ウィジェットのグラフスタイルと各設定項目の意味について説明します。

    チャートスタイル

    ターンテーブルドローは、ターンテーブル上の賞品のランダムな描画をシミュレートするために使用されるコンポーネントです。 image

    設定

    image

    • 検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。

    • Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする锁定长宽比按键と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

    • 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

    • 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

      • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

      • アイコンの圆圈旋转控制图标黒い点をドラッグして、ウィジェットの回転角度を制御します。

      • アイコンをクリックし左右翻转图标て、ウィジェットスタイルを反転します。

      • アイコンをクリックし上下翻转图标て、ウィジェットスタイルを反転します。

    • Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

    • 回転時間: ターンテーブル描画ウィジェットの回転時間。 単位：ミリ秒。

    • リング: 指定された回転時間内にターンテーブル描画コンポーネントが回転する必要のある回転数をサイクル単位で設定します。

    • ボタン: ダイヤル描画ウィジェットボタンのスタイル。

      パラメーター

      説明

      ボタンサイズ

      ボタンの幅と高さを含むボタンのサイズ。 単位: ピクセル

      垂直間隔

      ボタンとコンポーネントダイヤルの中心点の間の垂直距離を設定します。 単位: ピクセル

      ボタン画像

      ボタン画像の内容をカスタマイズします。 リモートサーバーで画像を使用するには、右上隅に画像のURLを入力します。 画像ボックスで [プレビュー] をクリックして、画像形式をプレビューします。 画像ボックスの下にある破線のボックスの [変更] をクリックします。 イメージデザインアセットを変更する方法の詳細については、「インターフェイスの使用」をご参照ください。

    • ターンテーブル: ターンテーブル宝くじターンテーブルの内容のスタイル。

      パラメーター

      説明

      テキストスタイル

      テキストのフォントスタイル、テキストの太さ、フォントサイズのサイズ、テキストの色の選択など、ダイヤル内のテキストのスタイル。

      テキスト間隔

      文字盤のテキストとテキストの間の距離。 単位: ピクセル。

      列の高さ

      テキストが壊れているときの行の高さの値を設定します。 単位: ピクセル

      改行

      テキストの行の文字数を指定します。 行の文字数が指定された値より大きい場合、行は中断されます。

      ファン色

      カルーセルの各シリーズのファンカラースタイルを設定します。 右側の加号图标または垃圾桶图标アイコンをクリックして、カラーシリーズを追加または削除します。 横排列图标または竖排列图标アイコンをクリックして、複数のカラーシリーズの配置スタイルを設定します。 アイコンをクリックし复制图标て現在のカラーシリーズ構成をコピーし、同じ構成の新しいカラーシリーズを追加します。

      色: 現在のシリーズのカルーセルの対応するモジュールのセクターの塗りつぶしの色を設定します。

      賞品画像が表示されています

      スイッチをオンにすると、ターンテーブル内の対応するモジュールの賞品画像がターンテーブルに表示されます。スイッチをオフにすると、賞品画像は表示されません。

      • 画像サイズ: 画像の幅と高さを含む、賞品画像のサイズ。 単位: ピクセル。

      • 画像の間隔: 画像間の間隔。 有効な値: 水平間隔および垂直間隔。 単位: ピクセル。

      フォントアウトラインの色。

      ターンテーブル内のストロークラインの色。

      背景画像

      カルーセルの背景画像のコンテンツをカスタマイズします。 リモートサーバーで画像を使用するには、右上隅に画像のURLを入力します。 カルーセルの背景画像の大きな画像スタイルをプレビューするには、画像ボックスで [プレビュー] をクリックします。 画像ボックスの下にある破線のボックスの [変更] をクリックします。 イメージデザインアセットを変更する方法の詳細については、「インターフェイスの使用」をご参照ください。

    [データ] タブ

    image

    設定フィールドの説明

    列

    説明

    name

    賞の名前。

    imgSrc

    賞品の写真。

    [インタラクション] タブ

    image

    [描画]: [有効にする] を選択して、ウィジェット操作機能を有効にします。 カルーセル描画の描画ボタンをクリックすると、データ要求がトリガーされ、コールバック値がスローされ、カルーセル内のデータが動的に読み込まれます。 デフォルトでは、データ内のnameとimgSrcの値が返されます。 詳細については、「ティッカーボードコンポーネントのコールバックIDの設定」をご参照ください。

    Blueprint Editorでのインタラクションの設定

    1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

    2. 左上隅の蓝图图标アイコンをクリックします。

    3. Blueprint Editorで、[追加ノード] ペインで [ターンテーブル描画] コンポーネントをクリックします。 次の図に示すように、ターンテーブルの描画のパラメーターをキャンバスに表示できます。 蓝图参数

      • イベント

        イベント

        説明

        インターフェイス記述要求が完了したとき

        イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

        インターフェイス記述リクエストが失敗した場合

        データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

        [描画] をクリックすると

        宝くじボタンがクリックされたときにスローされるイベント。 ボタンに対応するオブジェクトタイプのデータ項目もスローされます。 参照データの例を次に示します。 

        return {
  "name": "", // 賞品の名前。
  "imgSrc": "" // 賞品のイメージ。
}

      • Action

        Action

        説明

        リクエストAPIの説明

        このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、アクションを記述するリクエストインターフェイスに転送されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。

        インポートインターフェイスの説明

        ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

        回し始める

        ターンテーブルの回転を開始すると、パラメータは必要ありません。

        コンポーネント設定の更新

        ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。

        表示

        ウィジェットを表示します。 参照データの例を次に示します。 

        return {
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": "linear"
};

        非表示

        次の例は、ウィジェットを非表示にする方法を示しています。 

        return {
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": "linear"
};

        暗黙の状態への切り替え

        ウィジェットを表示するか非表示にするかを指定します。 参照データの例を次に示します。 

        return {
  "animationIn": {
    "animationType": "",
    "animationDuration": 1000,
    "animationEasing": "linear"
  },
  "animationOut": {
    "animationType": "",
    "animationDuration": 1000,
    "animationEasing": "linear"
  }
};

        中国モバイル

        ウィジェットを指定した場所に移動します。 参照データの例を次に示します。 

        return {
  // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
  "positionType": "to",
  // The location, which is indicated by the x and y coordinates. 
  "attr": {
    "x": 0,
    "y": 0
  },
  // The animation type. 
  "animation": {
    "enable": false,
    // The duration in which animation is displayed. 
    "animationDuration": 1000,
    // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
    "animationEasing": "linear"
  }
};