test/SpeachBalloonTest/main.js

   1 /*\r
   2  * Vector Speach Balloon Test\r
   3  * \r
   4  *   main.js\r
   5  * \r
   6  *   version 0.1.0\r
   7  *              __________\r
   8  *             /          \\r
   9  *            /            \\r
  10  *            |,startX,Y    |\r
  11  * tailX,Y - <              |\r
  12  *            |'endX,Y      |\r
  13  *            \            /\r
  14  *                 \__________/\r
  15  * \r
  16  * \r
  17  */\r
  18 \r
  19 var test = (function(){\r
  20         var     PARAM = document.forms[ 0],\r
  21                 WIDTH = PARAM[ 'width'],\r
  22                 HEIGHT = PARAM[ 'height'],\r
  23                 ANGLE = PARAM[ 'angle'],\r
  24                 SVG_WRAP = document.getElementById( 'svg_wrap'),\r
  25                 SVG_PATH = document.getElementById( 'path'),\r
  26                 SVG_SRC = document.getElementById( 'svg_src'),\r
  27                 SVG_SIZE = document.getElementById( 'svg_size');\r
  28                 VML_PATH = document.getElementById( 'vml_preview'),\r
  29                 VML_SRC = document.getElementById( 'vml_src'),\r
  30                 VML_SIZE = document.getElementById( 'vml_size');\r
  31                 TAIL_WIDTH = 6,\r
  32                 TAIL_HEIGHT = 10,\r
  33                 PADDING_TOP = TAIL_HEIGHT,\r
  34                 PADDING_LEFT = TAIL_HEIGHT,\r
  35                 ACCURACY = 1; // 有効少数桁\r
  36         \r
  37         function draw(){\r
  38                 var     w = parseFloat( WIDTH.value),\r
  39                         h = parseFloat( HEIGHT.value),\r
  40                         a = parseFloat( ANGLE.value);\r
  41                         \r
  42                 if( !w || !h || w < 1 || h < 1){\r
  43                         return;\r
  44                 }\r
  45                 WIDTH.value = ''+w;\r
  46                 HEIGHT.value = ''+h;\r
  47                 \r
  48                 var     rx = w /2,\r
  49                         ry = h /2,\r
  50                         deg0 = a -355 +355,\r
  51                         deg1, deg2,\r
  52                         rad0 = deg0 * Math.PI / 180,\r
  53                         rad1,rad2,\r
  54                         startX, startY, endX, endY,\r
  55                         _startX, _startY, _endX, _endY,\r
  56                         d, _d, l,\r
  57                         tailX = rx +( rx +TAIL_HEIGHT) * Math.cos( rad0),\r
  58                         tailY = ry +( ry +TAIL_HEIGHT) * Math.sin( rad0);\r
  59         \r
  60         /*\r
  61          * tailの太さをTAIL_WIDTHに一致させるため、0.1づつ角度を変えて太さを計算\r
  62          */\r
  63                 for( var i=0;;i+=0.1){\r
  64                         deg1 = a -355 +355 +i;\r
  65                         deg2 = a -355 +355 -i;\r
  66                         rad1 = deg1 * Math.PI / 180;\r
  67                         rad2 = deg2 * Math.PI / 180;\r
  68                         \r
  69                         _startX = rx +Math.cos( rad1) *rx;\r
  70                         _startY = ry +Math.sin( rad1) *ry,\r
  71                         _endX = rx +Math.cos( rad2) *rx,\r
  72                         _endY = ry +Math.sin( rad2) *ry,        //円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径\r
  73                                 \r
  74                         l = Math.abs(\r
  75                                         Math.sqrt(\r
  76                                                 Math.pow( ( _startX -_endX), 2) + Math.pow( ( _startY -_endY), 2)\r
  77                                         )\r
  78                                 );\r
  79                         _d = Math.abs( l -TAIL_WIDTH);\r
  80                         if( i !== 0 && d < _d){\r
  81                                 /*\r
  82                                  * TAIL_WIDTHとの差が増分になった段階でループの終了\r
  83                                  */\r
  84                                 break;\r
  85                         }\r
  86                         d = _d;\r
  87                         startX = _startX;\r
  88                         startY = _startY;\r
  89                         endX = _endX;\r
  90                         endY = _endY;\r
  91                 }                       \r
  92                 drawSVG( tailX, tailY, startX, startY, rx, ry, endX, endY);\r
  93                 \r
  94                 drawVML(\r
  95                         tailX *10, tailY *10,\r
  96                         endX *10, endY *10,\r
  97                         rx *10, ry *10,\r
  98                         startX *10, startY *10,\r
  99                         w *10, h *10\r
 100                 );\r
 101         }\r
 102         \r
 103         function drawSVG( tailX, tailY, startX, startY, rx, ry, endX, endY){\r
 104                 var l = ',',\r
 105                         draw = [\r
 106                         'M' +cround( tailX + PADDING_LEFT) +l +cround( tailY +PADDING_TOP),\r
 107                         'L' + cround( startX +PADDING_LEFT) + l + cround( startY +PADDING_TOP),\r
 108                         'A' + rx + l + ry,\r
 109                         '0 1 1',                        // flag\r
 110                         cround( endX +PADDING_LEFT) + l + cround( endY +PADDING_TOP),\r
 111                         'z'\r
 112                 ].join( ' ');\r
 113                         \r
 114                 SVG_PATH.setAttribute( "d", draw);\r
 115                 SVG_SRC.innerHTML = draw;\r
 116                 SVG_SIZE.innerHTML = SVG_WRAP.offsetHeight || SVG_WRAP.height;\r
 117         }\r
 118         \r
 119         function drawVML( tailX, tailY, startX, startY, rx, ry, endX, endY, w, h){\r
 120                 var l = ',',\r
 121                         round = Math.round,\r
 122                         path = [\r
 123                         '<v:shape style="width:', w /10, 'px;height:', h /10, 'px;" ',\r
 124                         'coordsize="', w, l, h,\r
 125                         '" coordorigin="0,0" path="',\r
 126                         ' ar ', 0, l, 0, l, w, l, h, l,\r
 127                         round( startX), l, round( startY), l,\r
 128                         round( endX), l, round( endY),\r
 129                         ' l ', round( tailX), l, round( tailY),\r
 130                         ' x e" strokecolor="black" fillcolor="white" strokeweight="1.3" />'\r
 131                 ].join( '');\r
 132                 \r
 133                 VML_PATH.innerHTML = path;\r
 134                 VML_PATH.style.marginTop =  ( ( tailY < 0) ? Math.floor( ( 60 +tailY) /10) : 10) +'px';\r
 135                 VML_PATH.style.marginLeft = ( ( tailX < 0) ? Math.floor( ( 60 +tailX) /10) : 10) +'px';\r
 136                 \r
 137                 VML_SRC.value = path;\r
 138                 VML_SIZE.innerHTML = VML_PATH.offsetHeight || VML_PATH.height;\r
 139         }\r
 140         \r
 141         function cround( v, r){\r
 142                 r = r || ACCURACY;\r
 143                 return Math.round(v*Math.pow(10.0,r))/Math.pow(10.0,r);\r
 144         }\r
 145         \r
 146         return {\r
 147                 redraw: function(){\r
 148                         draw();\r
 149                         return false;\r
 150                 }\r
 151         }\r
 152 })();\r
 153 \r
 154 window.onload = test.redraw;\r