9 respuestas en este tema

[martinartaza]

Hola querida comunidad, cada vez mis titulos son más raros. Siguiendo con el tema de hacer un software para diseñar grafo me queda ahora unir los nodos (que por el momento son botones). Eh creado un simple programita para crear botones en tiempo de ejecución, poder moverlo, pasar al frente, o enviarlo al fondo, eliminarlo si es necesario y (cuando llegue a casa, implementare para cambiarles las propiedades). Le muestro como queda el programa y subo su código fuente (por si alguien le interesa, aunque no hace mucho que digamos).

Y el codigo fuente  http://www.alertaene...ursos/mover.rar

En definitiva, estoy tratando de crear 2 botones (en tiempo de ejecución), luego apretar en el boton unir (creado en tiempo de diseño que está arriba) y que me permita graficar una linea que una 2 botones, está linea tiene que tener las siguiente propiedades:

1 - Al mover los botones (de a uno) la linea se acomode o sea se mueva para que los botones sigan unidos)
2 - Que está linea se pueda poner un punto intermedio y a este punto se lo pueda mover entonces la linea tendria un Inicio, punto intermedio, fin .  Y al mover el boton, ligado al inicio, se mueve redibuje el primer tramo, si se mueve el punto intermedio se redibuje los dos tramos y si se mueve el boton ligado al fin, se redibuje el segundo plano.

3 - Además que se guarda de alguna forma, que el primer boton está unido al segundo.

Bueno se que estoy pidiendo cosas complicadas y aún más debido a que no estoy usando componentes de tercero, sino usando solo código de pascal, esto se debe que deseo poder aprender para lazarus esto también.

Todo esto es con la idea de poder aprender está esquema de programación y empezar a desarrollar programas simples que tengo en la cabeza hace más de 10 años ( o más tal vez.)

Mis preguntas:

Como hago lo anterior, creando en tiempo de ejecución un tshape y dibujar adentro las lineas ,o uso la api de windows (sera esto portable). O que otra alternativa hay, la verdad es que no sé por donde encararlo.

Desde ya muchas gracias y bueno sigo con esto hasta que aparezca algo urgentisimo.

[felipe]

No se si me queda muy clara la idea, pero me preguntaba si no puedes usar un panel y un split.


Saludos!

[martinartaza]

Ehh, creo que no te entiendo, creiria que un objeto de la clase TPanel y otro de la clase TSplitter no se puede hacer lo que quiero.


Lo que yo quiero es (en tiempo de ejecución) crear un boton, digamos boton1, con coordenadas top y left (10, 10) y despues crear un boton 2 con coordernadas (50, 10), luego crear un linea que una los botones, que iria (en principio, después se lo mejora)    desde (10, 10) hasta (50,10).  Que luego si uno mueve uno de los botones se mueva la linea.

Hoy cuando llegue a mi casa envió imágenes aclarando la idea.

[Desart]

Holamartinartaza, pregunto no seria más lógico, saber 0º Saber si uno de los botones se ha movido de la posición inicial.

1º que botón esta más alejado (left+ alto)2º que botón esta más alto (Top+bajo)

Sabiendo estos dos parametros yo dibujaria una linea desde el botón que este más alto, desde una de las esquinas inferiores o superiores, pongamos la derecha, a la  esquina inferior, o superior izquierda del botón más alejado, todo esto unido a uno de los eventos del ratón.

[Delphius]

Hola,
A como yo lo veo es cosa de "jugar" con los eventos OnMouseUp, OnMouseDown, OnMouseMove, OnClick del botón para desplazarlo.
Una vez que se suelte el botón, simplemente se ha leer el valor de la propiedades Left, Top y sus respectivos Heigth, y Width para determinar las coordenadas iniciales y finales para trazar la línea.


Lo que yo haría es obtener la coordenada centro de cada botón:

delphi

Xi = (Left_i + Heigth_i) div 2;
Yi = (Top_i + Width_i) div 2;
 
 
 
Xf = (Left_f + Heigth_f) div 2;
Yf = (Top_f + Width_f) div 2;

Siendo "i" el botón de punto de partida, y "f" el botón de punto de llegada.
Ahora con estas 2 coordenadas (Xi, Yi) (Xf, Yf) simplemente aprovecho el objeto Canvas y los método MoveTo(Xi, Yi) y LineTo(Xf, Yf) para trazar una recta:

delphi

Canvas.MoveTo(Xi, Yi); // nos ponemos en el centro del botón inicial
Canvas.LineTo(Xf, Yf); // trazamos una línea hasta centro del botón final

No interesa si uno está más alto que otro, en diagonal... o el lugar. Dejo que Canvas se encargue... Después de todo, se supone que "él" ya sabe como y que hacer. ¿no? 

Claro está, esto es sólo un bosquejo, una orientación. Para algo más elaborado hay que evaluar otra serie de cosas. Lo que te recomiendo seriamente es que empieces a separar lo que es lógica de lo que es interfaz. Justamente por lo que comentas del punto 2 y 3.


