Utilizing Bresenham's line drawing algorithm for showcasing box contours

Question

Utilizing Bresenham's line drawing algorithm for showcasing box contours

I am seeking a similar behavior to what is demonstrated on , but with some modifications to the boxes:

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
}

div.selected,
div:hover {
  background-color: red;
  color: white;
}

<div>A</div>
<div>B</div>
<div>C</div>

I would like the ability to click on one box, drag it, and have the color of the other boxes change as well.

I previously posted about this issue, but the accepted answer did not meet my needs. I am specifically looking for the same functionality as in the provided link above.

Thank you.

javascript html css

Answer 1

Answer №1

When implementing Bresenham’s Line Generation algorithm, keep the following assumptions in mind:
1) Lines are drawn from left to right.
2) The starting point (x1, y1) is less than the ending point (x2, y2).
3) The slope of the line falls between 0 and 1, meaning it is a diagonal line from lower left to upper right.

var x1, y1, x2, y2;
    function handleMouseDown(e){
          x1 = +e.target.dataset.x;
          y1 = +e.target.dataset.y;
          
          container.addEventListener('mousemove', handleMouseMove);      
          e.preventDefault();
    }
    function handleMouseMove(e){
          x2 = +e.target.dataset.x;
          y2 = +e.target.dataset.y;
          
          var ele = document.querySelectorAll('[data-x][data-y]');
          ele.forEach(function(val){
              val.classList.remove('selected')
          });

          bresenham(x1, y1, x2, y2);     
          
          
    }
    function handleMouseUp(e){
        var ele = document.querySelectorAll('[data-x][data-y]');
        ele.forEach(function(val){
            val.classList.remove('selected')
        });
        e.preventDefault();
        container.removeEventListener('mousemove', handleMouseMove);      
    }
    function bresenham(x1 , y1, x2 , y2){

         var m_new = 2 * (y2 - y1);
         var slope_error_new = m_new - (x2 - x1);
         for (var x = x1, y = y1; x <= x2; x++)
         {
             var ele = document.querySelector('[data-x="'+x+'"][data-y="'+y+'"]');
             ele.classList.add('selected');     
            
            slope_error_new += m_new;
       
            if (slope_error_new >= 0)
            {
               y++;
               slope_error_new -= 2 * (x2 - x1);
            }
         }
    }
    var container = document.getElementById('container');
    container.addEventListener('mousedown', handleMouseDown);
    container.addEventListener('mouseup', handleMouseUp);

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    cursor: pointer;
  }

  div.selected{
    background-color: red;
    color: white;
  }

<span id="container">
     <div data-x="0" data-y="0" >A</div>
     <div data-x="1" data-y="0" >B</div>
     <div data-x="2" data-y="0" >C</div>
</span>

Answer 2

When implementing Bresenham’s Line Generation algorithm, keep the following assumptions in mind:
1) Lines are drawn from left to right.
2) The starting point (x1, y1) is less than the ending point (x2, y2).
3) The slope of the line falls between 0 and 1, meaning it is a diagonal line from lower left to upper right.

var x1, y1, x2, y2;
    function handleMouseDown(e){
          x1 = +e.target.dataset.x;
          y1 = +e.target.dataset.y;
          
          container.addEventListener('mousemove', handleMouseMove);      
          e.preventDefault();
    }
    function handleMouseMove(e){
          x2 = +e.target.dataset.x;
          y2 = +e.target.dataset.y;
          
          var ele = document.querySelectorAll('[data-x][data-y]');
          ele.forEach(function(val){
              val.classList.remove('selected')
          });

          bresenham(x1, y1, x2, y2);     
          
          
    }
    function handleMouseUp(e){
        var ele = document.querySelectorAll('[data-x][data-y]');
        ele.forEach(function(val){
            val.classList.remove('selected')
        });
        e.preventDefault();
        container.removeEventListener('mousemove', handleMouseMove);      
    }
    function bresenham(x1 , y1, x2 , y2){

         var m_new = 2 * (y2 - y1);
         var slope_error_new = m_new - (x2 - x1);
         for (var x = x1, y = y1; x <= x2; x++)
         {
             var ele = document.querySelector('[data-x="'+x+'"][data-y="'+y+'"]');
             ele.classList.add('selected');     
            
            slope_error_new += m_new;
       
            if (slope_error_new >= 0)
            {
               y++;
               slope_error_new -= 2 * (x2 - x1);
            }
         }
    }
    var container = document.getElementById('container');
    container.addEventListener('mousedown', handleMouseDown);
    container.addEventListener('mouseup', handleMouseUp);

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    cursor: pointer;
  }

  div.selected{
    background-color: red;
    color: white;
  }

<span id="container">
     <div data-x="0" data-y="0" >A</div>
     <div data-x="1" data-y="0" >B</div>
     <div data-x="2" data-y="0" >C</div>
</span>

Utilizing Bresenham's line drawing algorithm for showcasing box contours

Answer №1

Similar questions

Is there a way for me to import a variable from one file and use require() to access it in another file?

Avoid running multiple YouTube views simultaneously within an AngularJS application

What is the best way to retrieve the response from a POST request in Angular JS?

Customizing an image with personalized text and then sending it to a server using a combination of javascript and

What could be the reason for JavaScript code successfully exporting to Excel using the old office extension .xls but encountering issues when trying to export

Is it possible to transform div containers into unique shapes?

Create a duplicate of a div element, including all of its nested elements and associated events, using

Move on to a different screen in a React Component once the data has been fetched

Unexpected token error occurs when making cross-domain AJAX requests to the server and receiving a JSON object

Uploading several files with Laravel and Vue JS in one go

Include a class above the specified element; for instance, apply the class "act" to the "<ul>" element preceding the "li.item1"

particular shade for button border and background

Triggering a form submission in JavaScript when a selection is changed

Enhance your PrimeVue experience with the power of Tailwind CSS

"Looking to spice up your website with a dynamic background-image

html2canvas bottom margin

Steps for Renewing Firebase Session Cookie

Creating a series of promises in a structured chain

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hovering over an SVG icon will trigger an animation