আমি কীভাবে দুটি বা ততোধিক উপাদানগুলির সংযোগের জন্য একটি লাইন আঁকতে পারি? এইচটিএমএল / সিএসএস / জাভাস্ক্রিপ্ট / এসভিজি / ক্যানভাসের যে কোনও সংমিশ্রণ ভাল।
আপনার উত্তর যদি এগুলির কোনওটিকে সমর্থন করে তবে তা উল্লেখ করুন:
এই প্রশ্নটির বিভিন্ন প্রকরণটি একীভূত করতে আপডেট করা হয়েছে ।
উত্তর:
ফ্লোচার্ট ডেমো সহ অসংখ্য ডেমো দেখায় jsPlumb হ'ল একটি বিকল্প যা ড্র্যাগ এবং ড্রপকে সমর্থন করে ।
এটি একটি নিখরচায় সম্প্রদায় সংস্করণ এবং অর্থ প্রদানের সরঞ্জামদণ্ডের সংস্করণে উপলভ্য।
টুলকিট সংস্করণটি সম্প্রদায়ের সংস্করণকে একটি বিস্তৃত ডেটা বাঁধাই স্তর, পাশাপাশি জনপ্রিয় লাইব্রেরির জন্য অ্যাপ্লিকেশন এবং সংহতকরণের জন্য বেশ কয়েকটি ইউআই উইজেটগুলি আবৃত করে এবং বাণিজ্যিকভাবে লাইসেন্সযুক্ত।
এসভিজেসের সাথে লাইনগুলিতে যোগদান করা আমার পক্ষে মূল্যবান এবং এটি পুরোপুরি কার্যকর হয়েছিল ... প্রথমত, স্কেলযোগ্য ভেক্টর গ্রাফিক্স (এসভিজি) ইন্টারেক্টিভিটি এবং অ্যানিমেশনের জন্য সমর্থনযুক্ত দ্বি-মাত্রিক গ্রাফিক্সের জন্য একটি এক্সএমএল-ভিত্তিক ভেক্টর চিত্র বিন্যাস। এসভিজি চিত্র এবং তাদের আচরণগুলি এক্সএমএল পাঠ্য ফাইলে সংজ্ঞায়িত করা হয়। আপনি <svg>ট্যাগ ব্যবহার করে এইচটিএমএলে একটি এসভিজি তৈরি করতে পারেন । অ্যাডোব ইলাস্ট্রেটর অন্যতম সেরা সফ্টওয়্যার যা পাথ ব্যবহার করে জটিল এস.ভি.জি. তৈরি করতে ব্যবহৃত হয়।
একটি লাইন ব্যবহার করে দুটি ডিভ যোগ দেওয়ার পদ্ধতি:
দুটি ডিভ তৈরি করুন এবং আপনার প্রয়োজন অনুযায়ী যে কোনও অবস্থান দিন
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
(ব্যাখ্যার জন্য আমি কিছু ইনলাইন স্টাইলিং করছি তবে স্টাইলিংয়ের জন্য আলাদা সিএসএস ফাইল তৈরি করা সবসময় ভাল)
<svg><line id="line1"/></svg>
লাইন ট্যাগ আমাদের দুটি নির্দিষ্ট পয়েন্ট (x1, y1) এবং (x2, y2) এর মধ্যে একটি লাইন আঁকতে সহায়তা করে। (রেফারেন্সের জন্য w3 স্কুলগুলিতে যান)) আমরা সেগুলি এখনও নির্দিষ্ট করে নেই n't কারণ আমরা লাইন ট্যাগের বৈশিষ্ট্যগুলি (x1, y1, x2, y2) সম্পাদনা করতে jQuery ব্যবহার করব।
মধ্যে <script>ট্যাগটি লেখ
line1 = $('#line1');
div1 = $('#div1');
div2 = $('#div2');
আমি দুটি ডিভ এবং লাইন নির্বাচন করতে নির্বাচকদের ব্যবহার করেছি ...
var pos1 = div1.position();
var pos2 = div2.position();
jQuery position()পদ্ধতি আমাদের একটি উপাদানের বর্তমান অবস্থান অর্জন করতে দেয়। আরও তথ্যের জন্য, https://api.jquery.com/position/ দেখুন ( offset()আপনিও পদ্ধতিটি ব্যবহার করতে পারেন )
এখন যেহেতু আমরা আমাদের প্রয়োজনীয় সমস্ত অবস্থানগুলি অর্জন করেছি আমরা নিম্নলিখিতভাবে লাইন আঁকতে পারি ...
line1
.attr('x1', pos1.left)
.attr('y1', pos1.top)
.attr('x2', pos2.left)
.attr('y2', pos2.top);
jQuery .attr()পদ্ধতিটি নির্বাচিত উপাদানটির বৈশিষ্ট্যগুলি পরিবর্তন করতে ব্যবহৃত হয়।
উপরের লাইনে আমরা যা করেছি তা হ'ল আমরা লাইনটির বৈশিষ্ট্যগুলি পরিবর্তন করেছি
x1 = 0
y1 = 0
x2 = 0
y2 = 0
প্রতি
x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top
position()দুটি মান যেমন একটি 'বাম' এবং অন্য 'শীর্ষ' প্রত্যাবর্তন করে, আমরা সহজেই। টপ এবং বাম অবজেক্টগুলি ব্যবহার করে অ্যাক্সেস করতে পারি (এখানে পোস্ট 1 এবং পোস্ট 2) ...
এখন লাইন ট্যাগে দুটি পয়েন্টের মধ্যে রেখা আঁকার জন্য দুটি স্বতন্ত্র সমন্বয় রয়েছে।
টিপ: ডিভিডগুলির জন্য ইভেন্ট শ্রোতাদের যুক্ত করুন
টিপ: স্ক্রিপ্ট ট্যাগে কিছু লেখার আগে আপনি প্রথমে jQuery লাইব্রেরি আমদানি করে তা নিশ্চিত করুন
জিকুয়েরির মাধ্যমে সমন্বয়গুলি যুক্ত করার পরে ... এটি এর মতো কিছু দেখবে
নিম্নলিখিত স্নিপেট শুধুমাত্র প্রদর্শনের উদ্দেশ্যে, সঠিক সমাধান পেতে দয়া করে উপরের পদক্ষেপগুলি অনুসরণ করুন
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>আমারও কিছুদিন আগে একই চাহিদা ছিল
আমি একজন পূর্ণ ব্যবহার প্রস্থ এবং উচ্চতা SVG এবং আমার divs এবং যোগ এখানে সবকটি এটি যোগ লাইন এই SVG পরিবর্তনশীল করতে।
এখানে আমি কীভাবে এসভিজি ব্যবহার করেছিলাম তা পরীক্ষা করে দেখুন
এইচটিএমএল
<div id="ui-browser"><div class="anchor"></div>
<div id="control-library" class="library">
<div class="name-title">Control Library</div>
<ul>
<li>Control A</li>
<li>Control B</li>
<li>Control C</li>
<li>Control D</li>
</ul>
</div><!--
--></div><!--
--><div id="canvas">
<svg id='connector_canvas'></svg>
<div class="ui-item item-1"><div class="con_anchor"></div></div>
<div class="ui-item item-2"><div class="con_anchor"></div></div>
<div class="ui-item item-3"><div class="con_anchor"></div></div>
<div class="ui-item item-1"><div class="con_anchor"></div></div>
<div class="ui-item item-2"><div class="con_anchor"></div></div>
<div class="ui-item item-3"><div class="con_anchor"></div></div>
</div><!--
--><div id="property-browser"></div>
https://jsfiddle.net/kgfamo4b/
$('.anchor').on('click',function(){
var width = parseInt($(this).parent().css('width'));
if(width==10){
$(this).parent().css('width','20%');
$('#canvas').css('width','60%');
}else{
$(this).parent().css('width','10px');
$('#canvas').css('width','calc( 80% - 10px)');
}
});
$('.ui-item').draggable({
drag: function( event, ui ) {
var lines = $(this).data('lines');
var con_item =$(this).data('connected-item');
var con_lines = $(this).data('connected-lines');
if(lines) {
lines.forEach(function(line,id){
$(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1);
}.bind(this));
}
if(con_lines){
con_lines.forEach(function(con_line,id){
$(con_line).attr('x2',$(this).position().left)
.attr('y2',$(this).position().top+(parseInt($(this).css('height'))/2)+(id*5));
}.bind(this));
}
}
});
$('.ui-item').droppable({
accept: '.con_anchor',
drop: function(event,ui){
var item = ui.draggable.closest('.ui-item');
$(this).data('connected-item',item);
ui.draggable.css({top:-2,left:-2});
item.data('lines').push(item.data('line'));
if($(this).data('connected-lines')){
$(this).data('connected-lines').push(item.data('line'));
var y2_ = parseInt(item.data('line').attr('y2'));
item.data('line').attr('y2',y2_+$(this).data('connected-lines').length*5);
}else $(this).data('connected-lines',[item.data('line')]);
item.data('line',null);
console.log('dropped');
}
});
$('.con_anchor').draggable({drag: function( event, ui ) {
var _end = $(event.target).parent().position();
var end = $(event.target).position();
if(_end&&end)
$(event.target).parent().data('line')
.attr('x2',end.left+_end.left+5).attr('y2',end.top+_end.top+2);
},stop: function(event,ui) {
if(!ui.helper.closest('.ui-item').data('line')) return;
ui.helper.css({top:-2,left:-2});
ui.helper.closest('.ui-item').data('line').remove();
ui.helper.closest('.ui-item').data('line',null);
console.log('stopped');
}
});
$('.con_anchor').on('mousedown',function(e){
var cur_ui_item = $(this).closest('.ui-item');
var connector = $('#connector_canvas');
var cur_con;
if(!$(cur_ui_item).data('lines')) $(cur_ui_item).data('lines',[]);
if(!$(cur_ui_item).data('line')){
cur_con = $(document.createElementNS('http://www.w3.org/2000/svg','line'));
cur_ui_item.data('line',cur_con);
} else cur_con = cur_ui_item.data('line');
connector.append(cur_con);
var start = cur_ui_item.position();
cur_con.attr('x1',start.left).attr('y1',start.top+1);
cur_con.attr('x2',start.left+1).attr('y2',start.top+1);
});
ভিজজেএস এটির তীর উদাহরণ সহ এটি সমর্থন করে, যা টেনে নিতে সক্ষম উপাদানগুলিকে সমর্থন করে।
এটি এর ইন্টারঅ্যাকশন ইভেন্টগুলির উদাহরণ সহ সম্পাদনযোগ্য সংযোগগুলি সমর্থন করে ।
GoJS এর স্টেট চার্ট উদাহরণ সহ এটি সমর্থন করে, যা উপাদানগুলিকে টেনে আনার এবং ছাড়ার এবং সংযোগগুলির সম্পাদনাকে সমর্থন করে।
এই উত্তরটি ওয়াল্টার নর্থউডস-এর উত্তরের ভিত্তিতে রয়েছে ।
সম্প্রতি, আমি একটি সাধারণ ওয়েব অ্যাপ্লিকেশন বিকাশের চেষ্টা করেছি যা ড্রাগ এবং ড্রপ উপাদান ব্যবহার করে এবং তাদের সাথে সংযোগ করার জন্য লাইন রয়েছে। আমি এই দুটি সহজ এবং আশ্চর্যজনক জাভাস্ক্রিপ্ট লাইব্রেরি জুড়ে এসেছি:
রাফায়েল তার সাথে এই সমর্থন করে, Graffle উদাহরণ ।
এই উত্তরটি বন্ধ ভিত্তি করে Awais আখতারের উত্তর , এবং বৈভব জৈন এর উত্তর ।
ডি 3 এর কয়েকশ উদাহরণ রয়েছে , যার কয়েকটি এই প্রশ্নের জন্য উপযুক্ত।
টানা এবং ড্রপ ছাড়াই উদাহরণস্বরূপ, এটি স্থির করা হয়েছে:
ড্রাগ এবং ড্রপ ছাড়াই উদাহরণগুলি, এটি ইন্টারেক্টিভ:
টেনে আনার এবং ছাড়ার উদাহরণ:
এই উত্তরটি বন্ধ ভিত্তি করে গ্লেন ডেটন এর উত্তর ।
mxGraph - দ্বারা ব্যবহৃত draw.io - তার সঙ্গে, এই ব্যবহারের ক্ষেত্রে সমর্থন Grapheditor উদাহরণ । নথিপত্র। উদাহরণ।
এই উত্তরটি বন্ধ ভিত্তি করে Vainbhav জৈন এর উত্তর ।
সাইটোকেস এটিকে তার আর্কিটেকচার উদাহরণের সাথে সমর্থন করে যা ড্রাগনকারী উপাদানগুলিকে সমর্থন করে।
সংযোগ তৈরি করার জন্য, প্রান্তহাঁস এক্সটেনশন রয়েছে। এটি এখনও বিদ্যমান সংযোগগুলি সম্পাদনা করে সমর্থন করে না। প্রশ্ন।
সংযোগ আকারগুলি সম্পাদনা করার জন্য, প্রান্ত-সম্পাদনা এক্সটেনশন রয়েছে। ডেমো।
Edit-editation এক্সটেনশন তবে এখন পর্যন্ত কোন ডেমো হয়, প্রতিশ্রুতি বলে মনে হয়।
জয়েন্ট জেএস / রাপিড এই কিচেনসিংক উদাহরণের সাথে এই ব্যবহারের ক্ষেত্রে সমর্থন করে যা উপাদানগুলিকে টেনে আনার এবং ছাড়ার এবং সংযোগগুলি পুনঃস্থাপনকে সমর্থন করে। এর অনেক উদাহরণ রয়েছে।
এই উত্তরটি বন্ধ ভিত্তি করে Vainbhav জৈন এর উত্তর ।