Portal    Foro    Buscar    FAQ    Registrarse    Conectarse


Publicar nuevo tema  Responder al tema 
Página 1 de 2
Ir a la página 1, 2  Siguiente
 
Pintar En Un Drawingarea
Autor Mensaje
Responder citando   Descargar mensaje  
Mensaje Pintar En Un Drawingarea 
 
Hola, estoy intentando hacer un programa que pinte en la pantalla para usarlo en los videotutoriales y poder guiar la atención de la audiencia conforme vas explicando.
Julio me pasó un programa llamado Ardesia que hace esa tarea, pero tiene varios problemas, el primero es que viene con un panel lleno de funcionalidades que no se autooculta warreando la pantalla, el segundo es que de vez en cuando recibo "segment faults" y se cierra sin más, y el tercero es que es muy incómodo de usar porque no tiene teclas de acceso rápido y tienes que ir con el ratón cada vez que quieres cambiar de "modo", por ejemplo, si quieres pintar, tienes que activar el modo de pintado en el panel, luego volver a donde quieres pintar, pintar lo que quieras, para seguidamente, tener que volver al panel para desactivar el pintado y ponerlo en modo ratón, y volver para seguir con la explicación...

En fin, que me he puesto a ver si con gambas se podría hacer algo sencillito. He descartado usar transparencias en el formulario porque no funcionan. Así que lo que hago es un pequeño truco: tomo un pantallazo, redimensiono a fullscreen el formulario y el drawingArea, luego cargo un archivo png (que es simplemente un punto transparente) sobre el drawingarea y luego, conforme se mueve el ratón hago que pinte.

El problema es que no sé cómo hacer para conseguir un pintado más fluido. Os dejo el programa a ver si a alguien se le ocurre algo.
(Al cargar ya se puede pintar, para salir, doble click)


Gracias de antemano.

pintapantalla.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla.tar.gz
Tamaño: 6.34 KB
Descargado: 31 veces
pintapantalla.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla.tar.gz
Tamaño: 6.34 KB
Descargado: 31 veces
pintapantalla.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla.tar.gz
Tamaño: 6.34 KB
Descargado: 31 veces

 



 
guadafan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Antonio:

Citar:
El problema es que no sé cómo hacer para conseguir un pintado más fluido.


¿que quieres decir con "más fluido"?

Nota:
Te adjunto tu programa, con algunas modificaciones, a ver que te parecen.
Lo que he "mejorado", es:
- No dibuja  "a saltos", si tienes apretado el botón del ratón, dibuja desde el ultimo punto donde empezaste a dibujar ¿esto es lo de más fluido?
- Al pulsar empieza a pintar desde ese punto a dibujar, y si sueltas, deja de dibujar. Luego puedes volver a mover el ratón a otro lugar y al volver a pulsar, empiezará a pintar de nuevo hasta que dejes de tener pulsado el ratón. Esto se hace con los eventos  _Mouseup() y _MouseMove() y usando una variables banderas "Dibujando" y para guardar las coordenadas las variables "coorxAntigua" y "cooryAntigua"

 ejemplo_de_pintapantalla

pintapantalla-0.0.2.tar.gz
Descripción: Añadiendo control de eventos _down y _up, para poder dibujar discontinuamente (te permite trazar varias cosas) 
Descargar
Nombre del archivo: pintapantalla-0.0.2.tar.gz
Tamaño: 5.49 KB
Descargado: 30 veces
pintapantalla-0.0.2.tar.gz
Descripción: Añadiendo control de eventos _down y _up, para poder dibujar discontinuamente (te permite trazar varias cosas) 
Descargar
Nombre del archivo: pintapantalla-0.0.2.tar.gz
Tamaño: 5.49 KB
Descargado: 30 veces
pintapantalla-0.0.2.tar.gz
Descripción: Añadiendo control de eventos _down y _up, para poder dibujar discontinuamente (te permite trazar varias cosas) 
Descargar
Nombre del archivo: pintapantalla-0.0.2.tar.gz
Tamaño: 5.49 KB
Descargado: 30 veces

 




