我如何在easylJS中将滚动缩放功能添加到位图？

Question

我正在评估是否要使用EaselJS来制作JS图像查看器/编辑器。一种必要的功能是滚动缩放功能。这意味着当您将鼠标悬停在位图上并且移动滚轮时，图像会正确缩放。

我正在使用EaselJS拖放演示来尝试滚动缩小（https://www.createjs.com/demos/easeljs/draganddrop）。我找不到移动滚轮时会触发的事件。

这是我试图将以下事件添加到位图的事件：

 bitmap.on("mousewheel", function (evt) {
            this.scale = this.scale * 2;
            update = true;
        });

我也尝试了以下但未成功的方法：

 bitmap.on("wheel", function (evt) {
            this.scale = this.scale * 2;
            update = true;
        });

和

 bitmap.on("scroll", function (evt) {
            this.scale = this.scale * 2;
            update = true;
        });

这里是完整的演示代码：

var canvas, stage;

var mouseTarget;    // the display object currently under the mouse, or being dragged
var dragStarted;    // indicates whether we are currently in a drag operation
var offset;
var update = true;

function init() {
    examples.showDistractor();
    // create stage and point it to the canvas:
    canvas = document.getElementById("testCanvas");
    stage = new createjs.Stage(canvas);

    // enable touch interactions if supported on the current device:
    createjs.Touch.enable(stage);

    // enabled mouse over / out events
    stage.enableMouseOver(10);
    stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas

    // load the source image:
    var image = new Image();
    image.src = "../_assets/art/daisy.png";
    image.onload = handleImageLoad;
}

function stop() {
    createjs.Ticker.removeEventListener("tick", tick);
}

function handleImageLoad(event) {
    var image = event.target;
    var bitmap;
    var container = new createjs.Container();
    stage.addChild(container);

    // create and populate the screen with random daisies:
    for (var i = 0; i < 100; i++) {
        bitmap = new createjs.Bitmap(image);
        container.addChild(bitmap);
        bitmap.x = canvas.width * Math.random() | 0;
        bitmap.y = canvas.height * Math.random() | 0;
        bitmap.rotation = 360 * Math.random() | 0;
        bitmap.regX = bitmap.image.width / 2 | 0;
        bitmap.regY = bitmap.image.height / 2 | 0;
        bitmap.scale = bitmap.originalScale = Math.random() * 0.4 + 0.6;
        bitmap.name = "bmp_" + i;
        bitmap.cursor = "pointer";

        // using "on" binds the listener to the scope of the currentTarget by default
        // in this case that means it executes in the scope of the button.
        bitmap.on("mousedown", function (evt) {
            this.parent.addChild(this);
            this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
        });

        // the pressmove event is dispatched when the mouse moves after a mousedown on the target until the mouse is released.
        bitmap.on("pressmove", function (evt) {
            this.x = evt.stageX + this.offset.x;
            this.y = evt.stageY + this.offset.y;
            // indicate that the stage should be updated on the next tick:
            update = true;
        });

        bitmap.on("rollover", function (evt) {
            this.scale = this.originalScale * 1.2;
            update = true;
        });

        bitmap.on("rollout", function (evt) {
            this.scale = this.originalScale;
            update = true;
        });

        bitmap.on("mousewheel", function (evt) {
            this.scale = this.scale * 2;
            update = true;
        });

    }

    examples.hideDistractor();
    createjs.Ticker.addEventListener("tick", tick);
}

function tick(event) {
    // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
    if (update) {
        update = false; // only update once
        stage.update(event);
    }
}

我希望在鼠标悬停在位图上时滚动时，图像将缩放2倍。如果有人对如何正确执行此操作有任何想法，请告诉我。

Answer 1

    document.getElementById('canvas').addEventListener('wheel', moverContenido.bind(this));

    var i = 0;

    function moverContenido(accion) {

        if(accion.wheelDelta > 0 || accion.detail > 0) {

            i++;

        } else if(accion.wheelDelta < 0 || accion.detail < 0) {

            i--;        

        }
    }