गणित में अपेक्षाकृत अच्छे किसी व्यक्ति के लिए यहां एक समस्या है। मेरे पास दो बॉक्स हैं जिन्हें मैं एक HTML तत्व द्वारा बनाई गई रेखा के साथ एक दूसरे से जोड़ना चाहता हूं। यहाँ कोड है:

var line = document.getElementById("line");

function drawLine(x1, y1, x2, y2) {
  // ...
}
.box1, .box2 {
  position: absolute;
  background: #f00;
  height: 10px;
  width: 10px;
}

.box1 {
  top: 10px;
  left: 10px;
}

.box2 {
  top: 200px;
  left: 150px;
}

.line {
  position: absolute;
  background: #000;
  height: 1px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <span class="line" id="line"></span>
</body>
</html>

नोट मैं चाहता हूं कि यह प्रतिक्रियाशील हो, ताकि मैं क्यूब्स को स्थानांतरित कर सकूं।

धन्यवाद।

-2
tscpp 5 नवम्बर 2019, 22:53

1 उत्तर

सबसे बढ़िया उत्तर

मैंने गणित हल किया। लाइन की लंबाई है: √x²+y² या js में: Math.sqrt(x*x+y*y)। और लाइन के लिए रोटेशन है: Math.ata2(height, width) (रिटर्न वैल्यू टाइप रेडियन है)।

ध्यान दें! चौड़ाई और ऊंचाई दोनों स्थितियों में एक आयत की चौड़ाई और ऊंचाई है। तो पहली स्थिति और चौड़ाई और ऊंचाई पर बाएं और ऊपर के साथ एक आयत बनाएं ताकि यह दूसरे स्थान पर पहुंच जाए।

ध्यान दें! transform-origin: top left; सेट करना याद रखें अन्यथा तत्व बीच से घूम जाएगा।

function getLineLength(width, height) {
  return Math.sqrt(width * width + height * height);
}

function getLineRotation(width, height) {
  return ((width * 2 - width * 1) / (width * 2 - width * 1)) * (180/Math.PI);
}
0
tscpp 7 नवम्बर 2019, 17:35