Wijmo UI for the Web
face オプション

型: wijmo.gauge.gauge_face

ゲージのフェースと背景領域に使用する画像または形状を設定または描画します。

シンタックス
Javascript (Usage) 
$(function () {
    
    //値を取得する
    var returnsValue; //タイプ: wijmo.gauge.gauge_face
    returnsValue = $(".selector").wijradialgauge("option", "face");
    
    //値を設定します
    var newValue; //タイプ: wijmo.gauge.gauge_face
    $(".selector").wijradialgauge("option", "face", newValue);
        
});
Javascript (Specification) 
var face : gauge_face;
使用例
// 以下のサンプルでは、ゲージのフェースにカスタム画像を使用します。このサンプルで ui という名前を付けた引数は JSON オブジェクトです。// このオブジェクトは Raphael ペーパーオブジェクトのキャンバスを持つため、Raphael ペーパーの image メソッドを使用します。// このメソッドは source、x、y、width、height の 5 個のパラメーターを受け取ります。詳細については、Raphael のドキュメントを参照してください。$(document).ready(function () { $("#radialgauge1").wijradialgauge({ value: 90, radius: 120, face: { style: {}, template: function (ui) { var url = "images/customGaugeFace.png"; return ui.canvas.image(url, ui.origin.x -ui.r, ui.origin.y -ui.r, ui.r * 2, ui.r * 2); } } });});
解説
原点はゲージの中心にありますが、画像は左上から描画されるので、まず原点に基づいて左上の始点を計算し、さらにフェースの半径に基づいて幅と高さを計算します。フェースの半径は、幅と高さのうち小さい方の半分です。注: fill プロパティは Raphael フレームワークを使用して定義されます。詳細については、Raphael 要素の attr メソッドを参照してください。フェースは単色またはグラデーションで塗りつぶすことができます。デフォルトの塗りつぶしは、fill プロパティの r によって指定された放射状のグラデーションです。

関連トピック

参照

options タイプ
wijradialgauge メソッド

 

 


Copyright © GrapeCity inc. All rights reserved.