aiuto per capire un codice creazione FlowChart

**Galex** · 15-09-2004, 08:53

ciao ragazzi. Ho trovato questo script (non ricordo + dove

VVoVe: )
Cmq, a parte questo, lo script consente di creare dei flowchart con linee di connesione tra i blocchi dinamiche.

A me interessa in particolare questa ultima caratteristica, cioè la possibilità di creare delle linee lato client fornendo delle coordinate x,y. Ho provato a capire come funziona questo script...ma non ci capisco molto...qualcuno potrebbe darmi una mano???

codice:

<%@ Language=VBScript %>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<TITLE></TITLE>
<STYLE>
v\:* {behavior:url(#default#VML);}
}

.Box
{
	border:outset thin navy;
	position:absolute;
	text-align:center;
	width:100px;
	height:100px;
	cursor: hand;
	color:maroon;
}

</STYLE>
<SCRIPT LANGUAGE=javascript>
var sDragItem = "";
var iClickOffsetX = 0;
var iClickOffsetY = 0;

function OnLoad(){
	document.onmousemove=mmove;
	document.onmouseup=mup;
	DrawConnections();
}

function mmove(){
	var e = document.getElementById(sDragItem);
	if (e==null)return;
	
	e.style.top = event.y-iClickOffsetY;
	e.style.left = event.x-iClickOffsetX;
}

function mup(){
	sDragItem = "";
	DrawConnections();
}

function DragItem(sItem){
	iClickOffsetX = event.offsetX;
	iClickOffsetY = event.offsetY;
	
	idOutput.innerHTML = "";
	sDragItem=sItem;
}

function Box(id){
	var e = document.getElementById(id);
	if (e == null) return;
	
    var x = 0
    var y = 0;
    for(var p=e; p&&p.tagName!='BODY'; p=p.offsetParent){
      x += p.offsetLeft;
      y += p.offsetTop;
    }

	var w = e.offsetWidth;
	var h = e.offsetHeight;
	this.w = w;
	this.h = h;
    this.x = x;
    this.y = y;
	
	//clock wise scheme
	//1_2
	//4_3

	//1) top-left
    this.x1 = x;
    this.y1 = y;
    
    //1_2) top-left to top-right midpoint
    this.x1_2 = x+(w/2);
    this.y1_2 = y;
    
    //2) top-right
    this.x2 = x+w;
    this.y2 = y;
    
	//2_3) top-right - bottom-right midpoint
    this.x2_3 = x+w;
    this.y2_3 = y+(h/2);
    
	//3) bottom-right
    this.x3 = x+w;
    this.y3 = y+h;
    
    //3_4) bottom-right to bottom-left midpoint
    this.x3_4 = x+(w/2);
    this.y3_4 = y+h;
    
    //4) bottom-left
    this.x4 = x;
    this.y4 = y+h;
    
    //4_1) bottom-left to top-left midpoint
    this.x4_1 = x;
    this.y4_1 = y+(h/2);
    
}

function Connect(id,sId1,sId2){
	//debugger;
	
	var oBox1 = new Box(sId1);
	var oBox2 = new Box(sId2);
	var iHandle = 10;
	
	if (oBox1.x1 > oBox2.x2){
		//box 1 is right of box 2
		DrawLine("",oBox1.x4_1,oBox1.y4_1,oBox1.x4_1-iHandle,oBox1.y4_1);
		DrawLine("",oBox2.x2_3,oBox2.y2_3,oBox2.x2_3+iHandle,oBox2.y2_3);
		DrawLine(id,oBox1.x4_1-iHandle,oBox1.y4_1,oBox2.x2_3+iHandle,oBox2.y2_3);		
	}else if (oBox1.x2 < oBox2.x1){
		//box 1 is left of box 2
		DrawLine("",oBox1.x2_3,oBox1.y2_3,oBox1.x2_3+iHandle,oBox1.y2_3);
		DrawLine("",oBox2.x4_1,oBox2.y4_1,oBox2.x4_1-iHandle,oBox2.y4_1);
		DrawLine(id,oBox1.x2_3+iHandle,oBox1.y2_3,oBox2.x4_1-iHandle,oBox2.y4_1);
		
	}else if (oBox1.y1 > oBox2.y3){
		//box 1 is at the bottom of box 2
		DrawLine("",oBox1.x1_2,oBox1.y1_2,oBox1.x1_2,oBox1.y1_2-iHandle);
		DrawLine("",oBox2.x3_4,oBox2.y3_4,oBox2.x3_4,oBox2.y3_4+iHandle);
		DrawLine(id,oBox1.x1_2,oBox1.y1_2-iHandle,oBox2.x3_4,oBox2.y3_4+iHandle);
		
	}else if (oBox1.y3 < oBox2.y1){
		//box 1 is at the top of box 2
		DrawLine("",oBox1.x3_4,oBox1.y3_4,oBox1.x3_4,oBox1.y3_4+iHandle);
		DrawLine("",oBox2.x1_2,oBox2.y1_2,oBox2.x1_2,oBox2.y1_2-iHandle);
		DrawLine(id,oBox1.x3_4,oBox1.y3_4+iHandle,oBox2.x1_2,oBox2.y1_2-iHandle);
	}else{
		//alert("condition not met")
	}

}

function LineOver(id){
	var e = document.getElementById("line" + id);
	e.strokecolor = "red";
}
function LineOut(id){
	var e = document.getElementById("line" + id);
	e.strokecolor = "gray";
}
function LineClick(id){
	alert(id)
}

function DrawLine(id,x1,y1,x2,y2){
	var f=document.createElement('v:line');
	if (id!=""){
		var sScript = 'OnMouseOver="LineOver('+id+')" OnMouseOut="LineOut('+id+')"  OnClick="LineClick('+id+')"';
	}else{
		var sScript = '';
	}
	
	var f=document.createElement('<v:line ' + sScript + '>');
	var s=document.createElement('v:stroke');
	s.endcap="Round";
	f.appendChild(s);
	f.id="line" + id;
	f.strokecolor = "gray";
	f.fillcolor="red";
	f.strokeweight = '3px';
	f.style.position = 'absolute';
	f.style.cursor = 'hand';
	f.zIndex = 1;
	f.from = x1+","+y1;
	f.to = x2+","+y2;
	idOutput.appendChild(f);	
}

function DrawOval(x,y){
	var w=document.createElement('v:oval');
	w.style.position = 'absolute';
	w.zIndex = 1;
	w.fillcolor="white";
	w.strokecolor="green";
	w.strokeweight = 2;
	w.style.width = 6;
	w.style.height = 6;
	w.style.left = x-(6/2);
	w.style.top = y-(6/2);
	idOutput.appendChild(w);
}

function DrawConnections(){
	idOutput.innerHTML = "";
	
	var oConnections = new Array();
	oConnections[0] = Array(1,"Test1","Test2")
	oConnections[1] = Array(2,"Test1","Test4")
	oConnections[2] = Array(3,"Test2","Test3")
	oConnections[3] = Array(2,"Test1","Test5")

	for (var i=0;i<oConnections.length;i++){
		Connect(oConnections[i][0],oConnections[i][1],oConnections[i][2]);
	} 

}
</SCRIPT>

<BODY onload="OnLoad()">
Drag Boxes...

<div id=idOutput style="position:absolute; top:0px; left:0px;"></div>

<div id=Test1 onmousedown="DragItem('Test1')" unselectable="on" style="top:200px;left:300px;" class=Box>
	Box 1
</div>

<div id=Test2 onmousedown="DragItem('Test2')" unselectable="on" style="top:10px;left:200px;" class=Box>
	Box 2
</div>

<div id=Test3 onmousedown="DragItem('Test3')" unselectable="on" style="top:150px;left:50px;" class=Box>
	Box 3
</div>

<div id=Test4 onmousedown="DragItem('Test4')" unselectable="on" style="top:300px;left:10px;" class=Box>
	Box 4
</div>

<div id=Test5 onmousedown="DragItem('Test5')" unselectable="on" style="top:350px;left:300px;" class=Box>
	Box 5
</div>

</BODY>
</HTML>

**Galex** · 15-09-2004, 08:55

...per correttezza...questo è il link dove ho trovato lo script...

http://www.planet-source-code.com/vb...txtCodeId=8968

**Dennis** · 15-09-2004, 09:03

Vabbè che su Firefox non funziona... presumo funzioni solo su IE

cmq per le linee, la funzione è questa

function DrawLine(id,x1,y1,x2,y2){
var f=document.createElement('v:line');
if (id!=""){
var sScript = 'OnMouseOver="LineOver('+id+')" OnMouseOut="LineOut('+id+')" OnClick="LineClick('+id+')"';
}else{
var sScript = '';
}

var f=document.createElement('<v:line ' + sScript + '>');
var s=document.createElement('v:stroke');
s.endcap="Round";
f.appendChild(s);
f.id="line" + id;
f.strokecolor = "gray";
f.fillcolor="red";
f.strokeweight = '3px';
f.style.position = 'absolute';
f.style.cursor = 'hand';
f.zIndex = 1;
f.from = x1+","+y1;
f.to = x2+","+y2;
idOutput.appendChild(f);
}

crea questo elemento "v:line", che sinceramente non conosco, poi setta tutte le proprietà... cosa non capisci? :master:

**Galex** · 15-09-2004, 09:50

...come farlo funzionare:

crea una pagina con la parte di codice che hai evidenziato tu:

poi come richiamo la funzione x fargli disegnare una linea

DrawLine(id,x1,y1,x2,y2)

id cos'è?devo creare un quache oggetto con l'id da passare a DrawLine)

