Con motivo de un posible proyecto me puse a investigar sobre como hacer una especie de «paint» en web. Conocía la existencia de canvas pero no tenía muy claro hasta donde podía llegar y los problemas de compatibilidad de navegadores que podía tener.
Al final me lié y me lié y terminé desarrollando un plugin de jQuery así que nada, aquí lo dejo para el que le pueda servir. Y aquí una DEMO.
Instrucciones de uso:
- Agregar jQuery a nuestra página web
- Agregar una referencia al plugin canvasPaint.js
- Añadir este trozo de código aplicándolo a una capa:
var canvasManager; $(window).load(function () { canvasManager = $(".canvas").canvasPaint(); });
El plugin por si solo funciona en navegadores modernos, pero no en IE7 o IE8. Si queremos que funcione en estos necesitamos apoyarnos en la versión PRO de otro plugin, FlashCanvas. Y es por esto por lo que el plugin se inicializa en el «oload» de la ventana y no en el «onready» como suele ser común. Necesitamos que el plugin FlahCanvas se ejecute antes y así nos aseguramos. Con este plugin nos funcionará todo correctamente en IE7 y IE8, eso si, más lento.
<!--[if lt IE 9]> <script src="FlashCanvasPro/flashcanvas.js" type="text/javascript"></script> <![endif]-->
Una vez inicializado el plugin y gracias a la variable referencia que obtenemos «canvasManager» podemos llamar a todos sus métodos que son:
Método | Parámetros | Descripción |
activateCircle | – | Selecciona la herramienta de dibujar círculos rellenos |
activateEmptyCircle | – | Selecciona la herramienta de dibujar círculos |
activateEmptyRectangle | – | Selecciona la herramienta de dibujar rectángulos |
activateEraser | – | Selecciona la herramienta de borrar |
activateLine | – | Selecciona la herramienta de dibujar líneas |
activatePen | – | Selecciona la herramienta lápiz |
activateRectangle | – | Selecciona la herramienta de dibujar rectángulos rellenos |
activateSpray | – | Selecciona la herramienta spray |
changeFillColor | Color | Cambia el color de relleno |
changeOpacity | 0-100% | Cambia la opacidad |
changeSprayDensity | 0-100% | Cambia la densidad de la herramienta spray |
changeStrokeColor | Color | Cambia el color de línea |
changeStrokeSize | pixeles | Cambia el grosor de la línea |
clearAll | – | Limpia todo el lienzo |
loadBackgroundImage | URL | Carga una imágen en el fondo |
redo | – | Rehace la última operación |
undo | – | Deshace la última operación |
Muy bueno, yo tengo pensado hacer algo parecido pero no tengo idea de como lograr las animaciones para cuando arrastro por ejemplo la linea que siga el cursor del mouse y cuando la suelte se quede dibujada. agradecería si pudieras ayudarme en el tema. gracias de antemano.
Bueno, puedes mirar el codigo que esta resuelto ese problema. Uso dos capas, la de lo que esta pintado y la de lo que estoy pintando en este momento. El truco es en borrar y volver a pintar esta segunda capa cada vez que se mueve el mouse.
si ya capte la idea pero ahora me surge otro problema, yo no quiero hacer como un plugin sino como una aplicación web y me da problemas no me crea los canvas.
Hola, yo tengo un codigo que hace las lineas con el mouse solo con javascript por si te interesa
Yo justo necesito eso con javascript para evitar canvas. Podrás compartirlo por favor?
Puedo escribirte por correo porque mi cuenta de internet es limitada y pronto se me va a acabar?
Muchas Gracias Oscar. Me sirvio mucho este componente.
Me alegro de ello. Un saludo.
Me tome el atrevimiento de modificar el código y hacerle una mejora a la herramienta activatePen al seleccionar el lápiz se muestra una linea discontinua y resolví ese problema creo no se si afecte otras funcionalidades para que las revises
https://drive.google.com/file/d/0B83Vo5IZOGLqNloxSTR5VlM3U1U/edit?usp=sharing
Muy bueno Oscar… pero tambien tengo la misma consulta que Orelvis solo quiero obtener la idea de la creacion de la linea que sigue al puntero del mouse quisiera porfa que me ayudes o me guíes gracias
Buenas, no se muy bien que quieres decir con que quieres obtener la idea. Lo único que puedo hacer es invitarte a que mires y remires el código.
Hola Ocar Buenas tardes lo primero felicitar por paint, con canvas la pregunta se puede utilizar la aplicación web tal como aparece http://www.oscardelossantos.es/demos/canvasPaint/default.html es para una web de utilidades Online gratis . Un saludo que tengas un buen dia..
Hola Jose Luis. Si, usalo sin problema, para eso está.
Buena he usado su canvasPaint.js, pero quiero ponerle una imagen por defecto no un backgraund, como lo podria hacer.
Perdona pero no entiendo. Para ti cual es la diferencia entre ponerle un background y una imagen por defecto?
Buenas amigo, pudo colocar la imagen en el cuadro?
Hola estimado Jose, yo he tenido la misma pregunta que tú ya que si lo coloco como fondo al momento de guardar la imagen solo se guarda los puntos (capa current), para insertar una imagen en el canvas, en el evento INIT colocar esto:
// Imagen
var img = new Image();
img.src = «ruta_imagen/foto.png»;
img.onload = function() {
canvas.background.context.drawImage(img, 0, 0);
}
Muy buena aplicación. Muy completa y de fácil integración en tu web.
Enhorabuena
este lenguaje se puede utilizar para desarrollar una aplicacion android
La herramienta «texto» no funciona, sale un cartel que dice que no está implementado.
Que hay que hacer para que funcione.
Gracias
Hola te felicito esta muy bueno, quisiera saber donde consigo el proyecto completo gracias de antemano.
Hola Oscar, !FELICITACIONES¡ es un excelente trabajo. Por favor como puedo acceder al codigo Html. Quiero hacer una aplicación parecida.
Muchas Gracias por tu excelente ayuda.
Oscar recibe un cordial saludo, soy nuevo en este tema, lo comprenderas hay cosas que me falta comprender, por favor podrías enviarme el archivo html que funciona con PaintCanvas.js
Muchas Gracias.
Buen dia Oscar, viendo el formato tipo Canvas, quisiera colocar una imagen dentro del editor, como haria? Y al mismo tiempo pintarla
Muy buenas tardes como se podría incluir texto desde el teclado muchas gracias