===================
Blog personal
Web: SoloGambas seleccion de articulos dedicados a Gambas
Visita el Curso de Gambas3 ¡¡¡Gratuito!!!
 
última edición por jsbsan el Jueves, 25 Julio 2013, 21:12; editado 4 veces 
jsbsan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Cojonudo, Julio

Ayer seguí trasteando y me di cuenta de que no necesitaba la imagen transparente de apoyo, sino que podía usar el DrawingArea sin la propiedad Cached activada y seguí siendo transparente. Así que lo borré.

Estuve viendo que Paint tiene muchas posibilidades y le añadí una nueva funcionalidad. Al pulsar la tecla 'c' dibuja un rectángulo
Lo he integrado con lo que me has retocado tú. También cambié los nombres de las coordenadas x, y del ratón porque me estaba mareando, así que le puse mouseinicioX y mousefinalX para que fuera más claro.

Lo que aún no sé es cómo borrar o limpiar el DrawingArea sin cerrar la aplicación. Si supiera, quizás se podría ir pintando y borrando el rectángulo mientras se arrastra el ratón, como hacen normalmente los programas de dibujo, porque ahora mismo, picas la tecla 'c', arrastras el ratón para dibujar un rectángulo (pero no se ve nada) y al soltar dibuja el rectángulo.

 lineayrectangulo

Ajunto nueva versión.

pintapantalla.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla.tar.gz
Tamaño: 7.54 KB
Descargado: 20 veces
pintapantalla.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla.tar.gz
Tamaño: 7.54 KB
Descargado: 20 veces
pintapantalla.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla.tar.gz
Tamaño: 7.54 KB
Descargado: 20 veces

 



 
guadafan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Antonio

Algunas cosas que he añadido/cambiado:
Citar:
"Al pulsar la tecla 'c' dibuja un rectángulo "

He puesto que sea "r" para dibujar un rectángulo, y la "c" la uso para dibujar un circulo..

Citar:
"Lo que aún no sé es cómo borrar o limpiar el DrawingArea sin cerrar la aplicación"

Vale, ya funciona el borrado (pulsando la tecla Retroceso o backspace)

Citar:
"quizás se podría ir pintando y borrando el rectángulo mientras se arrastra el ratón"

