すべてのプロダクト
Search

このプロダクト

    DataV:境界線

    ドキュメントセンター

    DataV:境界線

    最終更新日:Jul 16, 2024

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

    チャートスタイル

    ボーダーは、メディアウィジェットの一種です。 ボーダーのタイプをカスタマイズできます。 ビジュアルアプリケーションまたはビジュアルアプリケーションのモジュールにカスタム境界線を追加して、ビジュアルアプリケーションをより美しく表示することができます。 image..png

    設定パネル

    image..png

    • [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

    • Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックするProportional resizingと、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

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

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

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

      • アイコンの黒い点をRotation control iconドラッグします。

      • アイコンをクリックして、Horizontal flipウィジェットを水平に反転します。

      • アイコンをクリックして、Vertical flipウィジェットを垂直に反転します。

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

    • フレーム: ボーダーのスタイル。 システムはあなたが選ぶことができる18のスタイルを提供します。 を選択し、ドロップダウンボックスに境界線スタイルのサムネイルを表示します。

    データパネル

    このコンポーネントはデータ設定をサポートしていません。

    相互作用パネル

    このウィジェットはインタラクションイベントをサポートしていません。

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

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

    2. ページのBlueprint Editor icon左上隅にあるアイコンをクリックします。

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

      • Event: earthレイヤーはイベントをサポートしていません。

      • ポリシーアクション

        ポリシーアクション

        説明

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

        ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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"
  }
};