1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html xmlns:v="urn:schemas-microsoft-com:vml">
4 <meta http-equiv="Content-Language" content="ja">
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <meta http-equiv="Content-Style-Type" content="text/css">
7 <meta http-equiv="Content-Script-Type" content="text/javascript">
8 <meta http-equiv="imagetoolbar" content="no">
9 <meta http-equiv="X-UA-Compatible" content="IE=6">
10 <title>Vector Speach Balloon Test</title>
12 <style type="text/css">
14 behavior: url(#default#VML);
18 .ActiveX-Enabled .detectActiveX {
28 border:1px solid #ccc;
33 <h1>Vector Speach Balloon Test</h1>
34 <form name="param" action="#" onsubmit="test.redraw();">
35 <label for="width">WIDTH:</label><input type="text" name="width" value="100" onchange="test.redraw();" onkeypress="test.redraw();">px
36 <label for="height">HEIGHT:</label><input type="text" name="height" value="100" onchange="test.redraw();" onkeypress="test.redraw();">px
37 <label for="angle">ANGLE:</label><input type="text" name ="angle" value="100" onchange="test.redraw();" onkeypress="test.redraw();">°
40 <div style="overflow: auto;">
41 <div class="preview-wrapper">
43 <div class="preview" id="svg_wrap">
44 <svg xmlns="http://www.w3.org/2000/svg" height="400" width="400" id="svg_preview">
45 <path id="path" fill="white" stroke="black" stroke-width="1.5" d="" />
52 <div class="preview-wrapper">
55 <div id="vml_preview"></div>
57 <p class="detectActiveX">ActiveX disaled!</p>
58 <textarea id="vml_src" style="width:400px;height:6em;"></textarea>
64 ae angleellipseto 6* 中心 (x,y), サイズ (w,h), 開始角、終了角。これらのパラメータを使って記述する楕円のセグメントを描画する。セグメントの開始点へ現在点から直線が描画される。
65 al angleellipse 6* セグメントの開始点への黙示的な moveto があることを除き、angleellipseto と同じである。
66 at arcto 8* left, top, right, bottom, 開始点 (x,y), 終了点 (x,y)。最初4つの値は楕円の境界ボックスを定義する。最後4つは2本の半径ベクトルを定義する。描画されるのは、開始半径ベクトルで定義される角で開始し、終了ベクトルで提議される角で終了する楕円のセグメントである。弧の開始点へ現在点から直線が描画される。弧はつねに反時計回り方向に描画される。
67 ar arc 8* left, top, right, bottom, 開始点 (x,y), 終了点 (x,y)。arcto と同じであるが、弧の開始点への黙示的な moveto により新しいサブパスが開始される。
69 <div style="clear: both;"></div>
71 <p>小数点以下を切り捨てると、図形のかたちが大きく変わってしまう。小数点以下1~2桁でまるめるくらいだと変わらない。</p>
72 <p>ie8でVMLはスタンダードモードでは動作しない。</p>
73 <p>多分、nLiteでベクター画像のサポートを切るとieでvmlが表示できない。</p>
74 <p>svgやxmlはページのDomReady時(img読み込み前)に、対応ブラウザならjsで差し替える感じかな。imgの読み込みをどこまで抑止できるか??</p>
75 <p>vmlは座標を無視して隙間を詰めてしまう。仕方ないので、その親にmarginを設定。tailX,tailYを見て適宜に補正する。(11/08/30)</p>
76 <p>Vectorサポートの調査の方法。svgもしくはvmlを描画した後に、SVG_WRAP.offsetHeight || SVG_WRAP.heightを見る、という直球な感じでできた。チェック方法がいまいちwebで見つからない。。。(11/09/04)</p>
79 <script language="JavaScript">
81 //http://allabout.co.jp/gm/gc/24117/2/
82 //window.onloadを待たずにDOM処理を開始する
83 var b = document.body || (function(){document.write('<body>');return document.body;})(),
85 try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
86 return t ? 'ActiveX-Enabled' : null;
88 if( x && !b.className.match(x)){
89 b.className += ( b.className.length === 0 ? '' : ' ') +x;
95 <script type="text/javascript" src="main.js"></script>