当前位置: 代码迷 >> JavaScript >> 关于vml的有关问题
  详细解决方案

关于vml的有关问题

热度:118   发布时间:2012-03-09 16:54:57.0
关于vml的问题
function   test(mx,my)   {
var   cp   =   {
x:   mx,
y:   my
}
var   obj   =   document.all[ "map "];
var   drawObj   =   document.createElement( "div ");
drawObj.style.position   =   "absolute ";
drawObj.style.top   =   0;//obj.offsetTop;
drawObj.style.left   =   0;//obj.offsetLeft;
drawObj.style.width   =   obj.offsetWidth;
drawObj.style.height   =   obj.offsetHeight;
drawObj.style.backgroundColor   =   "transparent ";
drawObj.style.border   =   0;
drawObj.innerHTML   =   drawRound(cp,100,200,300, "red ");//drawRound实现画3个同心圆的功能
//alert(drawObj.innerHTML);
obj.appendChild(drawObj);
}

function   drawRound(centerPoint,   r1,   r2,   r3,   color)   {
var   sHtml   =   " ";
var   round   =   {
left:   0,
top:   0,
dia:   0
};

var   p   =   geo2screen(drawRound.container,drawRound.bound,centerPoint);
round.left   =   p.x   -   r1;
round.top   =   p.y   -   r1;
round.dia   =   2*r1;
sHtml   +=   ' <v:oval   filled=false   style= "position:absolute;top: '   +   round.top   +   ';left: '   +   round.left   +   ';width: '   +   round.dia   +   ';height: '   +   round.dia   +   ';z-index:7; "   strokeColor= '   +   color   +   '   /> '   +   "\n ";
round.left   =   p.x   -   r2;
round.top   =   p.y   -   r2;
round.dia   =   2*r2;
sHtml   +=   ' <v:oval   filled=false   style= "position:absolute;top: '   +   round.top   +   ';left: '   +   round.left   +   ';width: '   +   round.dia   +   ';height: '   +   round.dia   +   ';z-index:7; "   strokeColor= '   +   color   +   '   /> '   +   "\n ";
round.left   =   p.x   -   r3;
round.top   =   p.y   -   r3;
round.dia   =   2*r3;
sHtml   +=   ' <v:oval   filled=false   style= "position:absolute;top: '   +   round.top   +   ';left: '   +   round.left   +   ';width: '   +   round.dia   +   ';height: '   +   round.dia   +   ';z-index:7; "   strokeColor= '   +   color   +   '   /> '   +   "\n ";

return   sHtml;
}

function   geo2screen(container,bound,coord)   {
var   p   =   {
x:   0,
y:   0
};
p.x   =   (coord.x   -   bound.getMinX())*container.width/bound.getWidth();
p.y   =   (bound.getMaxY()   -   coord.y)*container.height/bound.getHeight();

return   p;
}

这样什么都不显示,如果是:
document.body.appendChild(drawObj);
则可以显示,为什么会这样?如果要将圆画在任意对象上应该怎么做?


------解决方案--------------------
全部都是function,总要有个调用才能画啊
  相关解决方案