Ir al contenido



Foto

Unir dos imagenes con una linea

linea imagenes unir

  • Por favor identifícate para responder
4 respuestas en este tema

#1 torov

torov

    Newbie

  • Miembros
  • Pip
  • 2 mensajes

Escrito 17 abril 2016 - 09:52

Hola querida comunidad, estoy desarrollando un programita para simular circuitos eléctricos, cada símbolo esta creado en un Timage sobre tpaintbox lo que quisiera era unir esas dos imágenes con una línea y siempre permanezcan unidos asi mueva los Timage sobre el Tpaintbox, porque lo hago desde el canvas del tpaint box pero cuando muevo los Timage se me borra la línea...

 

En resumen

1 - Al mover las imágenes  (de a uno) la linea se acomode o sea se mueva para que sigan unidas)
2 - al mover la imagen, la línea se mantenga redibujando entre las imágenes conectadas

Por favor necesito su ayudaaaaaaaaaaa...
 


  • 0

#2 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.409 mensajes
  • LocationRepública Dominicana

Escrito 18 abril 2016 - 06:45

Si puedes lograr unir las dos imágenes con una línea, no necesitas más, ahora, para que se mueva la línea junto con el TImage debes crear un algorithmo que "repinte" esa línea a medida que mueves la imagen.
  • 0

#3 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.286 mensajes
  • LocationArgentina

Escrito 18 abril 2016 - 08:52

Como dice Enecumene, si ya tienes hecha la forma de unir las imágenes con una línea lo que resta es que invoques a ese mismo algoritmo cada vez que mueves alguna de las imágenes para así repintar.

 

Si nos das una muestra del código de como lo estás encarando podríamos saber como guiarte mejor.

 

Saludos,


  • 0

#4 torov

torov

    Newbie

  • Miembros
  • Pip
  • 2 mensajes

Escrito 18 abril 2016 - 09:26

Saludos amigos me explico mejor... Cada elemento a representar lo he creado como una class Timage le he colocado una propiedad Tpoint a cada uno q representa el punto donde ambos se conectaran, he podido dibujar la línea que simula la conexión y la dibuja de la siguiente forma.

 

Lienzo.canvas.pen.Color:=clRed;
Lienzo.canvas.moveto(Generador.Pin1.X,Generador.Pin1.Y);
Lienzo.canvas.lineto(TX.Pin1.X,Tx.Pin1.Y+150);

 

El lienzo es un Tpaintbox la cuestión es que cuando muevo el Timage se borra la línea que dibuje  y todas las demás, quisiera poder crear una clase aparte que me represente la línea mantenga la unión entre los dos y pueda tener propiedades


  • 0

#5 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.286 mensajes
  • LocationArgentina

Escrito 19 abril 2016 - 06:28

Si es que entendí bien, si te has hecho tu propia clase TImage, sugiero que cambies el nombre para evitar un conflicto con el componente TImage. Por darle un nombre, puedes llamarla TDrawElectronicSymbol. Puedes tener tu propia clase que represente y mantenga el vínculo entre tus dos símbolos/imágenes, llamemosla algo como TDrawElectronicLine.

 

Ya con esto en mente el problema se encara aprovechando el poder de OO, nos abstraemos mejor y para el tema de la apariencia o aspectos visuales se delega esto en componentes visuales.

 

Como bien notas, el TPaintBox no mantiene el dibujado y se borra. Es su comportamiento normal. Se requiere de un trabajo extra el repintado cuando las cosas cambian. Para el caso que nos compete, si usas el TImage para mostrar los símbolos tienes a disposición los eventos OnMouseClick, OnMouseDown, OnMouseLeave, OnMouseMove, y OnMouseUp para definir que hacer cuando se pulsa sobre el TImage, se mantiene presionado el botón del mouse, o se deja de pulsar, cuando se mueve el mouse, etc.

Debes "jugar" con estos eventos.

El trabajo "fuerte" cae en el evento OnMouseMove ya que este evento es el que se va a estar disparando mientras tiene lugar el desplazamiento del TImage. Dentro de este evento debes invocar a un algoritmo que básicamente lo que hace es repintar la pantalla de nuevo considerando los cambios. Digamos que ya tienes un método PaintElectronicCircuit().

 

