Raphael JS高效实现“铅笔”工具

Question

我正在进行一个项目，要求最终用户能够像svg-编辑一样在浏览器中绘制并将SVG数据发送到服务器进行处理。

我已经开始使用拉斐尔框架了，它看起来很有希望。

目前，我正在尝试实现铅笔或自由线类型的工具。基本上，我只是画了一条新的路径，基于鼠标在绘图区域的移动百分比。然而，到最后，这将创造大量的路径来处理。

是否可以通过将鼠标移动转换为使用曲线和直线路径而不是线段来缩短SVG路径？

下面是我为完成这项工作而起草的代码草案.

    // 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

看看道格拉斯-派克算法来简化你的线条。

我不知道有任何javascript实现(尽管googling引导我到google开发人员的论坛)，但是这里有一个很容易理解的tcl实现：http://wiki.tcl.tk/27610

下面是维基百科的一篇文章，解释算法(以及伪代码)：算法

Answer 2

这里有一个绘图工具，它与iPhone或鼠标http://irunmywebsite.com/raphael/drawtool2.php一起工作，但是也可以查看Daves的“游戏实用工具”@ http://irunmywebsite.com/raphael/raphaelsource.php，它在绘图时生成路径数据。

Answer 3

我也在做类似的事情。我找到了一种通过绕过Raphael来增量添加路径命令的方法，如我在回答这里中所概述的那样。在我测试过的现代浏览器中，这表现得相当不错，但是线条看起来流畅的程度取决于mousemove处理程序的工作速度。

您可以尝试我的方法，使用线段绘制路径，然后在绘制初始锯齿路径(或在某种程度上)之后执行平滑操作，方法是使用建议的修剪坐标，并将其余的Ls转换为SVG曲线命令。