求助：使用VML画线问题

cgs1999 2006-08-07 06:35:57

使用VML画线时，遇到一种情况向右下角绘制线条时，发现老是绘制不出来，其它方向的绘制都没有问题，使用“test”按钮中的代码直接绘制又没问题，百思不得原因……

以下为我使用的代码：
<html xmlns:v>
<head>
<title>绘图</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body oncontextmenu="return false;">

<v:Line id="ctl_drawLine" style="position:absolute;z-index:2000;display:none" strokecolor="black" strokeweight="1px">
<v:Stroke dashstyle="shortdash"/>
</v:line>
<input type="button" value="HTML" onclick="alert(document.all.divCanvas.innerHTML);">
<input type="button" value="test" onclick="draw();">

<div id="divCanvas" onselectstart="return false" style="position:absolute;left:0; top:27; width:995; height:570;background:#009999"></div>
<script>
//是否绘制线条
var fDrawLine=false;
//当前所选择的对象
var fx,fy;
//绘制图形的z-index
var zindex=1000;
//绘制对象数组
var index=0;

function divCanvas.onmousedown()
{
//保存坐标
fx=event.x;
fy=event.y;

//显示画线路径
var objLine=document.all("ctl_drawLine");
objLine.style.left=fx;
objLine.style.top=fy;
//objLine.from=fx+","+fy;
objLine.to="0,0";
objLine.style.display="";
//修改标识
fDrawLine=true;
}
function divCanvas.onmousemove()
{
if(fDrawLine && event.button==1)
{
var objLine=document.all("ctl_drawLine");
objLine.to=(event.x-fx)+","+(event.y-fy);
window.status="线条位置("+(event.x-fx)+","+(event.y-fy)+")";
}else{
window.status="当前位置("+event.x+","+event.y+")";
}
}
function divCanvas.onmouseup()
{
if(fDrawLine)
{
fDrawLine=false;
document.all("ctl_drawLine").style.display="none";
drawLine(fx,fy-divCanvas.offsetTop,event.x-fx,event.y-fy);
//divCanvas.appendChild(document.createElement("<v:line style='position:absolute;z-index:"+(zindex++)+";left:"+fx+"px;top:"+fy+"px;' to='"+(event.x-fx)+","+(event.y-fy)+"' strokecolor='black' strokeweight='1px'/>"))
}
}

//绘制线条
function drawLine(x1,y1,x2,y2)
{
//绘图index
index++;
var id="ctl_line"+index;
var strHtml='';
strHtml += '<v:line id="'+id+'" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:' + x1 + ';top:' + y1 + '" strokecolor="black" to="' + x2 + ',' + y2 + '" >';
strHtml += '<v:stroke EndArrow="Classic"/>';
strHtml += '</v:line>';
//prompt("",strHtml);
divCanvas.insertAdjacentHTML('beforeEnd',strHtml);
}

function draw()
{
divCanvas.insertAdjacentHTML('beforeEnd','<v:line id="ctl_line2" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:436;top:211" strokecolor="black" to="98,20" ><v:stroke EndArrow="Classic"/></v:line>');
}
</script>
</body>
</html>

...全文

428 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

cgs1999 2006-08-09

打赏
举报

谢谢楼上eglic(圪圪) (理由永远是谎言，信仰永远是自慰) 的帮助，不过有时还是会出现画不了线的问题，真是郁闷！

是是非非 2006-08-08

打赏
举报

<html xmlns:v>
<head>
<title>绘图</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body oncontextmenu="return false;">

<v:Line id="ctl_drawLine" style="position:absolute;z-index:2000;display:none" strokecolor="black" strokeweight="1px">
<v:Stroke dashstyle="shortdash"/>
</v:line>
<input type="button" value="HTML" onclick="alert(document.all.divCanvas.innerHTML);">
<input type="button" value="test" onclick="draw();">

<div id="divCanvas" onselectstart="return false" style="position:absolute;left:0; top:27; width:995; height:570;background:#009999"></div>
<script>
//是否绘制线条
var fDrawLine=false;
//当前所选择的对象
var fx,fy;
//绘制图形的z-index
var zindex=1000;
//绘制对象数组
var index=0;

function divCanvas.onmousedown()
{
//保存坐标
fx=event.x;
fy=event.y;

//显示画线路径
var objLine=document.all("ctl_drawLine");
objLine.from=fx+","+fy;
objLine.to=fx+","+fy;
objLine.style.display="";
//修改标识
fDrawLine=true;
}

function divCanvas.onmousemove()
{
if(fDrawLine && event.button==1)
{
var objLine=document.all("ctl_drawLine");
objLine.to=event.x+","+event.y;
window.status="线条位置("+(event.x-fx)+","+(event.y-fy)+")";
}else{
window.status="当前位置("+event.x+","+event.y+")";
}
}
function divCanvas.onmouseup()
{
if(fDrawLine)
{
fDrawLine=false;
document.all("ctl_drawLine").style.display="none";
drawLine(fx,fy-divCanvas.offsetTop,event.x-fx,event.y-fy);
//divCanvas.appendChild(document.createElement("<v:line style='position:absolute;z-index:"+(zindex++)+";left:"+fx+"px;top:"+fy+"px;' to='"+(event.x-fx)+","+(event.y-fy)+"' strokecolor='black' strokeweight='1px'/>"))
}
}

//绘制线条
function drawLine(x1,y1,x2,y2)
{
//绘图index
index++;
var id="ctl_line"+index;
var strHtml='';
strHtml += '<v:line id="'+id+'" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:' + x1 + ';top:' + y1 + '" strokecolor="black" to="' + x2 + ',' + y2 + '" >';
strHtml += '<v:stroke EndArrow="Classic"/>';
strHtml += '</v:line>';
//prompt("",strHtml);
divCanvas.insertAdjacentHTML('beforeEnd',strHtml);
}

function draw()
{
divCanvas.insertAdjacentHTML('beforeEnd','<v:line id="ctl_line2" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:436;top:211" strokecolor="black" to="98,20" ><v:stroke EndArrow="Classic"/></v:line>');
}
function divCanvas.onselectstart(){
window.event.returnValue=false;
return false;
}
</script>
</body>
</html>

=================================
上面简单改了一下
你把event.x和event.y都加上div的偏移就行了