Crafty.mouseWheelDispatch()

Crafty 分派接收到的鼠标滚轮事件的内部方法。

事件

MouseWheelScroll [Scroll direction (up | down) = { direction: +1 | -1}]
当鼠标在舞台上滚动时触发

这个方法处理被 Crafty.stage.elem 接收的本地 mousewheel 事件(所有浏览器,除了火狐)或者 DOMMouseScroll 事件(只有火狐)。事件参数将会增加一个 .direction 属性,并分派到全局的 Crafty 对象和每一个实体。

注意,滚轮的步长属性在每一个浏览器都不一样,因为建议用检查 .direction 代替。.direction 等于 +1 表示滚轮向上滚动,-1 表示向下滚动。(见 详情)。

例子

在鼠标滚轮事件中缩放视口(摄像机):

Crafty.bind("MouseWheelScroll", function(evt) {
    Crafty.viewport.scale(Crafty.viewport._scale * (1 + evt.direction * 0.1));
});

例子

交互式的,像地图一样缩放视口(摄像机)以响应鼠标滚动事件。

// sign public void zoomTowards(Number amt, Number posX, Number posY, Number time[, String|function easingFn])
// param Number amt - amount to zoom in on the target by (eg. `2`, `4`, `0.5`)
// param Number posX - the x coordinate to zoom towards
// param Number posY - the y coordinate to zoom towards
// param Number time - the duration in ms of the entire zoom operation
// param easingFn - A string or custom function specifying an easing.
//                   (Defaults to linear behavior.)
//                   See `Crafty.easing` for more information.
//
// Zooms the camera towards a given point, preserving the current center.
// `amt > 1` will bring the camera closer to the subject,
// `amt < 1` will bring it farther away,
// `amt = 0` will reset to the default zoom level.
// Zooming is multiplicative. To reset the zoom amount, pass `0`.
//
// <example>
// // Make the entities appear twice as large by zooming in towards (100,100) over the duration of 3 seconds using linear easing behavior
// zoomTowards(2, 100, 100, 3000);
// </example>
//
function zoomTowards (amt, posX, posY, time, easingFn) {
    var scale = Crafty.viewport._scale,
        // current viewport center
        centX = -Crafty.viewport._x + Crafty.viewport._width / 2 / scale,
        centY = -Crafty.viewport._y + Crafty.viewport._height / 2 / scale,
        // direction vector from viewport center to position
        deltaX = posX - centX,
        deltaY = posY - centY;
    var f = amt - 1;

    Crafty.viewport.zoom(amt, centX + deltaX * f, centY + deltaY * f, time, easingFn);
}

// don't restrict panning of viewport in any way
Crafty.viewport.clampToEntities = false;

// enable panning of viewport by dragging the mouse
Crafty.viewport.mouselook(true);

// enable interactive map-like zooming by scrolling the mouse
Crafty.bind("MouseWheelScroll", function (evt) {
    var pos = Crafty.domHelper.translate(evt.clientX, evt.clientY);
    zoomTowards(1 + evt.direction/10, pos.x, pos.y, 5);
});