文章/答案/技术大牛

发布

社区首页 >问答首页 >带鼠标的HTML5运动图像

问带鼠标的HTML5运动图像
EN

Stack Overflow用户

提问于 2014-11-12 21:19:20

回答 1查看 1.5K关注 0票数 1

1)将200 or肖像或景观图像加载到画布中。(400 or宽度，200 or高度)或(200 or宽度，400 or高度)

在这里买一个：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)鼠标向下/拖动事件突出显示文本和对象，这是不需要的。

这段代码中有很多是从堆栈溢出问题：用鼠标在画布上运动的图像中借用来的。

html

jquery

回答 1

Stack Overflow用户

发布于 2014-11-12 23:14:19

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26896770

复制

相似问题

问带鼠标的HTML5运动图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带鼠标的HTML5运动图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带鼠标的HTML5运动图像
EN