Bresenham的线条绘制算法用于高光框

Question

I'm looking for this behaviour http://www.brainjunkie.com/web/js-wordsearch/ but with this 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 want be able to click in one box, then drag and change the color of the other boxes two.

I have made a previous post, but the accept answer (i didn't realize when i accepted doesn't work well for me, since i'm looking for the exactly behaviour in the link above.

Thank you.

Answer 1

For Bresenham’s Line Generation
Assumptions :
1) Line is drawn from left to right.
2) x1 < x2 and y1< y2
3) Slope of the line is between 0 and 1.
   We draw a 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'); // Add slope to increment angle formed slope_error_new += m_new; // Slope error reached limit, time to // increment y and update slope error. 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>