Una posible manera de verlo es que dispongas de un vector que tenga almacenado los elementos que vas a pintar con la información de sus posiciones, colores, formas y si están conectados cómo.


Luego la interfaz simplemente hace uso de esta estructura, la lee y la representa en pantalla. Aprovechando esta estructura se puede evaluar y analizar la forma de cómo llevarlo a archivo para guardarlo y posteriormente recuperarlo.
Lamentablemente esto dependerá de las posibilidades de diseño y su complejidad.


Saludos,

[Sergio]

Yo hago algo similar poniendo los botones sobre un TImage que ocupa todo, y tras mover un boton, borro el tiimage dibujando en su canvas un rectangle blanco relleno de blanco, y dibujo la linea que une ambos botones usando sus centros, como en el ejemplo de delphius que usa canvas.moveto() y canvas.lineto() solo que usando un timage encima del form, y encima de el, los botones (paniendole el owner:= Image1 al crearlo).

Si necesitas algun detalle de como hacer algo de esto, comentalo y te pego algo de código.

[martinartaza]

Muchas gracias a todos por sus respuestas, no pude responder antes porque fue un día movido de trabajo.
Creo que combinare lo mejor de lo que me dijeron:

Una posible manera de verlo es que dispongas de un vector que tenga almacenado los elementos que vas a pintar con la información de sus posiciones, colores, formas y si están conectados cómo.


Luego la interfaz simplemente hace uso de esta estructura, la lee y la representa en pantalla. Aprovechando esta estructura se puede evaluar y analizar la forma de cómo llevarlo a archivo para guardarlo y posteriormente recuperarlo.

Yo hago algo similar poniendo los botones sobre un TImage que ocupa todo, y tras mover un boton, borro el tiimage dibujando en su canvas un rectangle blanco relleno de blanco, y dibujo la linea que une ambos botones usando sus centros

Sobre código si no es mucho pedir no hay problema.

Desde ya muchas gracias por sus respuesta, espero aprender está tema y no postergar  más las ideas que tengo en la cabeza.

[escafandra]

Considero que la forma mas eficaz de conseguir lo que quieres es realizar un control que una graficamente los botones.

He preparado un prototipo de control a modo de ejemplo que une un nodo con dos hojas. Puede ser el comienzo para solucionar tu problema.

El control sólo tiene tres propiedades añadidas que corresponden a cada uno de los botones y responde a los movimientos de cada botón manteniendo la unión gráfica con una línea.

Este es el código de la Unit:

delphi

unit UnionControl;
 
interface
 
uses
  Windows, Messages, Forms, Math, ExtCtrls, Graphics, SysUtils, Classes, Controls;
 
type
  TDefault = class(TControl);
  TUnionControl = class(TWinControl)
  private
   FControl1: TControl;
   FControl2: TControl;
   FNodo: TControl;
   P1, P2, N: TPoint;
  protected
    procedure HookWindowProc1(var Message: TMessage);
    procedure HookWindowProc2(var Message: TMessage);
    procedure HookWindowProc3(var Message: TMessage);
    procedure SetControl1(Value: TControl);
    procedure SetControl2(Value: TControl);
    procedure SetNodo(Value: TControl);
    procedure WMPaint(var Message: TWMPaint); message WM_PAINT;
    procedure UpdateBoundsRect;
  public
    constructor Create(AOwner: TComponent); override;
  published
    Property Control1: TControl read FControl1 write SetControl1;
    Property Control2: TControl read FControl2 write SetControl2;
    Property Nodo: TControl read FNodo write SetNodo;
  end;
 
 
implementation
 
 
constructor TUnionControl.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  Left:= 20;
  Top:= 20;
  Width:= 0;
  Height:= 0;
  Control1:= nil;
  Control2:= nil;
  Nodo:= nil;
  P1.X:= 0; P1.Y:=0;
  P2:= P1;
  N:= P1;
  OnMouseDown:= TDefault(AOwner).OnMouseDown;
end;
 
procedure TUnionControl.SetControl1(Value: TControl);
begin
  if Value <> FControl1 then
  begin
    FControl1 := Value;
    Control1.WindowProc:= HookWindowProc1;
    P1.X:= Control1.Left + Control1.Width div 2;
    P1.Y:= Control1.Top + Control1.Height div 2;
    UpdateBoundsRect;
  end;
end;
 
procedure TUnionControl.SetControl2(Value: TControl);
begin
  if Value <> FControl2 then
  begin
    FControl2 := Value;
    Control2.WindowProc:= HookWindowProc2;
    P2.X:= Control2.Left + Control2.Width div 2;
    P2.Y:= Control2.Top + Control2.Height div 2;
    UpdateBoundsRect;
  end;
end;
 
procedure TUnionControl.SetNodo(Value: TControl);
begin
  if Value <> FNodo then
  begin
    FNodo := Value;
    Nodo.WindowProc:= HookWindowProc3;
    N.X:= Nodo.Left + Nodo.Width div 2;
    N.Y:= Nodo.Top + Nodo.Height div 2;
    UpdateBoundsRect;
  end;
