Question

我用32x32瓷砖做了一个Canvas。我想要抚摸鼠标所在的瓷砖，这就是我所做的（感谢一些教程和调整）

首先，我创建 cPush 和 cUndo 。当我画一些东西时，会调用 cPush 来记住它。对于 cUndo ，您稍后会看到。我也称我的 ctx var ，然后调用 canvas var 。

var canvas = document.getElementById('canvas');
var cPushArray = new Array();
var cStep = -1;
var ctx = canvas.getContext('2d');

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('canvas').toDataURL());
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
    }
}

我会跳过一些部分，因为它们不是必需的。在这里，我正在调用 onmousemove 函数：

     canvas.onmousemove = function(e) {

    let rects = [], i = 0, r;
    let jk = 0;
    for(var nb = 0, l = map.terrain.length ; nb < l ; nb++) {
         var ligne = map.terrain[nb];
         var y2 = nb * 32;
         for(var j = 0, k = ligne.length ; j < k ; j++, jk++) {
             rects[jk] = {lignej: ligne[j], x: j * 32, y: y2, w: 32, h: 32};
         }
    }

第一部分用于获取地图的每个图块并将其存储到 rects [x] 这对我以后会很有用，因为我需要特定的图块。

现在，我调用一个函数：

     map.test = function(linewidth) {
         this.tileset.dessinerTile(r.lignej, context, r.x, r.y);
         ctx.lineWidth = linewidth;
         ctx.strokeRect(r.x, r.y, 32, 32);
     }

这是为了重新绘制Tile我的中风。（ r。= rects var ，您稍后会看到）

其余的是

         var rect = this.getBoundingClientRect(),
             x = e.clientX - rect.left,
             y = e.clientY - rect.top;

     while (r = rects[i++]) {
             ctx.beginPath();
             ctx.rect(r.x, r.y, 32, 32);

             if (ctx.isPointInPath(x, y) == true) {
                 cPush();
                 map.test(2);
             } else {
                 cUndo();
             }
     }
};

var Rect 用于检查鼠标的位置。

现在，而。对于每个磁贴，我们会检查 isPointinPath 是否 true 。（x和y是鼠标的位置）。

所以，如果这是真的，函数 map.test 将绘制瓷砖，如上所述 2 lineWidth stroke

如果没有，它将撤消最后一击。

我想在这里做什么：

如果鼠标位于图块上，则会触摸图块。如果鼠标移动，则撤消最后一个笔划并抚摸新笔划。

它的作用：

如果鼠标位于图块上，则在执行笔划撤消之前会对图块进行描边，因为它会检查其他图形。因此，在移动鼠标之前，笔划仅持续0.5秒而不是永久性。我认为问题在于我正在使用＆＃34; onmousemove＆＃34;功能？我是否需要更改为＆＃34; onmousehover＆＃34;或类似的东西？我很失落......

感谢您的帮助！

问题的记录（抱歉低FPS，它是一个gif）

http://recordit.co/GokcSAoMv6

如何解决这个问题＆＃34;鼠标悬停＆＃34;在画布中的功能

0 个答案: