vml问题：在group中我插入一根线，我如何拖动它

DoItBetter 2003-10-14 01:06:23

拖动的同时，我如何返回当前线在group中的坐标值，，

谢谢各位大虾！一定要帮帮忙了！

...全文

45 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

liuruhong 2003-10-16

打赏
举报

不知道下面的代码是否可以提供一点帮助，坐标是需要进行转化的，这个我移动位置是通过修改from，to属性来完成的，其实直接通过style.left,style.top也是可以直接设置的，在一个group中，通过位置来检索是一个比较普遍的做法，可以一条线，灵敏度不是很高，但是能够体现主体的思想

---------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<title>流程图</title>
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script>
var vX=0;
var vY=0;
function onMouseMove(){
var e=window.event;
var eSrc=e.srcElement;

if( e.button !=1) return;
var disX=e.clientX -vX;
var disY=e.clientY-vY;
//alert(disX + " " + disY);
//alert(tranGroup(3,true));
eSrc.from.x=eSrc.from.x + tranGroup(disX,true);
eSrc.from.y=eSrc.from.y + tranGroup(disY,false);

eSrc.to.x=eSrc.to.x + tranGroup(disX,true);
eSrc.to.y=eSrc.to.y + tranGroup(disY,false);

window.status ="vX=" + disX + " vY=" + disY + " reX=" + tranGroup(disX,true);
vX=e.clientX;
vY=e.clientY;

}

function tranGroup(vValue,dir){
if( ! vValue ) return 0;

if(dir){
return parseInt(vValue * group1.coordsize.x / parseInt(group1.style.width));
}
else{
return parseInt(vValue * group1.coordsize.y /parseInt(group1.style.height));
}
}
function onMouseDown(){
var e=window.event;
vX=e.clientX;
vY=e.clientY;
//e.srcElement.setCapture();
}

function onMouseUp(){
var e=window.event;
e.srcElement.releaseCapture();
}
function _Init(){
moveLine.attachEvent("onmousemove",onMouseMove);
moveLine.attachEvent("onmousedown",onMouseDown);
//moveLine.attachEvent("onmouseup",onMouseUp);
}
</script>
</HEAD>
<body onload="_Init()">
<table id="tbl">
<TR>
<td colSpan="6"><v:group id="group1" style="WIDTH: 550px; HEIGHT: 300px" coordsize="5000,3000">
<v:line style="Z-INDEX: 8; POSITION: absolute" from="300,100" to="300,2800" strokeweight="1pt">
<v:stroke startarrow="classic"></v:stroke>
</v:line>
<v:line style="Z-INDEX: 8; POSITION: absolute" from="300,2800" to="4900,2800" strokeweight="1pt">
<v:stroke endarrow="classic"></v:stroke>
</v:line>
<v:line id="moveLine" style="Z-INDEX: 8; POSITION: absolute" from="2000,200" to="2000,2800"
strokeweight="3pt"></v:line>
<v:rect style="WIDTH: 4900px; HEIGHT: 3000px" coordsize="21600,21600" fillcolor="white"
strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt">
<FONT face="宋体"></FONT>
</v:shadow>
</v:rect>
</v:group></td>
</TR>
</table>
</body>
</HTML>

liuruhong 2003-10-15

打赏
举报

在group里头的style.left style.top都是针对group这个坐标系统而言的，我不知道你是否需要的是转化成屏幕坐标，DHTML事件出发的时候用的是系统坐标，也就是我这里提到的屏幕坐标

如果你需要转化成实际的屏幕坐标，你必须通过转化来完成

假设你的group的coordsize="21600,21600"就是意味着group里头的VML都按照这个坐标系统来对应

假设通过DHTML得到line.from="10800,10800" to ="21600,21600"
那么具体线的位置就应该是从group的中心到右下角的位置，而不用去考虑这个group的style.width, style.height

那么继续假设，<v:group style="position:absolute;left:300px;top:200px;width:400px;height:300px"></v:group>

这个时候你可以知道Group的大小和位置

对于那条线而言，实际在屏幕中的位置就是起点： 300 + 400/2 ， 200+300/2 终点：300+400,200+300

我不知道这样的解释是否让看懂了

imafool 2003-10-15

打赏
举报

改天公开一个半成品。

DoItBetter 2003-10-15

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<title>流程图</title>
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
</HEAD>
<body>
<table id="tbl">
<TR>
<td colSpan="6"><v:group id="group1" style="WIDTH: 550px; HEIGHT: 300px" coordsize="5000,3000">
<v:line style="Z-INDEX: 8; POSITION: absolute" from="300,100" to="300,2800" strokeweight="1pt">
<v:stroke startarrow="classic"></v:stroke>
</v:line>
<v:line style="Z-INDEX: 8; POSITION: absolute" from="300,2800" to="4900,2800" strokeweight="1pt">
<v:stroke endarrow="classic">
<FONT face="宋体"></FONT>
</v:stroke>
</v:line>
<v:line style="Z-INDEX: 8; POSITION: absolute" from="2000,200" to="2000,2800" strokeweight="1pt"></v:line>
<v:rect style="WIDTH: 4900px; HEIGHT: 3000px" coordsize="21600,21600" fillcolor="white"
strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt">
<FONT face="宋体"></FONT>
</v:shadow>
</v:rect>
</v:group></td>
</TR>
</table>
</body>
</HTML>

kingdomzhf 2003-10-15

打赏
举报

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>

<body>
<v:group ID="group1" style="position:relative;left:100px;WIDTH:200px;HEIGHT:200px;" coordsize = "2000,2000">
<v:line ID="line1" from="200,200" to="1000,1700" style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt/>
</v:group>
<input type=button onclick="alert(document.all('line1').style.posLeft)" value="get x">
</body>
</html>

kxyes 2003-10-15