এইচটিএমএলের উপরে তীর আঁকুন

13

আমার এইচটিএমএল টেবিল রয়েছে এবং আমি একটি ঘর থেকে অন্য একটি ঘরে একটি তীর আঁকতে চাই। উদাহরণস্বরূপ:

তীর-ওপরে এইচটিএমএল-টেবিল

এটি কিভাবে করা যেতে পারে?

এইচটিএমএল উদাহরণ:

<html>

 <body>

<table>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>


</body>

</html>

আপনি যদি ব্রাউজারটির আকার পরিবর্তন করেন তবে তীরটি নতুন (প্রারম্ভিক) / শেষ অবস্থানে থাকা উচিত।

javascript  html  svg 
— guettli
সূত্র
3
আপনি নিজের দ্বারা এখনও কিছু চেষ্টা করেছেন? জাভাস্ক্রিপ্ট এবং সিএসএস ব্যবহার করে এর মতো শব্দগুলি করা যেতে পারে
— আলেকজান্ডার ক্লদ্ট
এই ক্ষেত্রে আমার কাছে কোনও ক্লু নেই t আমি আমার পছন্দসই সার্চ ইঞ্জিনের সাথে দরকারী ইঙ্গিত খুঁজে পাইনি।
— গেটলি
আমরা কি ধরে নিতে পারি যে উদাহরণস্বরূপ সমস্ত কক্ষগুলি উচ্চতা এবং প্রস্থের সমান?
— বিটিফেট
... যদি অ্যাসপেক্ট রেশিও জানা থাকে তবে এটি কেবল CSS (সেল x, y পজিশনের উপর ভিত্তি করে) দিয়ে করা যেতে পারে এবং CSS এর ওয়ার্সে অভিনয় করে js ফাংশন দ্বারা নিয়ন্ত্রিত হতে পারে। নির্বাচকগুলি ব্যবহার করার জন্য ফাংশনটিতে থাকা স্থানাঙ্কগুলি অনুমান করার জন্য অবশ্যই এর প্রসঙ্গটি অনুসন্ধান করতে হবে। অ্যাসপেক্ট রেশিও জানি না আমি এখনও এটি নিয়ে ভাবছি ...
— বিটিফেট
1
@ গুয়েতলি অবশ্যই! তবে তবে এটি একটি খাঁটি সিএসএস সমাধান হবে না (এমনকি প্রায়) আপনার তখন আকারের পরিবর্তনগুলি সনাক্ত করতে হবে এবং পুনরায় গণনা করতে হবে এবং কিন্ডা অ্যাসপেক্ট_টায়ো সিএসএস ভার ইনজেকশন করতে হবে। এটি প্রশংসনীয়, তবে খাঁটি CSS সমাধানের মতো দুর্দান্ত নয় ;-)
— বিটিফেট

উত্তর:

6

জাভাস্রিপ্ট এবং সিএসএসের কিছুটা দিয়ে আপনি ক্যানভাস বা এসভিজি ছাড়াই এটি অর্জন করতে পারেন। এখানে একটি উদাহরণ:

function getPosition(el) {
   return {
     x: el.offsetLeft + el.offsetWidth / 2,
     y: el.offsetTop + el.offsetHeight / 2
   };
 }

 function getDistance(a, b) {
   const from = getPosition(a);
   const to = getPosition(b);

   return {
   //https://stackoverflow.com/a/17628488/529024
     distance: Math.hypot(from.x - to.x, from.y - to.y),
     angle: Math.atan2(to.x - from.x, from.y - to.y) * 180 / Math.PI,
     position: {
       start: from,
       end: to
     }
   }
 }

function init(){
// Get values and elements then set style
 const values = getDistance(
   document.getElementById("start"),
   document.getElementById("end")
 );
 
 
 let wrapper = document.getElementById('wrapper');
 let arrow = document.getElementById('arrow');
 let bottom = wrapper.offsetHeight - values.position.start.y;
 arrow.style.height = values.distance + "px";
 arrow.style.transform = `rotate(${values.angle}deg)`;
 arrow.style.bottom = bottom + "px";
 arrow.style.left = values.position.start.x + "px";
}

