Question

我在使用canvas / mousemove时遇到问题。我希望能够在鼠标移动时使用鼠标移动绘制/绘画工具绘制整个页面，但仍然单击出现在各种其他div中的文本链接。我遇到的问题是当前固定的画布具有透明背景颜色并设置为100％宽度和高度，使用较低的z-index阻止下面的div，这意味着无法单击链接。使用指针事件：画布上的none不是解决方案，因为它禁用了mousemove效果。如果我使用我想要点击的链接使画布z-index低于div，则绘图将仅显示在div之外。

我需要添加或更改以使其工作？我基本上只想拥有一个具有鼠标悬停效果的功能网页，只要它移动就会在页面上绘制。

以下是我正在使用的脚本。以下是http://jsfiddle.net/zAF4d/1/

的示例

$(function() {
var letsdraw = false;

var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;

var canvasOffset = $('#paint').offset();

$('#paint').mousemove(function(e) {
    if (letsdraw === true) {
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

$('#paint').mousemove(function(e) {
$('.v').css('left', e.clientX + 'px');
$('.h').css('top', e.clientY + 'px');
    letsdraw = true;
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 0.5;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});

$(window).mouseout(function(e) {
    // bind to the window mouse up, that way if you mouse up and you're not over 
    // the canvas you'll still get the release of the drawing.
    letsdraw = true;
});
});

Answer 1

你说：

我遇到的问题是当前固定的画布具有透明的背景颜色并设置为100％宽度和高度阻止下面的div具有较低的z-index，这意味着链接不能点击。使用指针事件：画布上的none不是解决方案，因为它禁用了mousemove效果。如果我使用我想要点击的链接使画布z-index低于div，则绘图将仅显示在div之外。

我认为你需要在画布上做所有事情或使用DOM和某种CSS技巧/动画。

Answer 2

    $(function() {
var letsdraw = false;

var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');

。。。 //如果您的div每次都不相同，请确定类似的道具，这样您就可以将它拉到画布上...... by'ID'|| '等级'......等等。

var div = document.getElementByID('div01');
dix.x;
div.y;
div.h;

。。。

**等。或者如果你因为任何原因无法拉出实际的div，只需在这里传递参数.... 那么你可以在这里使用它们...... *

喜欢在其顶部绘制线条的碰撞模型......

if (mouse.x > div.x && mouse.x < div.x + div.width && mouse.y > div.y && mouse.y < div.height) {
letsdraw = false;
}

绘制函数中的

.... **

**'onclick'事件监听器尝试**

$(div)onclick function();

如果整个div被拉到这里它会打开链接...但即使你只拉了div的参数你只需将点击坐标传递给div如果链接坐标匹配

$(div)onclick function(){
load.page(url: <link>your link</>
}

抱歉，如果弄错了什么，没有一起运行

但是，希望它有所帮助;

使用mousemove的画布阻止div下面的链接

2 个答案: