test/SpeachBalloonTest/index.html

   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">
   3     <head>
   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>
  11     </head>
  12         <style type="text/css">
  13                 v\:* {
  14                         behavior:       url(#default#VML);
  15                         display:        block;
  16                 }
  17
  18                 .ActiveX-Enabled .detectActiveX {
  19                         display: none;
  20                 }
  21
  22                 .preview-wrapper {
  23                         float:          left;
  24                         height:         600px;
  25                 }
  26                 .preview {
  27                         width:          400px;
  28                         border:1px solid #ccc;
  29                 }
  30         </style>
  31
  32     <body>
  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();">°
  38                 </form>
  39
  40                 <div style="overflow: auto;">
  41                         <div class="preview-wrapper">
  42                                 <h2>SVG</h2>
  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="" />
  46                                         </svg>
  47                                 </div>
  48                                 <p id="svg_src"></p>
  49                                 <p id="svg_size"></p>
  50                         </div>
  51
  52                         <div class="preview-wrapper">
  53                                 <h2>VML</h2>
  54                                 <div class="preview">
  55                                         <div id="vml_preview"></div>
  56                                 </div>
  57                                 <p class="detectActiveX">ActiveX disaled!</p>
  58                                 <textarea id="vml_src" style="width:400px;height:6em;"></textarea>
  59                                 <p id="vml_size"></p>
  60                         </div>
  61                 </div>
  62
  63                 <!--
  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 により新しいサブパスが開始される。
  68                 -->
  69                 <div style="clear: both;"></div>
  70                 <h2>注意</h2>
  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>
  77
  78                 <!--[if lt IE 9]>
  79                         <script language="JavaScript">
  80                                 (function(){
  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;})(),
  84                                                 x = (function(){
  85                                                         try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
  86                                                         return t ? 'ActiveX-Enabled' : null;
  87                                                 })();
  88                                         if( x && !b.className.match(x)){
  89                                                 b.className += ( b.className.length === 0 ? '' : ' ') +x;
  90                                         }
  91                                 })();
  92                         </script>
  93                 <![endif]-->
  94
  95                 <script type="text/javascript" src="main.js"></script>
  96     </body>
  97 </html>