मैं एक अच्छा ड्रैग लागू करने और 3 डिस्क का प्रतिनिधित्व करने वाले कैनवास पर ड्रॉप करने का प्रयास करता हूं।नाइस खींचें और कैनवास पर ड्रॉप करें HTML5
मैं माउस के साथ प्रत्येक द्रव्यमान की स्थिति बदलना चाहता हूं। मेरी मुख्य समस्या यह है कि मैं इन तीन क्षेत्रों में से प्रत्येक के लिए कुल्हाड़ी की लंबाई से बाध्य हूं।
पल के लिए, मैं निम्नलिखित समारोह जब माउस कैनवास के अंदर चल रहा है को लागू किया है (indexMass का मूल्य जो बड़े पैमाने पर ले जाया जाता है इंगित करता है: 1, 2 or 3 और t1, t2, t3 क्रमशः का प्रतिनिधित्व करता है the angle of mass 1, 2, 3):
// Happens when the mouse is moving inside the canvas
function myMove(event) {
if (isDrag) {
var x = event.offsetX;
var y = event.offsetY;
if (indexMass == 1)
{ // Update theta1 value
t1 = t1 + 0.1*Math.atan(y/x);
}
else if (indexMass == 2)
{ // Update theta2 value
t2 = t2 + 0.1*Math.atan(y/x);
}
else if (indexMass == 3)
{ // Update theta3 value
t3 = t3 + 0.1*Math.atan(y/x);
}
// Update drawing
DrawPend(canvas);
}
}
आप देख सकते हैं
t = t + 0.1*Math.atan(y/x);
साथ:
var x = event.offsetX;
var y = event.offsetY;
लेकिन यह प्रभाव बहुत अच्छा नहीं है। एक बार गोलाकार माउस (माउस क्लिक पर) के साथ चुने जाने के बाद, मैं कर्सर को इस क्षेत्र या क्षेत्र के साथ फंसे होने के लिए माउस निर्देशांक के "delta" का पालन करने के लिए पसंद करूंगा जब मैं अब क्षेत्र में नहीं हूं।
संक्षेप में, मुझे नहीं पता कि कैसे एक अच्छा और उपयोगकर्ता के अनुकूल ड्रैग और ड्रॉप बनाने के लिए, अगर कोई मेरी मदद कर सकता है या मुझे कुछ सलाह दे सकता है, तो यह बहुत अच्छा होगा।
धन्यवाद
UPDATE 1
@ Blindman67: आपकी मदद के लिए धन्यवाद, आपका कोड स्निपेट, मैं यह सब समझ में नहीं आया मेरे लिए बहुत जटिल है। लेकिन मैं सही रास्ते पर हूं।
मैं पहली समस्या से शुरू कर रहा हूं: खींचने पर माउस को चयनित डिस्क को घुमाएं या उस पर बहुत अधिक बंद कर दें।
पल के लिए, मैं की तरह मेरे समारोह myMove (जो जब मैं नीचे क्लिक किया और खींच के लिए माउस को स्थानांतरित कर दिया है कहा जाता है) को संशोधित किया है:
// Happens when the mouse is moving inside the canvas
function myMove(event) {
// If dragging
if (isDrag) {
// Compute dx and dy before calling DrawPend
var lastX = parseInt(event.offsetX - mx);
var lastY = parseInt(event.offsetY - my);
var dx = lastX - window['x'+indexMass];
var dy = lastY - window['y'+indexMass];
// Change angle when dragging
window['t'+indexMass] = Math.atan2(dy, dx);
// Update drawing
DrawPend(canvas);
// Highlight dragging disk
fillDisk(indexMass, 'pink');
}
}
जहां indexMass घसीटा डिस्क और window['x'+indexMass] का सूचकांक है, window['y'+indexMass] चयनित डिस्क केंद्र के वर्तमान निर्देशांक हैं।
के बाद, मैं dx, dy क्रमशः निर्देशांक माउस से क्लिक किया गणना जब खींचें (mx, mygetMousePos function द्वारा दिया) शुरू करने और माउस को ले के साथ समन्वय।
अंत में, मैं सेट द्वारा डिस्क के कोण बदलने के लिए, वैश्विक चर (चयनित डिस्क की थीटा), यानी window['t'+indexMass] के लिए:
// Change angle when dragging
window['t'+indexMass] = Math.atan2(dy, dx);
मैं Math.atan2 साथ कोड के अपने भाग लिया है।
लेकिन इस फ़ंक्शन का परिणाम माउस ड्रैगिंग के साथ एक अच्छी एनीमेशन नहीं बनाता है, मैं जानना चाहता हूं कि यह कहां से आ सकता है।
अभी, मैं अक्ष की लंबाई को संशोधित किए बिना केवल ड्रैगिंग को लागू करना चाहता हूं, मैं इस कार्यक्षमता के लिए और बाद में देखूंगा।
अद्यतन 2
मैं माउस के साथ एक चयनित द्रव्यमान का खींचने के बारे में समाधान खोजने के लिए चल रहा है रहते हैं।
मैं पहले क्या किया है का एक संश्लेषण की कोशिश कर के लिए, मेरा मानना है कि निम्नलिखित विधि अच्छा है, लेकिन यह खींच विधि बहुत अच्छी तरह से काम नहीं कर रहा: चयनित डिस्क सही ढंग से माउस का पालन नहीं करता और मैं नहीं जानता कि क्यूं कर।
- कंप्यूट dx, माउस निर्देशांक और चयनित डिस्क निर्देशांक, यानी के बीच डीवाई:
वर dx
myMove function में (समारोह कहा जाता है जब मैं खींचना शुरू करें), मैं करने का निर्णय लिया = parseInt (event.offsetX - विंडो ['x' + indexMass]);
var dy = parseInt (event.offsetY - विंडो ['y' + indexMass]);
indexMass चयनित डिस्क के सूचकांक का प्रतिनिधित्व करता है।
वृद्धि चयनित डिस्क की स्थिति
dx, dyद्वारा (अस्थायी चरtmpX, tmpYमें संग्रहीत)।कंप्यूट नया कोण
theta(वैश्विक चरwindow['t'+indexMass]कंप्यूट नई यानी
disk1(indexMass=1और थीटा =t1) के साथ उदाहरण के लिएthetaके इस नए मूल्य के साथ चयनित डिस्क की स्थिति, द्वारा कोड में पहचान:x1= x0 +l1 * sin(t1) y1= y0 +l1 * sin(t1)
मैं आपको लगता है कि मैं माउस के साथ खींचकर चाहते की लंबाई को संशोधित करने के लिए नहीं बनाने के लिए माउस के साथ अक्ष, यह एक बाधा है।
यहाँ पूरे myMove function (कहा जाता है जब खींचें शुरू कर रहा है) है:
// Happens when the mouse is moving inside the canvas
function myMove(event) {
// If dragging
if (isDrag) {
console.log('offsetX', event.offsetX);
console.log('offsetY', event.offsetY);
var dx = parseInt(event.offsetX - window['x'+indexMass]);
var dy = parseInt(event.offsetY - window['y'+indexMass]);
console.log('dx', dx);
console.log('dy', dy);
// Temp variables
var tmpX = window['x'+indexMass];
var tmpY = window['y'+indexMass];
// Increment temp positions
tmpX += dx;
tmpY += dy;
// Compute new angle for indexMass
window['t'+indexMass] = Math.atan2(tmpX, tmpY);
console.log('printf', window['t'+indexMass]);
// Compute new positions of disks
dragComputePositions();
// Update drawing
DrawPend(canvas);
// Highlight dragging disk
fillDisk(indexMass, 'pink');
}
}
अद्यतन 4 - बाउंटी:
समस्या हल! मैं Math.atan2 फ़ंक्शन के साथ नए कोण की गणना करने के लिए "indexMass-1" डिस्क की स्थिति को ध्यान में रखना भूल गया।