में एक कनेक्शन लाइन बनाएं, मैं राफेल में कनेक्शन लाइन बनाने के बारे में कैसे जाउंगा जहां mousedown लाइन के शुरुआती बिंदु को शुरू करता है, mousemove प्रारंभ बिंदु को घुमाने के बिना अंत बिंदु को स्थानांतरित करता है और माउसअप इसे छोड़ देता है ?राफेलजेएस
http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm के स्रोत पर नज़र डालें।
यह आपको शुरू हो सकता है।
संपादित
मैं एक त्वरित उदाहरण है कि आप आरंभिक बढ़त दे देंगे बनाया (:, मानकों के सत्यापन टिप्पणी जोड़ने, आदि अभी भी कुछ काम की जरूरत है)।
नोट: यदि आप अभी भी 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>
उदाहरण देखें पथ अनुकूल करने के लिए है: आप कागज वर्ग के लिए अपने स्वयं के line विधि जोड़ सकते हैं http://jsfiddle.net/rRtAq/9358/
...
Raphael.fn.line = function(startX, startY, endX, endY){
return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY);
};
... जिसे आप बाद में उपयोग कर सकते हैं, पेपर क्लास (सर्कल, आदि) से किसी अन्य ज्ञात विधि की तरह:
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/ देखें)
'राफेल के सामने new' के लिए कोई ज़रूरत नहीं। साथ ही रेखा के सामने भी। –
आप सही हैं। मैंने उन्हें हटा दिया। –
Fiddle काम नहीं कर रहा –