Scroll-Validierung auf HTML5-Canvas-Elementen

Question

Dies ist eine Folge von einem previous question Ich fragte vor ein paar Wochen.

Ich habe zwei Zeilen mit Scrollboxen, in denen jetzt eine Validierung vorhanden ist, um Scrollen über die erste Box hinaus zu verhindern, aber ich habe Schwierigkeiten, etwas Ähnliches in umgekehrter Richtung zu tun, um Scrollen zu vermeiden letzte Box.

Dies ist der Code, der das Scroll-Ereignis von einer Reihe Griffe:

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

Voll Beispiel, hier zu arbeiten: https://jsfiddle.net/hbd6nL4e/1/

Answer 1

Dies ist eine Lösung für Ihr Problem sein könnte: nachbearbeitet:

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

Bearbeitet und jetzt funktioniert es mit Maus und Zeigerblock. Der Grund, warum es nicht funktionierte, ist, weil Maus und Zeiger pad deltaY sehr unterschiedlich sind: einer ist 100px Schritte die anderen 2,5px. Jetzt ist das einzige Problem, dass Firefox es nicht behandelt, in der Tat funktioniert es nur in Chrome.

Prüfen Sie es hier: http://output.jsbin.com/gobaguhehe