我有 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;
}
// this draws the line that follows the mouse movements
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
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: true // 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);
}
};
}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;
}<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>@saltykiam绘制鼠标轨迹时 如何影响画布后面的悬停元素的问题的松散翻译。
尝试将所有事件侦听器添加到元素
#container而不是画布，我假设画布的宽度和高度相同。添加
pointer-events:none;到您的画布元素时。此属性取消当前图层上的所有自定义事件并将它们传递给下面的元素。免费翻译 来自 @t1m0n的答案。
我将尺寸设置
canvas为适合div（容器）。要忽略鼠标操作，canvas我添加pointer-events: none. 为简单起见，列（此处为部分）我用红色着色，但您可以添加任何逻辑onhover。当
window.onresize画布的大小发生变化时，旧路径上的数据被删除。