io ho fatto un pò di prove ma non mi ha disegnato nemmeno una piccola,brutta e strota lineetta

codice:

<%@ Language=VBScript %>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<TITLE></TITLE>
<STYLE>
v\:* {behavior:url(#default#VML);}
}

.Box
{
	border:outset thin navy;
	position:absolute;
	text-align:center;
	width:100px;
	height:100px;
	cursor: hand;
	color:maroon;
}

</STYLE>
<script>
function DrawLine(id,x1,y1,x2,y2){ 
var f=document.createElement('v:line'); 
if (id!=""){ 
var sScript = 'OnMouseOver="LineOver('+id+')" OnMouseOut="LineOut('+id+')" OnClick="LineClick('+id+')"'; 
}else{ 
var sScript = ''; 
} 

var f=document.createElement('<v:line ' + sScript + '>'); 
var s=document.createElement('v:stroke'); 
s.endcap="Round"; 
f.appendChild(s); 
f.id="line" + id; 
f.strokecolor = "gray"; 
f.fillcolor="red"; 
f.strokeweight = '3px'; 
f.style.position = 'absolute'; 
f.style.cursor = 'hand'; 
f.zIndex = 1; 
f.from = x1+","+y1; 
f.to = x2+","+y2; 
idOutput.appendChild(f); 
}
</script>
</head>
<body>

</body>
</html>

**Galex** · 15-09-2004, 15:40

grazie dell'aiuto,ma ho risolto.ho scoperto un mondo (VML). Era un eternità che cercavo un modo per disegnare forme vettoriali dinamicamente,e finalmente ci son riuscito (solo IE)"

Ciao

Discussione: aiuto per capire un codice creazione FlowChart

Strumenti discussione

Ricerca discussione

Visualizza

aiuto per capire un codice creazione FlowChart

Permessi di invio