SVGを使用して線や図形を描画したい

画面表示 - 線描

SVGを使用して線や図形を描画したい

Biz/Browser DTでは、SVGを画像データとして扱うことが可能です。
SVGを記述したXmlDocumentオブジェクトをLabelオブジェクトのimageプロパティに設定することで線や図形が描画されます。
また、SVGファイルを取り込んでLabelオブジェクト上に表示させることも可能です。

【実行結果】

１．XmlDocumentクラスを使用して定義する場合

Form form1 {
    x = 0;
    y = 0;
    width = 800;
    height = 600;

    # SVGデータ
    xmlDocument xmldoc << xml <<-    
    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
        "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="300" height="300">
    <polygon points="50,5 20,99 95,39 5,39 80,99" fill="yellow"/>
    <circle cx="150" cy="200" r="90" stroke="black" stroke-width="1" fill="blue" />
    <line x1="100" y1="30" x2="280" y2="30" stroke="red" y="10" stroke-width="1" />
    <line x1="200" y1="5" x2="260" y2="180" stroke="black" stroke-width="3" stroke-dasharray="8 8" />
    </svg>
    ->>;

    Label label1 {
        x = 32;
        y = 72;
        width = 325;
        height = 320;
        border = BORDER_PLANE;
        #SVGデータを設定
        image = ^.xmldoc;
    }

    if (!Application.DESIGNTIME) {
        # ここに初期化処理を記述してください。
    }
}

２．任意のSVGファイルを取り込む場合

Form form2 {
    x = 0;
    y = 0;
    width = 800;
    height = 600;

    xmlDocument xmldoc;
 
    Label label1 {
        x = 32;
        y = 32;
        width = 300;
        height = 300;
    }

    if (!Application.DESIGNTIME) {
        # 任意のSVGファイルを用意してお試しください
        # SVGファイルを取り込み、Label上に表示する
        xmldoc.get("sample.svg");
        label1.image = xmldoc;
    }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