如何在画架JS中添加滚动缩放功能到位图?

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