[P2] Attach mouse wheel on canvas / image

[Arrowbaz]

Hello,

 

I would like to scale the game when I scroll, but I can acces to my variables.

 

this.map is undefined .

 

 

Also, are there an example to do this with multitouch for mobile (with pinchin, pinchout) ?

 

Thank you !

(function() {  'use strict';  function Game() {    this.map = null;  }  Game.prototype = {    create: function () {      if (this.game.canvas.addEventListener) {        // IE9, Chrome, Safari, Opera        this.game.canvas.addEventListener("mousewheel", this.mouseWheelHandler, true);        // Firefox        this.game.canvas.addEventListener("DOMMouseScroll", this.mouseWheelHandler, true);      }      // IE 6/7/8      else this.game.canvas.attachEvent("onmousewheel", this.mouseWheelHandler);    },    mouseWheelHandler: function (e) {        // cross-browser wheel delta        var e = window.event || e; // old IE support        var delta = Math.max(-0.1, Math.min(0.1, (e.wheelDelta || -e.detail)));        this.map.scale.x += delta;        this.map.scale.y += delta;    }    };  window['xxx'] = window['xxx'] || {};  window['xxx'].Game = Game;}());

 

 

 

 

[Luiz Bills]

use .bind

if (this.game.canvas.addEventListener) {        // IE9, Chrome, Safari, Opera        this.game.canvas.addEventListener("mousewheel", this.mouseWheelHandler.bind(this), true);        // Firefox        this.game.canvas.addEventListener("DOMMouseScroll", this.mouseWheelHandler.bind(this), true);}// IE 6/7/8else this.game.canvas.attachEvent("onmousewheel", this.mouseWheelHandler.bind(this));

[jpdev]

Thank you very much for this Bills.

 

I had been using this awkward pattern to preserve the reference to my own object in the callback code:

 

var self = this;

addEventListener("xxx", function(e) { self.mouseWheelHandler(e); });

 

the bind() is so much better!

 

That's why browsing this forums is such a good idea - learn something every day.