Necesito escribir una aplicación que acepte doodles muy simples por los usuarios, algo así como en tenthousandcents y thesheepmarket.¿Qué recomienda para aceptar dibujos del usuario en el navegador?
Por ejemplo, podría querer que los usuarios escriban su nombre con el mouse.
¿Alguna sugerencia?
Ni siquiera necesito alojarlo yo mismo. Si hay servicios ofrecidos en algún lugar que puedo usar, está bien.
No es demasiado difícil armar una aplicación básica de garabatos con solo html. Dejaré que resuelvas los detalles de prepararlo para la producción.
Estoy usando extjs aquí como un marco de eventos de navegador cruzado, pero puede usar lo que sea que se sienta cómodo (jquery). También estoy usando Raphael para obtener la funcionalidad de dibujo de navegador cruzado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TestPage</title>
<script language="javascript" src="raphael-src.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script language="javascript">
scribbler = function (container, width, height) {
this.canvas = Raphael(container, width, height);
this.currentdraw = null;
Ext.get(container).on('mousedown', function(e) {
var el = Ext.get(container);
this.currentdraw = this.canvas.path({ stroke: "black", fill: "none", "stroke-width":4 });
this.currentdraw.moveTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}, this);
Ext.get(container).on('mousemove', function(e) {
var el = Ext.get(container);
if (this.currentdraw != null)
{
this.currentdraw.lineTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}
}, this);
Ext.get(container).on('mouseup', function(e) {
this.currentdraw = null;
}, this);
}
var scribble;
Ext.onReady(function()
{
scribble = new scribbler("container", 800,600);
}
);
</script>
</head>
<body>
<div id="container" style="position:relative;border:1px solid black;width:640px;height:400px">
</div>
</body>
</html>
Deberá registrar y almacenar las distintas líneas de garabatos en un formulario para enviar. Y asegúrese de que el puntero del mouse sea correcto todo el tiempo (es una barra de texto debajo de IE).
De todos modos, disfrute.
PS. He subido un ejemplo de trabajo que incluye raphael y complete las bibliotecas extjs2 al drop.io (3Mb, 7zip).
PPS. He subido un ejemplo de trabajo que es un control básico (pero bastante completo). Ver inquisitiveturtle.
Bueno, tenthousandcents es una aplicación Adobe Flash. El mejor lugar para comenzar es comenzar a aprender Flash si realmente desea hacer algo similar. Realmente no va a ser nada fácil aceptar incluso garabatos simples si no conoces ningún marco.
PODRÍA aprender Flash ... pero como quiero esto solo para una aplicación temporal rápida, simplemente no tengo ganas. Acabo de pensar que debería haber algunos prefabricados que podría simplemente enchufar y usar. – carrier
Una opción es utilizar la etiqueta HTML5 <canvas>, admitida en Firefox, Safari y Opera, con javascript, y luego cargar la imagen en los datos del formulario.
Esto bloquea a todos los que usan IE.
Adobe Flash es probablemente su mejor opción.
Como las otras respuestas indican, Flash sería el método más fácil.
Pero no descarte el lienzo. A través de algunos ingeniosos javascript y algunos de propiedad de MS guff (VML) puede emulate canvas behaviour in IE.
Si flash no es lo tuyo (seguro que no es mío), entonces esta podría ser una alternativa muy ordenada.
Otra alternativa de flash y simplemente me gusta SVG.
Si no desea utilizar Flash, creo lienzo es probablemente su mejor apuesta, como otros han mencionado. Hay algunos proyectos flotando que emulan su soporte en IE, pero el más completo (que yo sepa) es excanvas. Mozilla tiene un tutorial para usarlo, al igual que Bill Mill. This (anterior) tutorial habla sobre el uso de lienzo con AJAX.
Sin embargo, si no desea crear la suya propia y solo desea la capacidad, es posible que desee buscar en pizarras en línea como Dabbleboard (que tiene una API) o skrbl (que tiene un artilugio incrustable).
Hasta el momento, la mejor y más fácil solución que he encontrado es usar algo como esto: http://www.flashnifties.com/flash_guestbook.php
Yo recomendaría el uso de la etiqueta <canvas>; está disponible de forma nativa en Safari, Chrome, Firefox y Opera, y está disponible al usar ExplorerCanvas en IE, que es un envoltorio simple que hace que el lenguaje VML de IE sea accesible desde una interfaz compatible con lienzo. Consulte this article para obtener un tutorial sobre cómo crear una aplicación de dibujo utilizando el elemento <canvas>. Puede encontrar muchos documentos y tutoriales llamando al searching Google.
Hay una aplicación de dibujo de código abierto <canvas> con la que puede jugar y descargar here.
Se puede echar un vistazo a cómo lo hacen Drawing in Google Docs:
Google utiliza SVG en Firefox, Opera, Chrome y otros navegadores que lo soportan y VML en Internet Explorer, por lo que no es necesario tercera plug-ins de fiesta
Puede usar un applet de Java como Shi-painter como lo hacen muchas implementaciones de oekaki, como the one at iiichan.net.
Descargo de responsabilidad: Entiendo el estigma asociado con los applets de Java en estos días, pero pensé que lo incluiría para completar. ;)
genial, lo probaré. – carrier
no sería capaz de elaborar sobre la grabación y el almacenamiento de líneas de garabatos, ¿o sí? esto se ve bastante bien para mis necesidades. – carrier
Um sí, eso fue divertido :) Ver el PPS adicional. –