end;
 
procedure TUnionControl.WMPaint(var Message: TWMPaint);
var
  DC: HDC;
begin
  DC:= GetDC(Handle);
  if Control1 <> nil then MoveToEx(DC, P1.X-Left, P1.Y - Top, nil);
  if Nodo <> nil then     LineTo(DC, N.X-Left, N.Y-Top);
  if Control2 <> nil then LineTo(DC, P2.X-Left, P2.Y - Top);
  ReleaseDC(Handle, DC);
end;
 
procedure TUnionControl.HookWindowProc1(var Message: TMessage);
begin
  case Message.Msg of
    WM_MOVE:
    begin
       P1.X:= Control1.Left + Control1.Width div 2;
       P1.Y:= Control1.Top + Control1.Height div 2;
       UpdateBoundsRect;
    end;
  end;
  TDefault(Control1).WndProc(Message);
end;
 
procedure TUnionControl.HookWindowProc2(var Message: TMessage);
begin
  case Message.Msg of
    WM_MOVE:
    begin
       P2.X:= Control2.Left + Control2.Width div 2;
       P2.Y:= Control2.Top + Control2.Height div 2;
       UpdateBoundsRect;
    end;
  end;
  TDefault(Control2).WndProc(Message);
end;
 
procedure TUnionControl.HookWindowProc3(var Message: TMessage);
begin
  case Message.Msg of
    WM_MOVE:
    begin
       N.X:= Nodo.Left + Nodo.Width div 2;
       N.Y:= Nodo.Top + Nodo.Height div 2;
       UpdateBoundsRect;
    end;
  end;
  TDefault(Nodo).WndProc(Message);
end;
 
procedure TUnionControl.UpdateBoundsRect;
var
  RB: TRect;
begin
  RB.Left:=  Min(Min(N.X, P1.X), P2.X);
  RB.Top :=  Min(Min(N.Y, P1.Y), P2.Y);
  RB.Right:= Max(Max(N.X, P1.X), P2.X);
  RB.Bottom:= Max(Max(N.Y, P1.Y), P2.Y);
  InflateRect(RB, 2, 2);
  BoundsRect:= RB;
 
  SendToBack;
end;
 
end.

Te muestro como lo he intercalado en tu código para usar sólo tres botones. Para usar mas deberás seguir creandolos en tiempo de ejecución.

delphi

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
var
  B: TButton;
begin
   B:= TButton.Create(self);
   if BanNodo then
   begin
     with B do
     begin
     Parent := self;
     Left := X;
     Top := Y;
     Inc(UltimoID);
     Tag := UltimoID;
     Caption := 'Nodo' + IntToStr(UltimoID);
     Name := 'BNodo' + IntToStr(UltimoID);
     BanNodo:= False;
//     PopupMenu:= PopMenuNodo;
     OnMouseDown:= ControlMouseDown;
     OnMouseMove:= ControlMouseMove;
     OnMouseUp:= ControlMouseUp;
    end;
    UnionControl1.Nodo:= B;
   end;
if BanHoja then
   begin
   with B do
   begin
     Parent := self;
     Left := X;
     Top := Y;
     Inc(UltimoID);
     Tag := UltimoID;
     Caption := 'Hoja' + IntToStr(UltimoID);
     Name := 'BHoja' + IntToStr(UltimoID);
     BanHoja:= False;
//     PopupMenu:= PopMenuNodo;
     OnMouseDown:= ControlMouseDown;
     OnMouseMove:= ControlMouseMove;
     OnMouseUp:= ControlMouseUp;
    end;
    if UnionControl1.Control1 = nil then UnionControl1.Control1:= B
    else  UnionControl1.Control2:= B;
   end;
end;

Se trata de una prueba de concepto, ahora se debe desarrollar.

Espero que te sirva de ayuda.


PD. Si lo que pretendes es hacer un árbol, la implementación debe ser distinta. En este caso debes crear un control nodo gráfico que representará a los nodos y hojas. Los botones simples no te servirán...


Saludos.

Archivos adjuntos

•  2876_1414fd3734ca2a604f96aff7de6dd5c0edf41884.jpg   73,39KB   19 descargas

[martinartaza]

Muchas gracias a todos, sigo trabajando en las ideas que me dieron, cuando tenga avances, lo posteo . Pensaba que ya lo iba a tener, pero bueno bien los tenga lo pongo acá.

Cuando llegue a casa vere si puedo hacer andar el ejemplo de escafandra en lazarus en ubuntu, pero antes de eso, eh creado un programa que dibuja en un timage una grilla, ya se puede hacer ZOOM o alejarse y ahora estoy viendo como poner los botones en los puntos de la grilla. Bueno cuando lo termine lo voy a postear y sera más claro.

[escafandra]

...vere si puedo hacer andar el ejemplo de escafandra en lazarus en ubuntu...

Pues pe parece que no vas a poder. Mi ejemplo, tal como está, es muy cercano a la API de Windows.

Saludos.