init();

window.addEventListener('resize', function(){
 init();
});
#wrapper {
  position: relative;
  left: 50px;
  top: 100px;
}

#arrow {
  position: absolute;
  width: 2px;
  background-color: red;
  transform-origin: bottom center;
}

#arrow::before {
    position: absolute;
    height: 0px;
    width: 0px;
    border: 6px solid transparent;
    border-bottom: 8px solid red;
    content: "";
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
<div id='wrapper'>
  <div id='arrow'></div>
  <table>
    <tr>
      <td >0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td id="end">9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td id="start">0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</div>
স্নিপেট প্রসারিত করুন

— কালেমা
সূত্র
বাগের মতো দেখতে: আপনার তীরটি আলাদা। এটি প্রথম শূন্যে শেষ হয়।
— গেটলি
আমি মান পরিবর্তন করেছি। আমি আপনার উদাহরণ প্রতিফলিত করতে এখন নমুনা আপডেট।
— কালিমা
আমি যদি ctrl -(আকার হ্রাস) ব্যবহার করি তবে তীরটি শেষের অবস্থানটি হারাবে।
— গেটলি
5

আপনি এখনও আমার দ্রবণটি সম্পূর্ণ অঙ্কন তীর হিসাবে ব্যবহার করতে পারবেন না, শুরু এবং শেষ পয়েন্টের গণনার উপর ভিত্তি করে একটি ক্যানভাস তৈরি করুন এবং দুটি পয়েন্ট থেকে একটি লাইন আঁকুন।

Example running: https://jsfiddle.net/tabvn/uk7hsj3a    

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<table id="my-table">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td id="end">9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td id="start">0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

<script type="text/javascript">

  var table = document.getElementById('my-table')
  var startElement = document.getElementById('start')
  var endElement = document.getElementById('end')

  var startPoint = {x: startElement.offsetLeft + table.offsetLeft, y: startElement.offsetTop + table.offsetTop}
  var endPoint = {x: endElement.offsetLeft + table.offsetLeft, y: endElement.offsetTop + table.offsetTop}
  
  var canvas = document.createElement('canvas')
  canvas.width = table.clientWidth
  canvas.height = table.clientHeight
  canvas.style.position = 'absolute'
  canvas.style.top = startPoint.y < endPoint.y ? startPoint.y + 'px' : endPoint.y + 'px'
  canvas.style.left = startPoint.x < endPoint.x ? startPoint.x + 'px' : endPoint.x + 'px'

  var ctx = canvas.getContext('2d')

  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'red'
  ctx.moveTo(startPoint.x - (startElement.clientWidth / 2), startPoint.y)
  ctx.lineTo(endPoint.x - (endElement.clientWidth / 2), endPoint.y)
  ctx.stroke()
  document.body.insertBefore(canvas, table, 30)

</script>

</body>
</html>
স্নিপেট প্রসারিত করুন

— একটিতে
সূত্র
আমি যদি পর্দার আকার পরিবর্তন করি (ctrl + এবং ctrl -), তবে লাল রেখার অবস্থানটি হারাবে।
— guettli
3
সুতরাং পুনরায় আকার যুক্ত করুন আমরা কোনও ফাংশনে গ্রুপ গ্রুপ সমাধান করতে পারি এবং তারপরে আপনি উইন্ডোর আকার পরিবর্তন শুনতে এবং আবার ক্যানভাস রেন্ডার করতে পারেন।
— টান
4

জাভাস্ক্রিপ্ট সমাধান:

drawLine();

