javascript - que - Raphael JS Implementando una herramienta "Lápiz" de manera eficiente

raphael js map

Question

Estoy trabajando en un proyecto que requiere que los usuarios finales puedan dibujar en el navegador como svg-edit y enviar datos SVG al servidor para su procesamiento.

Empecé a jugar con el framework Raphael y parece prometedor.

Actualmente estoy tratando de implementar una herramienta de lápiz o línea de freeline. Básicamente, estoy dibujando un nuevo camino basado en el porcentaje de movimiento del mouse en el área de dibujo. Sin embargo, al final esto va a crear una gran cantidad de caminos para lidiar.

¿Es posible acortar una ruta SVG convirtiendo el movimiento del mouse para usar las rutas Curva y Línea en lugar de segmentos de línea?

Debajo está el código del borrador que preparé para hacer el trabajo ...

    // Drawing area size const
   var SVG_WIDTH = 620;
   var SVG_HEIGHT = 420;

   // Compute movement required for new line
   var xMove = Math.round(SVG_WIDTH * .01);
   var yMove = Math.round(SVG_HEIGHT * .01);

   // Min must be 1
   var X_MOVE = xMove ? xMove : 1;
   var Y_MOVE = yMove ? yMove : 1;

   // Coords
   var start, end, coords = null;
   var paperOffset = null;
   var mouseDown = false;

   // Get drawing area coords
   function toDrawCoords(coords) {
    return {
     x: coords.clientX - paperOffset.left,
     y: coords.clientY - paperOffset.top
    };
   }

   $(document).ready(function() {
    // Get area offset
    paperOffset = $("#paper").offset();
    paperOffset.left = Math.round(paperOffset.left);
    paperOffset.top = Math.round(paperOffset.top);
    // Init area
    var paper = Raphael("paper", 620, 420);
    // Create draw area
    var drawArea = paper.rect(0, 0, 619, 419, 10)
    drawArea.attr({fill: "#666"});

    // EVENTS
    drawArea.mousedown(function (event) {
     mouseDown = true;
     start = toDrawCoords(event);
     $("#startCoords").text("Start coords: " + $.dump(start));
    });
    drawArea.mouseup(function (event) {
     mouseDown = false;
     end = toDrawCoords(event);
     $("#endCoords").text("End coords: " + $.dump(end));
     buildJSON(paper);
    });
    drawArea.mousemove(function (event) {
     coords = toDrawCoords(event);
     $("#paperCoords").text("Paper coords: " + $.dump(coords));
     // if down and we''ve at least moved min percentage requirments
     if (mouseDown) {
      var xMovement = Math.abs(start.x - coords.x);
      var yMovement = Math.abs(start.y - coords.y);
      if (xMovement > X_MOVE || yMovement > Y_MOVE) {
       paper.path("M{0} {1}L{2} {3}", start.x, start.y, coords.x, coords.y);
       start = coords; 
      }
     }
    });


   }); 

Answer 1

Aquí hay una herramienta de dibujo que funciona con el iPhone o el mouse http://irunmywebsite.com/raphael/drawtool2.php. Sin embargo, también vea la utilidad de juego de Daves en http://irunmywebsite.com/raphael/raphaelsource.php que genera datos de ruta a medida que dibuja.

Answer 2

Eche un vistazo al algoritmo de Douglas-Peucker para simplificar su línea.

No conozco ninguna implementación de javascript (aunque google me dirigió a foros para desarrolladores de google maps) pero aquí hay una implementación de tcl que es bastante fácil de entender: http://wiki.tcl.tk/27610

Y aquí hay un artículo de wikipedia que explica el algoritmo (junto con el pseudocódigo): http://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm

Answer 3

Tengo un problema similar, dibujo usando el mouse hacia abajo y el comando M. Luego guardo esa ruta a una base de datos en el servidor. El problema que estoy teniendo tiene que ver con la resolución. Tengo una imagen de fondo donde los usuarios dibujan líneas y formas sobre partes de la imagen, pero si la imagen se muestra en una resolución y las rutas se crean en esa resolución y luego se vuelven a abrir con una resolución diferente, mis caminos se desplazan y son no tiene el tamaño correcto Supongo que lo que estoy preguntando es: ¿hay alguna manera de trazar un camino sobre una imagen y asegurarse de que, independientemente del tamaño de la imagen subyacente, la ruta siga siendo correcta en principio?

Answer 4

Estoy trabajando en algo similar. Encontré una forma de agregar incrementalmente comandos de ruta por un pequeño bypass de la API de Raphael como se describe en mi respuesta aquí . En los navegadores modernos en los que probé, esto funciona razonablemente bien, pero el grado en que las líneas se vean fluidas depende de qué tan rápido pueda funcionar el manejador de mousemove.

Puede probar mi método para dibujar trayectorias usando segmentos de línea y luego realizar el suavizado después de dibujar la ruta dentada inicial (o como lo haga de alguna manera), podando las coordenadas usando Ramer-Douglas-Peucker como sugirió Slebetman, y convirtiendo las L s restantes a los comandos de curva SVG.