Ya que tenemos la clase TDrawElectronicSymbol, podemos asociarla con un TImage, y también necesitamos a la inversa. Desde el TImage necesitamos poder saber a que TDrawElectronicSymbol nos referimos. El método hipotético PaintElectronicCircuit mencionado anteriormente nos da una pista, y nos sugiere que podría tener lugar la aparición de una nueva clase: La TElectronicCircuit, esta nueva clase sería la encargada de mantener el listado de todos los símbolos, y conectores. Es la abstracción OO del TPaintBox. Como encargada de mantener el estado del circuito, es la cantidata para ser la "dueña" del método PaintElectronicCircuit().

La implementación la dejamos en estudio para después.

 

Para mantener una referencia entre el TImage y el Símbolo en cuestión podemos hacer uso de la propiedad Tag. Cuando presionas un hipotético botón para añadir un nuevo símbolo tiene lugar dos cosas: 1. Se crea un TImage, y 2. Se crea un nuevo objeto de la clase TDrawElectronicSymbol. Ahora bien, ¿Quien lo crea? Si ya tenemos la clase TElectronicCircuit, y dijimos que esta mantiene la lista es de esperarse que sea ésta. Cuando se crea un nuevo símbolo, se lo agrega a una lista. Podemos hacer entonces que nos devuelva el índice en la lista y almacenar este valor en Tag. De esta forma podemos referenciar a nuestro objeto de forma indirecta con el componente visual.

 

Este proceso vendría a ser algo así:


delphi
  1. procedure TFormElectronicCircuit.NewSymbol(SymbolType, PosX, PosY: integer);
  2. var Img: TImage;
  3. begin
  4. Img := TImage.Create(nil); // como es "dueño" es nil. Nos encargaremos nosotros de su liberación
  5. Img.Parent := FormElectronicCiruit;
  6. Img.Left := PosX;
  7. Img.Top := PosY;
  8. LoadSymbolFromFile(SymbolType);
  9. Img.Tag := MiCircuit.NewSymbol(SymbolType, PosX, PosY, Img); // MiCircuit es el objeto global de la clase TElectronicCircuit.
  10. end;
  11.  
  12. procedure TFormElectronicCircuit.ButtonNewCapacitor(Sender: TObject); // nuestro botón para añadir un capacitor
  13.  
  14. begin
  15. NewSymbol(1, Mouse.CursorPos.X, Mouse.Cursor.PosY); // Hagamos de cuenta que el tipo 1 hace referencia a los capacitadores
  16. end;

¿Que hace MiCircuit.NewSymbol()? En primer lugar creará un nuevo objeto de la clase TDrawElectronicSymbol, lo pondrá en una lista, lo asociará con el TImage para de esta forma completar la referencia entre ambos: TImage <---> TDrawElectronicSymbol, mantendrá la posición relativa en el form, y luego devuelve el índice:


delphi
  1. function TElectronicCircuit.NewSymbol(SymbolType, PosX, PosY: integer; SymbolImage: TImage): integer;
  2. var Symbol: TDrawElectronicSymbol;
  3. begin
  4. Symbol := TDrawElectronicSymbol.Create(SymbolType);
  5. Symbol.PosInX := PosX;
  6. Symbol.PosInY := PosY;
  7. Symbol.ImageReference := SymbolImage;
  8. result := ListSymbol.Add(Symbol);
  9. end;

Ya te haces una idea de las cosas que puede tener esta clase TDrawElectronicSymbol.

 

Algo parecido va a ser para la clase TDrawElectronicLine. Esta clase tendrá referencia hacia 2 símbolos. Digamos algo como StartSymbol, y EndSymbol. Cuando tu creas una línea, detectas sobre que Image se hizo clic, y por tanto sabes por su Tag a que objeto de la clase TDrawElectronicSymbol hace referencia, y de forma análoga cuando detectas el segundo clic sobre el TImage de fin, sabes cual Symbol es.

 

Ahora bien, cuando mueves el TImage, actualizas el "estado" de su símbolo asociado. E invocas al método PaintElectronicCircuit. Este método Paint recorrerá la lista de todas las líneas conectoras, examinando sus objetos vinculados y de esta forma sabe en que posición (X,Y) ubicarse y hacia que (X,Y) final moverse.

 

Espero que con esto ya te hagas una idea. No es mi intención ofrecerte todos los detalles; después de todo deberás adaptar esto a tu diseño. Como he dicho: deberás jugar con los eventos de los TImage para detectar cuando se pulsa, se mueve, y se suelta el botón del mouse. No es algo que se haga con un único evento, entra en juego todo un proceso.

 

Saludos,


  • 0





Etiquetado también con una o más de estas palabras: linea, imagenes, unir