在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中繪製一條連接線

回答

相關問題