Làm thế nào tôi sẽ vẽ một đường kết nối trong Raphael trong đó mousedown khởi tạo điểm bắt đầu của dòng, mousemove di chuyển điểm kết thúc mà không di chuyển điểm bắt đầu và mouseup rời khỏi nó vì nó ?Vẽ đường kết nối trong RaphaelJS
Hãy xem nguồn của http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm.
Điều này có thể giúp bạn bắt đầu.
EDIT
tôi đã thực hiện một ví dụ nhanh chóng mà sẽ cung cấp cho bạn một khởi đầu (vẫn cần một số công việc mặc dù: xác nhận các thông số, thêm ý kiến, vân vân).
Lưu ý: bạn vẫn phải thích ứng với đường dẫn đến Raphaël.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>
Xem ví dụ: http://jsfiddle.net/rRtAq/9358/
Bạn có thể thêm phương pháp line của riêng bạn để lớp giấy ...
Raphael.fn.line = function(startX, startY, endX, endY){
return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY);
};
... mà bạn có thể sử dụng sau này, giống như bất kỳ phương pháp đã biết nào khác từ lớp Giấy (vòng tròn, v.v.):
var paper = Raphael('myPaper', 0, 0, 300, 400);
paper.line(50, 50, 250, 350);
paper.line(250, 50, 50, 150).attr({stroke:'red'});
(thấy http://jsfiddle.net/f4hSM/)
Không cần cho 'new' trước Raphael. cũng như ở phía trước của dòng. –
Bạn nói đúng. Tôi đã xóa chúng. –
Fiddle không hoạt động –