在RaphaelJS中绘制一条连接线

如何在Raphael绘制一条连线，其中mousedown启动线条的起始点，mousemove移动终点而不移动起点，mouseup将它保持原样？在RaphaelJS中绘制一条连接线

2010-08-27 Louis

看看http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm的来源。

这可能会让你开始。

编辑

我做了一个简单的例子，会给你一个良好的开端（还需要一些工作，但：参数验证，添加注释，等等）。

注意：你还是要适应的路径raphael.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8"> 


<!-- Update the path to raphael js --> 
<script type="text/javascript"src="path/to/raphael1.4.js"></script> 
<script type='text/javascript' 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<style type='text/css'> 
svg { 
    border: solid 1px #000; 
} 
</style> 

</head> 
<body> 
<div id="raphaelContainer"></div> 
<script type='text/javascript'> 
    //<![CDATA[ 

function Line(startX, startY, endX, endY, raphael) { 
    var start = { 
     x: startX, 
     y: startY 
    }; 
    var end = { 
     x: endX, 
     y: endY 
    }; 
    var getPath = function() { 
     return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y; 
    }; 
    var redraw = function() { 
     node.attr("path", getPath()); 
    } 

    var node = raphael.path(getPath()); 
    return { 
     updateStart: function(x, y) { 
      start.x = x; 
      start.y = y; 
      redraw(); 
      return this; 
     }, 
     updateEnd: function(x, y) { 
      end.x = x; 
      end.y = y; 
      redraw(); 
      return this; 
     } 
    }; 
}; 



$(document).ready(function() { 
    var paper = Raphael("raphaelContainer",0, 0, 300, 400); 
    $("#raphaelContainer").mousedown(

    function(e) { 
     x = e.offsetX; 
     y = e.offsetY; 
     line = Line(x, y, x, y, paper); 
     $("#raphaelContainer").bind('mousemove', function(e) { 
      x = e.offsetX; 
      y = e.offsetY; 
      line.updateEnd(x, y); 
     }); 
    }); 

    $("#raphaelContainer").mouseup(

    function(e) { 
     $("#raphaelContainer").unbind('mousemove'); 
    }); 
}); 
    //]]> 
    </script> 
</body> 
</html>

见例如：http://jsfiddle.net/rRtAq/9358/

来源

2010-08-27 08:29:47

无需'在拉斐尔前new'。以及在线前。 – 2010-09-02 09:43:33

你说得对。我删除了它们。 – 2010-09-02 11:14:55

小提琴不工作 – 2012-09-04 10:32:25

您可以添加自己的line方法纸张类...

Raphael.fn.line = function(startX, startY, endX, endY){ 
    return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY); 
};

...你可以在以后使用，就像Paper class（circle等）中的其他已知方法一样：

var paper = Raphael('myPaper', 0, 0, 300, 400); 
paper.line(50, 50, 250, 350); 
paper.line(250, 50, 50, 150).attr({stroke:'red'});

（见http://jsfiddle.net/f4hSM/）

来源

2013-06-11 03:11:24

在RaphaelJS中绘制一条连接线

回答

相关问题