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);
}
{
//绘图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);
}
解决方案 »
- JS表格属性操作
- 如何让弹出的iframe层完全透明,可以显示被遮盖的内容
- javascript 函数调用问题
- 想写一个富文本编辑器,但是在执行execCommand的时候报错,请帮忙看看
- 提问:每选中/取消一个checkbox,在table里增加/减少一行
- 还是下拉框问题,怎么到这里就出错,改z-index=-1,就看不见了?
- 100分求IE關閉時提示是否退出的解決方案﹗
- 高手指教:链接打开一个新窗体,在新窗口中控制当前窗体如何做到???
- 如何引用表格中动态生成的文本框?
- vue项目上线后页面偶尔报错cannot read property 'call' of undefined
- textarea中右键菜单的问题
- 大家好~~关于回调或者setTimeout的使用
<html xmlns:v>
<head>
<title>绘图</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body oncontextmenu="return false;" onselectstart="return false" onload="ini()">
<!--绘制虚线-->
<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 ini(){
divCanvas.onmousedown=function(){
//保存坐标
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;
}
divCanvas.onmousemove=function(){
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+")";
}
}
divCanvas.onmouseup=function(){
if(fDrawLine){
fDrawLine=false;
document.all("ctl_drawLine").style.display="none";
drawLine(fx,fy-divCanvas.offsetTop,event.x-fx,event.y-fy);
}
}
ctl_drawLine.onmouseup=function(){
if(fDrawLine){
fDrawLine=false;
document.all("ctl_drawLine").style.display="none";
drawLine(fx,fy-divCanvas.offsetTop,event.x-fx,event.y-fy);
}
}
}//end ini()
//绘制线条
function drawLine(x1,y1,x2,y2)
{
//绘图indexindex++;
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>
但通过onmousemove事件中的
window.status="线条位置("+(event.x-fx)+","+(event.y-fy)+")";
显示出来的位置判断应该没有超出,即应该可以触发相应事件