Ç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
15
A
cevap
22
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/
8
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)
İlgili konular
- 1. 2B örtülü bir skaler alanın bir ISO çizgisi çizme
- 2. iOS hangi belirtme çizgisi aksesuarı arasında bağlantı kurduğunu ayırt eder
- 3. Qt 5.5 resim çizme
- 4. JFrame'de bir ızgara çizme
- 5. pikselli bir doku çizme
- 6. CSS kullanarak bir kılavuz çizme
- 7. iPhone'da basit bir grafik çizme
- 8. IOS: parmağınızla bir çizgi çizme
- 9. MapsApp benzeri bir Yerleşimi Çizme
- 10. Basit bir daire çizme uiimage
- 11. ggplot, yüzler arası noktalar arasında çizgi çizme
- 12. eğim çizgisi ile polyline
- 13. Bıyık JS Sofra Çizgisi
- 14. SVG tebeşir çizgisi sorunları
- 15. arsa arsındaki arsa çizgisi
- 16. ileri eğik çizgisi, json
- 17. Veri çizgisi özniteliği
- 18. MapKit - Harita çizgisi
- 19. Windows Form uygulamasında şekil çizme
- 20. Android'de bir SweepGradient ile bir yay çizme
- 21. matlab kullanarak bir düzleme bir küre çizme
- 22. Gnuplot, bir satırdan bir satırdaki veriyi çizme
- 23. Bir Satır İçi Çizgi Çizgisi Stilleri Oluşturmak
- 24. Android, Çevresinde çember çizme
- 25. textview metninde çizgi çizme
- 26. CSS'de açılı çizgiler çizme
- 27. QWidget üzerinde çizgi çizme
- 28. iPhone/iPad'de çizgi çizme
- 29. Bahar çizme + Groovy + logback.groovy
- 30. Bahar çizme dış application.properties
Raphael önünde new' 'gerek yok. Hattın önünde olduğu gibi. –
Haklısınız. Onları çıkardım. –
Fiddle çalışmıyor –