DataV:カスタマイズされた背景

設定パネル

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

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

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

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

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

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

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

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

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

• フィレット: ウィジェットのフィレットスタイルを指定します。 グラデーション境界線またはイメージ境界線が適用されると、フィレットは無効になります。

  • フィレット制御: 全体とカスタムを含むフィレット制御モードを設定します。

  • 角度: フィレットの角度。 [全体] を選択すると、四隅の角度を同時に設定できます。 [カスタム] を選択すると、左上隅、左下隅、右上隅、右下隅など、ウィジェットの丸みを帯びた角のサイズを設定できます。

• 塗りつぶし: カスタマイズされた背景の塗りつぶしスタイルを設定します。 スタイルを追加または削除するには、右側のまたはアイコンをクリックします。 またはアイコンをクリックして、複数のスタイルの配置を設定します。 アイコンをクリックして選択したスタイル設定をコピーし、同じ設定のスタイルを追加します。

• 枠線: カスタマイズされた背景の枠線スタイルを設定します。 左側のアイコンをクリックして、枠線スタイルの表示または非表示を制御できます。

  • 枠の種類: 枠の種類を設定します。 境界線の種類は、ソリッドカラー、グラデーション、またはイメージです。

  • 枠の設定: 枠の種類を選択すると、設定項目が変更されます。 ボーダータイプを画像に設定した場合、設定方法に応じて異なるボーダー設定が表示されます。

• filter: ウィジェットの境界線のぼかし度。 単位: ピクセル。

• 背景フィルター: ウィジェットの背景がぼやけている程度。 単位: ピクセル。 このオプションは、ChromeブラウザでExperimental Web Platform機能が有効になっている場合にのみ有効になります。

  ChromeブラウザのExperimental Web Platform機能を開くには、次の手順を実行します。

  1. chromeブラウザでChrome: // flags/#enable-experimental-web-platform-featuresを入力します。

  2. 最初の [Experimental Web Platform features] の右側にあるドロップダウンリストをクリックし、[Enabled] を選択します。

  3. ブラウザを再起動します。

• ハイパーリンク設定: 画像をクリックすると、指定したハイパーリンクに移動できます。

  • ハイパーリンク: ハイパーリンク。

  • ウィンドウを開く: アイコンをクリックして、新しいウィンドウで現在のハイパーリンクを開くかどうかを制御します。

データパネル

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

相互作用パネル

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

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

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

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

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" } };