Esto es más complicado, hice un programa hace tiempo que lo hacia (programas croquis ( http://jsbsan.blogspot.com.es/2013/...afico-para.html) pero en los ordenadores "pequeños", me dijiste que iba muy mal, (consumía toda la cpu, y no se veía fluido) (lo vimos para el programa de las orlas, y descartamos esa forma de hacerlo..).

Citar:
arrastras el ratón para dibujar un rectángulo (pero no se ve nada) y al soltar dibuja el rectángulo.

He puesto que se dibuje el punto inicial del rectángulo....


Nota:
Se me ocurre, que se puede hacer que el ordenador "hable", y diga, "defina el punto inicial del rectangulo", y luego "indique el punto final"....

pintapantalla-0.0.4.tar.gz
Descripción: Ahora se puede borrar (tecla backspace ), dibujar un circulo pulsando "c" , dibujar un rectangulo "r", o lineas.. 
Descargar
Nombre del archivo: pintapantalla-0.0.4.tar.gz
Tamaño: 6.29 KB
Descargado: 21 veces
pintapantalla-0.0.4.tar.gz
Descripción: Ahora se puede borrar (tecla backspace ), dibujar un circulo pulsando "c" , dibujar un rectangulo "r", o lineas.. 
Descargar
Nombre del archivo: pintapantalla-0.0.4.tar.gz
Tamaño: 6.29 KB
Descargado: 21 veces
pintapantalla-0.0.4.tar.gz
Descripción: Ahora se puede borrar (tecla backspace ), dibujar un circulo pulsando "c" , dibujar un rectangulo "r", o lineas.. 
Descargar
Nombre del archivo: pintapantalla-0.0.4.tar.gz
Tamaño: 6.29 KB
Descargado: 21 veces

 




===================
Blog personal
Web: SoloGambas seleccion de articulos dedicados a Gambas
Visita el Curso de Gambas3 ¡¡¡Gratuito!!!
 
jsbsan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Excelente truco el de hacer visible o invisible para limpiar.
Había probado con DrawingArea1.Refresh(), pero no sé muy bien por qué borra todo, menos lo último que hiciste, quizás se pueda aprovechar eso para hacer animaciones, no lo sé.

¿Cómo funcionan los arrays en gambas?
Para seguir haciendo experimentos, me gustaría que mientras se mueve el ratón, vaya guardando todos los valores que va tomando las coordenadas del ratón.
Lo que quiero es coger lo que hay en la posición 10 empezando por la cola de ese array.

He leído que como tiene que ser dinámica se inicializan así

Public posicionx As Integer[]


Y luego en el evento donde el ratón de mueve pongo

posicionx.Add(Mouse.X)
posiciony.Add(Mouse.Y)

Pero me dice "objeto nulo" ¿Por qué?
 



 
guadafan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Te falta instanciarlo:

Posicionx=new integer[]

Esto lo pones antes de anadir valores

Tambien lo puedes añadir en la definición

public posicionx as new integer[]

de igual modo lo haras con Posiciony
 




===================
Blog personal
Web: SoloGambas seleccion de articulos dedicados a Gambas
Visita el Curso de Gambas3 ¡¡¡Gratuito!!!
 
jsbsan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
jsbsan escribió: [Ver mensaje]
Te falta instanciarlo:

public posicionx as new integer[]



Gracias, es que no controlo aún nada de gambas.

Ahora le he añadido que al pulsar f, te saque la flecha. Para eso he usado una pequeña imagen con forma de triángulo que la coloco justo al terminar de trazar. Luego la roto según el ángulo de la recta que une el punto final con el punto elegido del array (10 valores atrás). Luego según el cuadrante juego con el ángulo para ajustar la imagen del triángulo y rotarlo antes de plasmarlo en el drawinarea.

 flechas

Otra cosa que estoy pensando que se le podría hacer es lo que tiene Ardesia para "estirar" el trazo y que salga más lineal. Tomando los valores que haya en el array, recorrerlos de nuevo saltándonos valores, por ejemplo, de 15, en 15 (o lo que sea, según se vea que quede bien) y aplicándo el pintado de líneas rectas con esos valores. Lo único es el rollo este de que no haya nada para "limpiar" solo una zona del drawinarea y dejarla como al principio, sólo con eso ya se tendría más control.

Y lo último que se me ocurre y que también es interesante que he visto en algunos videotutoriales es el seleccionar una zona, por ejemplo, rectangular y oscurecer un poco toda la pantalla, excepto esa zona. Pero ahora mismo no se me ocurre cómo se podría hacer eso.


En fin, lo adjunto tal cual está ahora por si alguien le quiere meter mano o se le ocurre alguna idea.
 



 
guadafan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Antonio:

Citar:
Gracias, es que no controlo aún nada de gambas.

Mirate http://cursogambas.blogspot.com.es/...s-matrices.html, aunque el curso no esta completamente terminado, te explica muchas cosas para iniciarte.

Citar:
En fin, lo adjunto tal cual está ahora por si alguien le quiere meter mano o se le ocurre alguna idea.

Se te ha olvidado adjuntarlo...

Citar:
Ahora le he añadido que al pulsar f, te saque la flecha. ....

Vaya, una forma muy curiosa de añadir la flecha, yo habia pensado en aplicar un poco de matemáticas y dibujar el triangulo... pero tu forma esta muy bien, por si quieres cambiar la fecha y usar otro tipo de señalador (un circulo, otro forma de flecha, una manita, etc...)

Citar:
Lo único es el rollo este de que no haya nada para "limpiar" solo una zona del drawinarea y dejarla como al principio, sólo con eso ya se tendría más control.

Para borrar lo que se me ocurre es:
- tener una lista de las cosas que vayas dibujando (usariamos un variant[]) y cada elemento que dibujas, (rectangulo, circulo, linea, linea con felcha, se va añadiendo a esa lista).
-Cuando quieras "borrar" algo, pues:
----------- lo selecciona (que donde hagas click esta dentro del elemento),
----------- se borraria el elemento de la lista,
----------- y se dibuje toda la lista de nuevo, asi tendriamos el efecto de Borrado

Esta lista de elementos dibujado, tambien nos seria util para tener los controles de "deshacer" y "rehacer".

Citar:

seleccionar una zona, por ejemplo, rectangular y oscurecer un poco toda la pantalla, excepto esa zona. Pero ahora mismo no se me ocurre cómo se podría hacer eso.

Si es un rectangulo la zona elegida, seria, crear 4 rectangulos (adjuntos) , con el relleno de fondo "gris", y pintarlos :
 ocultar_rectangulos
 




===================
Blog personal
Web: SoloGambas seleccion de articulos dedicados a Gambas
Visita el Curso de Gambas3 ¡¡¡Gratuito!!!
 
jsbsan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Ups! Ahora sí.
He aprovechado y he añadido dibujar una elipse al pulsar la e.

Lo que comentas de oscurecer 4 regiones me lo voy a mirar, que parece sencillo. Lo otro, para cuando tenga más tablas.

pintapantalla-0.0.6.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla-0.0.6.tar.gz
Tamaño: 11.46 KB
Descargado: 20 veces
pintapantalla-0.0.6.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla-0.0.6.tar.gz
Tamaño: 11.46 KB
Descargado: 20 veces
pintapantalla-0.0.6.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla-0.0.6.tar.gz
Tamaño: 11.46 KB
Descargado: 20 veces

 



 
guadafan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Responder citando   Descargar mensaje  
Mensaje Re: Pintar En Un Drawingarea 
 
Ahora la letra 'o' hace un rectángulo y oscurece el resto. Pero no me convence del todo porque solo lo puedes usar una vez, para volver a usarlo tienes que limpiar y volver a proceder porque de lo contrario se irá haciendo cada vez todo más oscuro.

Lo que voy a intentar es hacer como hace el ejemplo "clip image" del ejemplo painting de gambas. La idea sería:

- Al pulsar la 'o' oscurecer toda la pantalla con transparencia.
- Al hacer el rectángulo, cargar justo en esas coordenadas un clip de la imagen de fondo original, igual que hace en el ejemplo del perrito, pero con forma de rectángulo.

pintapantalla-0.0.7.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla-0.0.7.tar.gz
Tamaño: 11.88 KB
Descargado: 24 veces
pintapantalla-0.0.7.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla-0.0.7.tar.gz
Tamaño: 11.88 KB
Descargado: 24 veces
pintapantalla-0.0.7.tar.gz
Descripción:  
Descargar
Nombre del archivo: pintapantalla-0.0.7.tar.gz
Tamaño: 11.88 KB
Descargado: 24 veces

 



 
guadafan - Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Mostrar mensajes anteriores:    
 
OcultarTemas parecidos
Tema Autor Foro Respuestas último mensaje
No hay nuevos mensajes Imagen En Un Drawingarea nrcefe General 4 Jueves, 24 Septiembre 2009, 22:32 Ver último mensaje
nrcefe
No hay nuevos mensajes Ayuda Drawingarea kok Controles/Librerías/Componentes 15 Lunes, 28 May 2012, 16:11 Ver último mensaje
jsbsan
No hay nuevos mensajes Drawingarea + Dibuja Por Codigo + Exportar... tincho General 6 Domingo, 24 Enero 2016, 16:52 Ver último mensaje
tincho
No hay nuevos mensajes Cómo Pintar Un Píxel En Un Drawing Area Alaplancha Controles/Librerías/Componentes 34 Sabado, 06 Febrero 2016, 21:17 Ver último mensaje
Shell
 

Publicar nuevo tema  Responder al tema  Página 1 de 2
Ir a la página 1, 2  Siguiente

Usuarios navegando en este tema: 0 registrados, 0 ocultos y 1 invitado
Usuarios registrados conectados: Ninguno


 
Lista de permisos
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas
No puede adjuntar archivos
Puede descargar archivos
No puede publicar eventos en el calendario



  

 

cron