2 * Vector Speach Balloon Test
\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
33 PADDING_TOP = TAIL_HEIGHT,
\r
34 PADDING_LEFT = TAIL_HEIGHT,
\r
35 ACCURACY = 1; // 有効少数桁
\r
38 var w = parseFloat( WIDTH.value),
\r
39 h = parseFloat( HEIGHT.value),
\r
40 a = parseFloat( ANGLE.value);
\r
42 if( !w || !h || w < 1 || h < 1){
\r
46 HEIGHT.value = ''+h;
\r
52 rad0 = deg0 * Math.PI / 180,
\r
54 startX, startY, endX, endY,
\r
55 _startX, _startY, _endX, _endY,
\r
57 tailX = rx +( rx +TAIL_HEIGHT) * Math.cos( rad0),
\r
58 tailY = ry +( ry +TAIL_HEIGHT) * Math.sin( rad0);
\r
61 * tailの太さをTAIL_WIDTHに一致させるため、0.1づつ角度を変えて太さを計算
\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
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
76 Math.pow( ( _startX -_endX), 2) + Math.pow( ( _startY -_endY), 2)
\r
79 _d = Math.abs( l -TAIL_WIDTH);
\r
80 if( i !== 0 && d < _d){
\r
82 * TAIL_WIDTHとの差が増分になった段階でループの終了
\r
92 drawSVG( tailX, tailY, startX, startY, rx, ry, endX, endY);
\r
95 tailX *10, tailY *10,
\r
98 startX *10, startY *10,
\r
103 function drawSVG( tailX, tailY, startX, startY, rx, ry, endX, endY){
\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
110 cround( endX +PADDING_LEFT) + l + cround( endY +PADDING_TOP),
\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
119 function drawVML( tailX, tailY, startX, startY, rx, ry, endX, endY, w, h){
\r
121 round = Math.round,
\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
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
137 VML_SRC.value = path;
\r
138 VML_SIZE.innerHTML = VML_PATH.offsetHeight || VML_PATH.height;
\r
141 function cround( v, r){
\r
143 return Math.round(v*Math.pow(10.0,r))/Math.pow(10.0,r);
\r
147 redraw: function(){
\r
154 window.onload = test.redraw;
\r