function drawLine () {
  var table = document.getElementById('my-table')
  var startElement = document.getElementById('start')
  var endElement = document.getElementById('end')

  let arrowRadius = 10;

  let xStart = null;
  let xEnd = null;
  if (startElement.offsetLeft > endElement.offsetLeft) {
    xStart = startElement.offsetLeft + (arrowRadius/2);//to add padding just add more wherever theres this pattern 
    xEnd = endElement.offsetLeft + endElement.offsetWidth / 2;
  } else if (startElement.offsetLeft < endElement.offsetLeft) {
    xStart = startElement.offsetLeft + startElement.offsetWidth - (arrowRadius/2);
    xEnd = endElement.offsetLeft;
  } else {
    xStart = startElement.offsetLeft + startElement.offsetWidth / 2;
    xEnd = endElement.offsetLeft + endElement.offsetWidth / 2;
  }

  let yStart = null;
  let yEnd = null;
  if (startElement.offsetTop > endElement.offsetTop) {
    yStart = startElement.offsetTop + (arrowRadius/2);
    yEnd = endElement.offsetTop + endElement.offsetHeight + (arrowRadius/2);
  } else if (startElement.offsetTop < endElement.offsetTop) {
    yStart = startElement.offsetTop + startElement.offsetHeight - (arrowRadius/2);
    yEnd = endElement.offsetTop - (arrowRadius/2);
  } else {
    yStart = startElement.offsetTop + startElement.offsetHeight / 2;
    yEnd = endElement.offsetTop + endElement.offsetHeight / 2;
  }

  let coordBegin = {
    x: xStart,
    y: yStart
  };
  let coordEnd = {
    x: xEnd,
    y: yEnd
  };

  var canvas = document.createElement('canvas')
  canvas.width = table.offsetWidth
  canvas.height = table.offsetHeight
  canvas.style.position = 'absolute'

  var ctx = canvas.getContext('2d')
  drawArrowhead(ctx, coordBegin, coordEnd, arrowRadius);
  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'red'
  ctx.moveTo(coordBegin.x, coordBegin.y)
  ctx.lineTo(coordEnd.x, coordEnd.y)
  ctx.stroke()

  document.body.insertBefore(canvas, table)
}




