Çizgi filmin çizginin başlangıç noktasını başlattığı noktada Raphael'de bir bağlantı çizgisi çizmeye nasıl giderim, mousemove başlangıç noktasını hareket ettirmeden bitiş noktasını hareket ettirir ve fare başı olduğu gibi bırakır ?RaphaelJS'de bir Bağlantı Çizgisi Çizme
http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm kaynağına bir göz atın.
Bu, başlamanıza neden olabilir.
DÜZENLEME Sana bir başlangıç verecektir hızlı bir örnek yapılmış (hala bazı iş olsa gerek: parametrelerin doğrulama, vesaire, yorum ekleme).
Not: Hala örneğe bakın
<!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>
Raphaël.js'ye yolunu uyarlamak zorunda: ... Sen Kağıt sınıfına kendi line yöntemi ekleyebilirsiniz http://jsfiddle.net/rRtAq/9358/
Raphael.fn.line = function(startX, startY, endX, endY){
return this.path('M' + startX + ' ' + startY + ' L' + endX + ' ' + endY);
};
... Daha sonra, Paper sınıfından bilinen diğer herhangi bir yöntem gibi (daire, vb.) Kullanabilirsiniz:
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/ bakınız)
Raphael önünde new' 'gerek yok. Hattın önünde olduğu gibi. –
Haklısınız. Onları çıkardım. –
Fiddle çalışmıyor –