Question

1）将200px纵向或横向图像加载到画布中。（400px宽度，200px高度）或（200px宽度，400px高度）

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

2）让用户向左或向右拖动图像以拍摄风景照片，并向上和向下拖动图像照片。 3）不要让用户将图像移出视野。

问题：

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

问题在于它在移动停止后存储光标位置，因此当您尝试新的拖动时，就好像图像被移出视图而离开了视图。（难以描述，在http://jsfiddle.net/hzkveg4u/2/小提琴中容易复制。）

这是用于检测横向图像是否已经一直水平滚动到边缘的代码：我很难理解为什么它在满足边缘后存储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

Answer 1

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

JSFiddle

<强> JS

$(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;
        }
    }
});

HTML5用鼠标移动图像

1 个答案: