求助:使用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>
...全文
371 点赞 收藏 4
写回复
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的偏移就行了
回复 点赞
ytzz 2006年08月08日
关注
回复 点赞
cgs1999 2006年08月08日
up!
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告