绘制鼠标轨迹时如何影响 canvas 后面的 hover 元素

Question

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

<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 ，我假设 canvas 的宽度和高度相同。

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

 // ====================== 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 的答案，我解决了我的问题。 并且不添加“指针事件：无；” 至 canvas。 只需设置 canvas 的 z-index 也可以工作。