绘制鼠标轨迹时如何影响画布后面的悬停元素

Question

我有 8 个 flex-box 列，当您将鼠标悬停在其中时，将显示图像。我想在鼠标在屏幕上移动时留下痕迹，所以我使用 onmousemove 在画布上画线。但是，当我将画布放在列的顶部时，悬停在列上以显示照片不再起作用。当我将鼠标悬停在列上时，如何在显示图像的同时留下鼠标线迹？谢谢！

<div class="container">
  <canvas id="c" width="100%" height="100%" ></canvas>
  <div class="row">
       <div class="col" id="col1" >
             <img class="media-overlay col-1 left top" id="img1" 
             src="imgs/port2.jpg" alt="port2" />
       </div>
       <div class="col" id="col2">
             <img class="media-overlay col-1 left bottom  " id="img2" 
             src="imgs/port1.jpg" alt="port1" />
             </div>
 
        <div class="col" id="col3">
              <img class="media-overlay col-2 right top" 
              src="imgs/land1.jpg" id="img3" alt="land1" />
         </div>
 
  </div>



<script> // this draws the line that follows the mouse movements
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmouseover = e => {
  // add a new path object
  pathes.push({
    pts: [], // an array of points
    dashed: check.checked // boolean
  });
  mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;

c.onmousemove = throttle(e => {
  if (!mouse_down) {
    return;
  } else {
    const rec = c.getBoundingClientRect();
    // add a new point
    addPoint(e.clientX - rec.left, e.clientY - rec.top);
    redraw(); // redraw everything
  }
});

function redraw() {
  ctx.clearRect(0, 0, c.width, c.height); // we clear everything
  // and draw every pathes
  pathes.forEach(path => {
    ctx.setLineDash(path.dashed ? [5, 5] : [0]);
    // set line color
    // ctx.strokeStyle = '#FFFFFF';
    ctx.beginPath();
    path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
    ctx.stroke();
  })
}

function addPoint(x, y) {
  // append to the last one
  const points = pathes[pathes.length - 1].pts;
  points.push({
    x: x,
    y: y
  });
}


// just to avoid unnecessary drawings
function throttle(callback) {
  if (typeof callback !== 'function')
    throw 'A callback function must be passed';
  var active = false;
  var evt;
  var handler = function() {
    active = false;
    callback(evt);
  };
  return function handleEvent(e) {
    evt = e;
    if (!active) {
      active = true;
      requestAnimationFrame(handler);
    }
  };
}

//css
body {
margin: 0;
padding: 0; 
height:100%;                    
}

.row {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

.col {
  height: 100%;
  width: 300px;
  position: relative;
  flex-shrink: 0;  
}
img.media-overlay {
  position: absolute;
  display:none;
}
  
.col:hover img {
  display: block;
}
canvas {
  display:block;
  border: 1px solid;
  position: absolute;
  padding: 0;
  margin:0;
  z-index: 1;

 
}

Answer 1

尝试将所有事件侦听器添加到#container 元素而不是canvas，我假设画布的宽度和高度相同。

将pointer-events:none; 添加到您的画布元素时。该属性取消当前层上的所有用户事件并将它们传递给下面的元素。

// ====================== drawing canvas
const ctx = c.getContext('2d');
const $container= document.querySelector('#container');

 // resize the canvas to fill browser window dynamically
 window.addEventListener('resize', resizeCanvas, false);

 function resizeCanvas() {
         c.width = window.innerWidth;
         c.height = window.innerHeight;

         /**
          * Your drawings need to be inside this function otherwise they will be reset when 
          * you resize the browser window and the canvas goes will be cleared.
          */
         drawStuff(); 
 }
 resizeCanvas();

 function drawStuff() {
         // do your drawing stuff here//
         const pathes = []; // this is where we will store all our pathes
          let mouse_down = false; // shall we draw ?
          $container.onmouseover = e => {
            // add a new path object
            pathes.push({
              pts: [], // an array of points
              dashed: check.checked // boolean
            });
            mouse_down = true; // we should draw
          }
          $container.onmouseup = c.onmouseleave = e => mouse_down = false;

          $container.onmousemove = throttle(e => {
            if (!mouse_down) {
              return;
            } else {
              const rec = c.getBoundingClientRect();
              // add a new point
              addPoint(e.clientX - rec.left, e.clientY - rec.top);
              redraw(); // redraw everything
            }
          });

          function redraw() {
            ctx.clearRect(0, 0, c.width, c.height); // we clear everything
            // and draw every pathes
            pathes.forEach(path => {
              ctx.setLineDash(path.dashed ? [5, 5] : [0]);
              // set line color
              // ctx.strokeStyle = '#FFFFFF';
              ctx.beginPath();
              path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
              ctx.stroke();
            })
          }

          function addPoint(x, y) {
            // append to the last one
            const points = pathes[pathes.length - 1].pts;
            points.push({
              x: x,
              y: y
            });
          }


          // just to avoid unnecessary drawings
          function throttle(callback) {
            if (typeof callback !== 'function')
              throw 'A callback function must be passed';
            var active = false;
            var evt;
            var handler = function() {
              active = false;
              callback(evt);
            };
            return function handleEvent(e) {
              evt = e;
              if (!active) {
                active = true;
                requestAnimationFrame(handler);
              }
            };
          }
          }


//================ randomizing columns====================

let mediaElements = [...document.getElementsByClassName("col")];

// this is where u assign the array for the list of src (or randomise it)
//array.forEach(function(currentValue, index, arr), thisValue)

//put the range in an array
function range(start, end) {
    var ans = [];
    for (let i = start; i <= end; i++) {
        ans.push(i);
    }
    return ans;
}

//shuffle the array
function shuffle(array) {
  return array.sort(() => Math.random() - 0.5);
}

//now shuffle order
let orderNumber = range(1, mediaElements.length);
let shuffled = shuffle(orderNumber);
//console.log(shuffled); // [5, 3, 1, 2, 4]

//assign order somehow lmao
mediaElements.forEach(y => {
  // this is where u add or the src
  // y is each of the img
  //console.log(y)
  y.style.order = shuffled.shift()
});

/* canvas {
  border: 1px solid;

} */

/* CSS files add styling rules to your content */
html {
  margin: 0px;
}

body {
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  margin-top: 0;
  /* background-color: black;  */
  height: 100%;
  margin-top: 0%;
  padding: 0%;
}

.row {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  padding-top: 0px;
  margin-left: 0px;
  margin: 0px;
}

.col {
  height: 100%;
  width: 300px;
  position: relative;
  border-right: 0.5px #EDE7DD solid;
  border-top: 0.5px #EDE7DD solid;
  border-bottom: 0.5px #EDE7DD solid;
  flex-shrink: 0;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  padding-top: 0px;
}
/* .col:hover {
  background-color: pink;
} */

img.media-overlay {
  position: absolute;
  padding: 0;
  margin: 0;
  display: none;
  border-bottom: 0.5px #EDE7DD solid;
  border-top: 0.5px #EDE7DD solid;
}

.col:hover img {
  display: block;
} 



img.col-1 {
  max-width: 300px;
}

img.col-2 {
  max-width: 600.5px;
  /* add border width 600 */
}

img.left {
  left: 0;
}

img.right {
  right: 0;
}

img.top {
  top: 0;
  border-top: 0px black solid;
}

img.bottom {
  bottom: 0;
  border-bottom: 0px black solid;
}

@media (max-width: 480px) {
  /* ==============
  row takes up the entire screen
  need to take care of the images or media-overlays too
  ============== */
  .col {
    width: 100%;
  }

  /* ==============
  columns turn into rows
  need to take care of the images or media-overlays too
  width of rows, and border (bottom)
  ============== */
  /* .row {
    flex-direction: column;
  } */
}

h3 {
  padding-left: 30px;
  padding-right: 30px;
  color: #EDE7DD;
  /* color:#FFC6C0; */

  font-family: nimbus-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
}

p {
  padding-left: 30px;
  padding-right: 30px;
  color: #EDE7DD;

  font-family: nimbus-sans, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.bottomText {
  position: absolute;
  bottom: 0;
  z-index: -1;
}

canvas {
  display: block;
  border: 1px solid;
  position: absolute;
  padding: 0;
  margin: 0;
  z-index: 1;
  pointer-events:none;
  /* overflow: auto; */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Hello!</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- nimbus sans -->
    <!-- bold -->
    <link rel="stylesheet" href="https://use.typekit.net/oub0bcu.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>

  <body>
    <label>
      <input type="checkbox" id="check" checked style="display:none"/></label
    ><br />

    <div class="container" id='container'>
      <canvas id="c" width="100%" height="100%"></canvas>
      <div class="row" id="row">

    <div class="col" id="col1">
      <h3>Abbie Lilley & Indiya Tupe</h3>
      <p>
        “Unearth is a campaign intending to inspire a deeper exploration and richer interactions with our surroundings
        in order to apprehend a deeper embrace of natural and urban environments. Animating the lyrics of Nothing but
        Flowers by Talking Heads, playful juxtapositions are at the heart of our environmental centred campaign;
        investigating a place’s potential to transform typographic led interventions and inform visual language.”</p>
      <img class="media-overlay col-1 left top" id="img1" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport2.jpg?v=1595172025095" alt="port2" />
    </div>

    <div class="col " id="col2">
      <img class="media-overlay col-1 left bottom  " id="img2" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport1.jpg?v=1595172012754" alt="port1" />
      <div class= "bottomText">
        <h3>Mayli Mountford</h3>
        <p>
          “An unconventional rebrand of 'Britishness' so it accurately represents contemporary ’British' Identity to
          promote and represent all people and culture in the United Kingdom. An aspect I decided to rebrand was British
          slang and language - there are typical British sayings but I knew there are other sayings from other cultures
          that are spoken in the UK.
          <br><br>People of different ethnicities have been born, grown up here, and consider themselves British and yet
          the British identity does not represent them? Maybe Britain wouldn’t be so divided, if Britain actually
          represented Britain?
        </p>

      </div>
    </div>

    <div class="col" id="col3">
      <img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland1.jpg?v=1595171993148" id="img3" alt="land1" />

      <h3>3</h3>
      <p></p>


    </div>
    <div class="col" id="col4">
      <img class="media-overlay col-1 right bottom " src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img4" alt="port3" />

      <h3>4</h3>
      <p></p>
    </div>
    <div class="col" id="col5">
       <img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img5" alt="land2" />

      <h3>5</h3>
      <p></p>
      
    </div>
    <div class="col" id="col6">
      <img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img6" alt="land2" />

      <h3>6</h3>
      <p></p>
    </div>
    <div class="col" id="col7">
      <img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img7" alt="land2" />

      <h3>7</h3>
      <p></p>

    </div>
    <div class="col" id="col8">
      <img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img8" alt="land2" />

      <h3>8</h3>
      <p></p>

    </div>
  </div>
    </div>
  </body>
</html>

Answer 2

阅读@t1m0n 的答案，我解决了我的问题。并且不添加“指针事件：无；”画布。只需设置画布的 z-index 也可以。