繪制鼠標軌跡時如何影響 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 也可以工作。