带鼠标的 HTML5 移动图像答案

【问题标题】：HTML5 moving image with mouse带鼠标的 HTML5 移动图像
【发布时间】：2014-11-12 21:19:20
【问题描述】：

1) 将 200 像素的纵向或横向图像加载到画布中。 (400px 宽, 200px 高) 或 (200px 宽, 400px 高)

在这里买一个： http://placekitten.com/g/400/200 http://placekitten.com/g/200/400

2) 让用户向左或向右拖动图像用于风景照片，向上和向下拖动用于肖像照片。 3) 不要让用户将图像移出视线。

问题：

1) 当您单击、按住并拖动鼠标时，它会移动图像。如果在边缘，我能够让图像停止移动。

问题在于它会在移动停止后存储光标位置，因此当您尝试进行新的拖动时，就好像图像已从您停止的位置移出视线。（难以描述，在http://jsfiddle.net/hzkveg4u/2/ fiddle 中很容易复制。）

这里是用于检测横向图像是否一直水平滚动到边缘的代码：我很困惑为什么它在遇到边缘后存储 PrevX。

$(window).mousemove(function(event) {
    if( isDragging == true ) {
        if( prevX>0 || prevY>0) {
            moveXAmount += event.pageX - prevX;
            moveYAmount += event.pageY - prevY;
            buildcanvas();
        }

    var moveRight = -200 / 2 + moveXAmount + pic_image.width - 200; 
        if ( moveRight <= 0 ) {
            prevX = event.pageX;
            prevY = event.pageY;
            return false;
        //  prevX=0;
        } else {
        prevX = event.pageX;
        prevY = event.pageY;
        }
    }
});

2) mousedown/drag 事件突出显示文本和对象，这是不需要的。

很多代码都是从这个 stackoverflow 问题中借来的： Moving image in canvas with mouse

【问题讨论】：

对不起，如果我在这里有点密集，你能否再描述一下这个问题。我能够左右移动并停止然后重新开始，没有视觉问题
是的，np。感谢您的关注。问题是你加载了 200x400 的图像。然后将其向左拖动直到停止。即使画布停止移动，也要继续拖动鼠标。现在，尝试抓取图像并将其移回右侧。您可能会注意到，您必须多滚动几秒钟才能让它再次开始移动。
我明白了，我明白了，谢谢 - 看看...
听起来不错我找到了一个修复滚动到顶部的肖像...用我更新的代码创建新的小提琴。 jsfiddle.net/hzkveg4u/3
jsfiddle.net/hzkveg4u/4

标签： jquery html

【解决方案1】：

我已经解决了这个问题，请在下面尝试，

JSFiddle

$(window).mousemove(function(event) {
    if( isDragging == true )
    {

        console.log("prev x: " + prevX);
        console.log("prev y: " + prevY);
        console.log("current x: " + event.pageX);
        console.log("current y: " + event.pageY); 
        console.log("move x amount: " + moveXAmount);
        console.log("move y amount: " + moveYAmount);

        var w = pic_image.width;
        var h = pic_image.height;

        if( (prevX>(w / 2) && prevX < w) || (prevY>(h / 2) && prevY < h))
        {
            moveXAmount += event.pageX - prevX;
            moveYAmount += event.pageY - prevY;
            buildcanvas();
        }

        var moveRight = -200 / 2 + moveXAmount + pic_image.width - 200; 
        if ( moveRight <= 0 ) {

            prevX = event.pageX;
            prevY = event.pageY;
            return false;
        //  prevX=0;
        } else {

            prevX = event.pageX;
            prevY = event.pageY;
        }
    }
});

【讨论】：