function drawArrowhead(context, from, to, radius) {
    var x_center = to.x;
    var y_center = to.y;

    var angle;
    var x;
    var y;

    context.beginPath();

    angle = Math.atan2(to.y - from.y, to.x - from.x)
    x = radius * Math.cos(angle) + x_center;
    y = radius * Math.sin(angle) + y_center;

    context.moveTo(x, y);

    angle += (1.0/3.0) * (2 * Math.PI)
    x = radius * Math.cos(angle) + x_center;
    y = radius * Math.sin(angle) + y_center;

    context.lineTo(x, y);

    angle += (1.0/3.0) * (2 * Math.PI)
    x = radius *Math.cos(angle) + x_center;
    y = radius *Math.sin(angle) + y_center;

    context.lineTo(x, y);

    context.closePath();
    context.fillStyle = 'red';
    context.fill();
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<table id="my-table">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td id="end">9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td id="start">0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>
স্নিপেট প্রসারিত করুন

— ডেভিড মাচাডো
সূত্র
আমি ক্রোম ব্যবহার করি এবং প্রথম "2" থেকে লাল রেখাটি নীচের দিকে চলে যায়।
— guettli
যেমনটি অনুমিতও হয়, যেহেতু
— ডেভিড
@ গুয়েটলি এটি প্রতিটি অবস্থানের জন্য কাজ করে কেবল আইডির স্যুইচ করে এবং এটি সূচনা এবং শেষ অবস্থানের অ্যাকাউন্টে রাখে যাতে এটি যথাযথ প্রান্তিককরণের সাথে তীর আঁকেন
— ডেভিড
আমি আপনার উত্তর আপডেট করেছি। তীরটি এখন প্রশ্নটির মতো প্রথম "9" এ নির্দেশ করে। এই উত্তরের জন্য আপনাকে ধন্যবাদ।
— গেটলি
3

এইভাবে আমি এটি করব: এসভিজি উপাদানটি ভিউবক্স মানের জন্য টেবিলের আকার ব্যবহার করে। আপনি লাইনটি আঁকতে এই অবস্থানটি সম্পর্কিত করতে এবং এই অবস্থানটি ব্যবহার করার জন্য আপনার প্রয়োজনীয় কোষগুলির আকার এবং অবস্থান গণনা করছেন। একটি চিহ্নিতকারী তীর টিপ জন্য ব্যবহৃত হয়।

উইন্ডোটির আকার পরিবর্তন করুন: 

let cells = Array.from(document.querySelectorAll("td"));
// index of cells to be correlated
let n1 = 90;
let n2 = 9;
// a function to draw the arrow
function drawArrow(){
//get the size of the table
let size = theTable.getBoundingClientRect();
//set the viewBox attribute for the svg element
theSVG.setAttributeNS(null, "viewBox", `0 0 ${size.width} ${size.height}`)
//get the size and the position of the cells
let c1 = cells[n1].getBoundingClientRect();
let c2 = cells[n2].getBoundingClientRect();
//set the x1, y1, x2,y2 attributes of the line
theLine.setAttributeNS(null,"x1",`${c1.left + c1.width/2}`);
theLine.setAttributeNS(null,"y1",`${c1.top + c1.height/2}`);
theLine.setAttributeNS(null,"x2",`${c2.left + c2.width/2}`);
theLine.setAttributeNS(null,"y2",`${c2.top + c1.height/2}`); 
}


drawArrow()


window.setTimeout(function() {
  drawArrow()
  window.addEventListener('resize', drawArrow, false);
}, 15);
body {
  margin: 0;
  padding: 0;
}
table,svg{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  position:absolute;
}
td {
  border: 1px solid #d9d9d9;
  padding: 0.5em;
  text-align: center;
}

svg{background:rgba(0,0, 255,.5)}
<table id="theTable">
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
</table>

<svg id="theSVG">
  <defs>
    <marker id="arrow" markerWidth="6" markerHeight="12" refX="8" refY="6" orient="auto">
        <path d="M 0 0 L 8 6 L 0 12" />
    </marker>
  </defs>
  <line id="theLine" marker-end="url(#arrow)" stroke="black" />  
</svg>
স্নিপেট প্রসারিত করুন

হালনাগাদ:

যেহেতু কেউ মন্তব্য করেছেন যে আকার পরিবর্তন করতে গিয়ে তীরটি এটির অবস্থানটি হারাচ্ছে আমি একটি জিআইএফ যুক্ত করছি:

এখানে চিত্র বর্ণনা লিখুন

— enxaneta
সূত্র
আমি যদি পর্দার আকার পরিবর্তন করি (ctrl + এবং ctrl -) তবে তীরটি অবস্থানটি হারাবে।
— গেটলি
আমি এটি মনে করি না: আমি একটি জিআইএফ
— এনেক্সানিটা
দুর্ভাগ্যক্রমে তীর শুরুর অবস্থানটি পরে ctrl +(পরে ctrl -) imgur.com/8xbEAK2 আইউজ ক্রোমিয়াম 78.0.3904.70
— গেটলি
3

আপনি আপনার টেবিলটি ওভারলেল করে নিখুঁত অবস্থানের জন্য একটি এসভিজি উপাদান এবং CSS স্টাইল ব্যবহার করতে পারেন। এবং জাভাস্ক্রিপ্ট DOM API এর মত সূচনা এবং শেষ পয়েন্ট পানgetBoundingClientRect()

এখানে একটি ডেমো রয়েছে। (কৌণিক দিয়ে তৈরি, তবে আপনি এটি যে কোনও জায়গায় ব্যবহার করতে পারেন P খাঁটি জাভাস্ক্রিপ্ট উদাহরণ নীচে দেখুন))

const startElement = document.querySelector('#start');
const endElement = document.querySelector('#end');

const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();

const startX = startRect.right;
const startY = startRect.top;

const endX = endRect.left;
const endY = endRect.bottom;

আপনি শুরু এবং পরিবর্তনটি গতিময়ভাবে করতে পারেন। অবস্থানগুলি পাওয়ার জন্য আপনাকে কেবল পদ্ধতিটি প্রত্যাহার করতে হবে। নোট করুন যে আমি তীরটির তীরটি রাখার জন্য বাম, শীর্ষ, ডান, বোতামটি ব্যবহার করি। আপনি উভয় অবস্থানের তুলনা করে কেন্দ্র বিন্দু বা প্রান্তটি গণনা করতে পারেন।

এবং আপনাকে টেবিলের উপরে এসভিজি রাখতে হবে। আপনি সেট সিএসএস করে এটি করতে পারেন position: absolute; left: 0; top: 0। তবে মনে রাখবেন যে আপনার পিতামাতারও সেই বৈশিষ্টটি থাকা উচিত position। যেমন position: relative।

আপডেট: এখানে একটি খাঁটি জাভাস্ক্রিপ্ট ডেমো রয়েছে। সমস্ত ফাইল দেখতে বামে ক্লিক করুন এবং জেএস স্টাফগুলি দেখতে index.js নির্বাচন করুন। (ভিএস কোডের মতো)

সম্পূর্ণ কোড:

<table style="position: absolute; left: 0; top: 0;">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td id="end">9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td id="start">0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>

    <svg style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1">
        <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto"
                markerUnits="strokeWidth" viewBox="0 0 20 20">
                <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
            </marker>
        </defs>

        <line id="svg-line" stroke="#f00" stroke-width="5"
            marker-end="url(#arrow)" />
    </svg>
</table>
<script>
const svgLine = document.querySelector('#svg-line');

const startElement = document.querySelector("#start");
const endElement = document.querySelector("#end");

const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();


const startX = startRect.right;
const startY = startRect.top;

const endX = endRect.left;
const endY = endRect.bottom;

svgLine.setAttribute('x1', startX);
svgLine.setAttribute('y1', startY);
svgLine.setAttribute('x2', endX);
svgLine.setAttribute('y2', endY);
</script>

কেবলমাত্র একটি নতুন খালি এইচটিএমএল ফাইলের উপরের কোডটি অনুলিপি করুন এবং এটি আপনার ব্রাউজারে চালান।

BTW। আপনি এটি একটি ক্যানভাস দিয়েও করতে পারেন। (এসভিজির বিকল্প)

— ডমিনিক
সূত্র
আপনার এখানে তৃতীয় পক্ষের সাইট নয়, সম্পূর্ণ বাস্তবায়ন দরকার। বাহ্যিক লিঙ্কগুলি সময়ের সাথে সাথে মারা যায় এবং আপনার উত্তরটিকে অকেজো করে দেবে। আপনি এখানে যে কোডটি দেখান তা অসম্পূর্ণ। stackoverflow.com/help/how-to-answer
— রব
2

আপনাকে একটি ডিভের মধ্যে টেবিলটি স্থাপন করতে হবে এবং একটি সম্পত্তি, অবস্থান প্রদান করতে হবে: তারপরে তীরটির জন্য এইচটিএমএল লিখুন (আপনি চাইলে একটি চিত্র ব্যবহার করুন) এবং এটিকে নিখুঁত বৈশিষ্ট্যযুক্ত করুন এবং তারপরে আপনি যেমনটি ব্যবহার করতে চান তেমন স্টাইল করুন বাম ডান..

অবস্থানের সম্পত্তি সম্পর্কে এখানে আরও পড়ুন https://www.w3schools.com/css/css_positioning.asp

— অমিত খারে
সূত্র
আপনার উত্তরটি সঠিক। তবে এখনও কিছু অনুপস্থিত। চিত্রের জন্য একটি চিত্র ব্যবহার করা ভাল কাজ করে। এটি সুন্দরভাবে স্কেল করে না।
— গেটলি
প্রশ্নটিকে "এসভিজি" ট্যাগ করা হয়েছে এবং তিনি কীভাবে তীরটি "আঁকবেন" তা জিজ্ঞাসা করেন যাতে এটি প্রশ্নের উত্তর দেয় না।
— রব
এসভিজি ব্যবহার করুন, স্কেলিং খুব একটা সমস্যা হবে না
— অমিত খারে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.