Question

我们说我的画布分为15x10 32像素的棋盘格。因此，我有这个：

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var tileSize = 32;

var xCoord
var yCoord

var tilesX = 15; // tiles across
var tilesY = 10; // tiles up and down

var counted = 1; // for drawing purpose for checkerboard for visual guidance

var mouseSel = new Image()
mouseSel.src = 'http://i.imgur.com/vAA03NB.png' // mouse selection
mouseSel.width = 32
mouseSel.height = 32

    function isOdd(num) {
        return num % 2;
    }

    function getMousePos(canvas, evt) {
        // super simple stuff here
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

drawCanvas(); // upon intilization... draw

function drawCanvas() {
    for (var y = 0; y <= 10; y++) {
        for (var x = 0; x <= 15; x++) {

            if (isOdd(counted)) {
                context.fillStyle = '#dedede'
                context.fillRect(x * 32, y * 32, 32, 32);
                // checkboard drawn complete.
            }

            counted++;
        } // end first foor loop

        counted++;
    } // end last for loop


    if (counted >= 176) counted = 1 // once all tiles (16x11) are drawn... reset counter for next instance

}


canvas.addEventListener('mousemove', function (evt) {
    context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas so mouse isn't stuck
    drawCanvas(); // draw checkboard

    // get the actual x,y position of 15x10 32-pixel checkboard
    var mousePos = getMousePos(canvas, evt);
    mousePos.xCoord = Math.floor(mousePos.x / tileSize)
    mousePos.yCoord = Math.floor(mousePos.y / tileSize)


    // draw the mouse selection
    context.drawImage(mouseSel, (mousePos.xCoord * 32), (mousePos.yCoord * 32), 32, 32) // draw mouse selection


    // debug
    var message = ' (' + mousePos.xCoord + ',' + mousePos.yCoord + ') | (' + mousePos.x + ',' + mousePos.y + ')';
    var textarea = document.getElementById('debug');
    textarea.scrollTop = textarea.scrollHeight;
    $('#debug').append(message + '\n');


}, false);

＆＃13;

canvas#canvas {
    background: #ABABAB;
    position: relative;
    z-index: 1;
    float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" height="352" width="512" tabindex="0"></canvas>
<textarea name="" id="debug" cols="30" rows="35"></textarea>

＆＃13;

**注意：**确保在该预览窗格中向下滚动，以便查看调试文本区域。

正如您所看到的，＆＃34;绘图＆＃34;它每次移动都会触发。这意味着每个像素。

我试图找出当新的x，y坐标已经改变时如何使绘图点火。因为当它只移动了5个像素并且它仍然会在同一个地方绘制时，重绘鼠标选择是没用的。

我的建议

进入后，有一个临时值，当传递时，再次重绘？

Answer 1

制作一个临时值，如果它与以前不同，请更新。然后将代码放在if语句中，其中任何一个都已更改。

var tempX, tempY;
var newX = 100;
var newY = 100;

tempX = mousePos.xCoord;
tempY = mousePos.yCoord;


if (newX !== tempX || newY !== tempY) {
    // code here
}

if (tempX !== newX) newX = mousePos.xCoord;
if (tempY !== newY) newY = mousePos.yCoord;

JSFiddle：http://jsfiddle.net/weka/bvnma354/8/

画布 - 仅在将鼠标悬停在新图块而不是整个画布上时绘制

1 个答案: