HTML5 canvas元素上的滚动验证

Question

这是我几周前问的一个先前问题的跟进。

我有两行滚动框，其中现在有验证以防止滚动到第一个框之外，但是我很难确定如何在相反方向执行类似的操作以防止滚动到最后一个框。

这是处理一行滚动事件的代码：

first = Object.keys(boxes)[0];
lScroll += e.deltaY;

if (lScroll < 0) {
    canlScroll = true;
} else {
    canlScroll = false;
    lScroll = 0;
}

Object.keys(boxes).forEach(function(key) {
    if(canlScroll && boxes[key]['s'] == 'l') {
        boxes[key]['y'] += e.deltaY;
    }
});

if (!canlScroll && lScroll == 0) {
    if (boxes[first]['y'] < 10) {
        var delta = 10 - boxes[first]['y'];

        Object.keys(boxes).forEach(function(key){
            if(boxes[key]['s'] == 'l') {
                boxes[key]['y'] += delta;
            }
        });
    }
}

在此处工作的完整示例： https ： //jsfiddle.net/hbd6nL4e/1/

Answer 1

这可以解决您的问题：重新编辑：

$(document).ready(function() {
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  c.addEventListener("mousewheel", scrolling, false);

  c.ctx = ctx;
  c.c = c;

  draw(ctx, c);
});

function draw(ctx, c) {
    // clear canvas for redraw
    ctx.clearRect(0, 0, c.width, c.height);

    // draw shapes
    Object.keys(boxes).forEach(function (key) {
        ctx.fillStyle = "#999";
        ctx.fillRect(boxes[key].x, boxes[key].y, boxes[key].w, boxes[key].h);
    });
}

function scrolling(e) {
    var mouseX = e.pageX - this.offsetLeft;

  // scroll left boxes
    if (mouseX <= 400) {
        first = Object.keys(boxes)[0];
        lScroll += e.deltaY;
    //console.log(lScroll);  
    //console.log((Object.keys(boxes).length/2)*(-100));
        if (lScroll < 0 && (lScroll>=(Object.keys(boxes).length/2)*(-100))) {

            canlScroll = true;
        } else {if (lScroll<(Object.keys(boxes).length/2)*(-100)){
            lScroll = (Object.keys(boxes).length/2)*(-100);
            canlScroll = false;//console.log("final down:"+lScroll);
        }

          else  {lScroll = 0; canlScroll = false;//console.log("final up:"+lScroll);
                }
        }

        Object.keys(boxes).forEach(function(key) {
                if(canlScroll && boxes[key].s === 'l') {
                  //console.log(e.deltaY/1.65);
                    boxes[key].y += Math.round(e.deltaY/1.65);
                }
            }
        );

        if (!canlScroll && lScroll === 0) {
            if (boxes[first].y < 10) {
                var delta = 10 - boxes[first].y;

                Object.keys(boxes).forEach(function(key){
                    if(boxes[key].s === 'l') {
                        boxes[key].y += Math.round(delta);
                      //console.log(""+Math.round(delta));
                    }
                });
            }
        }

  // scroll right boxes
    } else {
        first = Object.keys(boxes)[12];
        rScroll += e.deltaY;

        if (rScroll < 0 && (rScroll>=(Object.keys(boxes).length/2)*(-100))) {

            canrScroll = true;
        } else {if (rScroll<(Object.keys(boxes).length/2)*(-100)){
            rScroll = (Object.keys(boxes).length/2)*(-100);
            canrScroll = false;//console.log("final down:"+rScroll);
        }

          else  {rScroll = 0; canrScroll = false;//console.log("final up:"+rScroll);
                }
        }

        Object.keys(boxes).forEach(function(key) {
                if(canrScroll && boxes[key].s == 'r') {
                    boxes[key].y += (e.deltaY/1.65);
                }
            }
        );

        if (!canrScroll && rScroll === 0) {
            if (boxes[first].y < 10) {
                var delta = 10 - boxes[first].y;
                Object.keys(boxes).forEach(function(key){
                    if(boxes[key].s == 'r') {
                        boxes[key].y += delta;
                    }
                });
            }
        }

    }

    draw(e.target.ctx, e.target.c);
    e.preventDefault();
}

已编辑，现在可以同时使用鼠标和指针板。 之所以不能正常工作，是因为鼠标和指针垫的deltaY差异很大：一个是100px，另一个是2.5px。 现在唯一的问题是firefox无法处理它，实际上它只能在Chrome上运行。

在此处检查： http : //output.jsbin.com/gobaguhehe