Question

我正在使用canvas，在加载图片后，我需要让用户在画布内移动图像。

我遵循了this教程。问题是滚动页面后，图像本身不再可以点击。

这是我的fiddle和代码

/*
get canvas element
 */
var $jqueryCanvas = $('#canvas');

/*
init all variables
 */
var canvas = document.getElementById('canvas'),
    canvasContext = canvas.getContext('2d'),
    canvasOffset = $jqueryCanvas.offset(),
    offsetX = canvasOffset.left,
    offsetY = canvasOffset.top,
    startX,
    startY,
    isDown = false,
    pi2 = Math.PI * 2,
    resizerRadius = 8,
    rr = resizerRadius * resizerRadius,
    draggingResizer = {x: 0,  y: 0},
    imageX = 0,
    imageY = 0,
    imageWidth,
    imageHeight,
    imageRight,
    imageBottom,
    draggingImage = false;

var userImage = new Image();

userImage.onload = function () {

    oImageWidth = userImage.width;
    oImageHeight = userImage.height;

    imageWidth = oImageWidth;
    imageHeight = oImageHeight;

    imageRight = imageX + imageWidth;
    imageBottom = imageY + imageHeight;

    drawImage();

};

userImage.src = 'https://c2.staticflickr.com/8/7301/11186264136_7860190995_n.jpg';

function drawImage(clearCanvas, withTransparency, opacity) {

    var toClear = clearCanvas || true;
    var hasOpacity = withTransparency || false;
    var imageOpacity = opacity || 0.5;

    /*
        clear canvas
    */
    if ( toClear )
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    /*
        draw image
    */
    if ( hasOpacity )
        canvasContext.globalAlpha = imageOpacity;

    canvasContext.drawImage(userImage, 0, 0, imageWidth, imageHeight, imageX, imageY, imageWidth, imageHeight);
    canvasContext.globalAlpha = 1;

}

function hitImage(x, y) {

    return ( x > imageX && x < (imageX + imageWidth) && y > imageY && y < (imageY + imageHeight) );

}

function handleMouseDown(e) {

    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    isImageHit = hitImage(startX, startY);
    draggingImage = isImageHit;

    drawImage(true, true);

}

function handleMouseUp(e) {

    draggingResizer = -1;
    draggingImage = false;
    drawImage(false, true);

}

function handleMouseOut(e) {

    handleMouseUp(e);

}

function handleMouseMove(e) {

    if ( !draggingImage ) return;

    imageClick = false;

    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    var dx = mouseX - startX;
    var dy = mouseY - startY;

    imageX += dx;
    imageY += dy;
    imageRight += dx;
    imageBottom += dy;

    startX = mouseX;
    startY = mouseY;

    drawImage(true, true);

}

$jqueryCanvas.mousedown(function (e) { handleMouseDown(e); });
$jqueryCanvas.mousemove(function (e) { handleMouseMove(e); });
$jqueryCanvas.mouseup(function (e) { handleMouseUp(e); });
$jqueryCanvas.mouseout(function (e) { handleMouseOut(e); });

以下是问题的屏幕截图正如您所注意到的，我缩小了结果标签以模拟长页面。如果你在顶部，它可以正常工作，你可以移动图像。但如果您只是滚动以使图像仍然可见，则它不再可移动。

我所遵循的教程中也出现了这个问题。

据我了解，问题在于函数hitImage()，它检查我是否单击图像本身。

不幸的是我无法100％复制我的网页，但是当我滚动甚至50px时，即使整个画布在视口中100％，我也无法移动图像。

有什么办法可以解决这个问题吗？

由于

快速修改我刚注意到，滚动后，您仍然可以移动图像，但必须抓住其初始位置。就像图像卡在初始位置一样，当您点击某个区域时，由于页面已滚动，因此无法知道图像已移动。

滚动页面后移动画布不起作用

0 个答案: