javascript - 更改reveal.js缩放快捷方式

Question

目前幻灯片内 zomm 的快捷键是 Alt + 单击

// Custom reveal.js integration
(function(){
var isEnabled = true;

document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) {
    var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';

    var zoomPadding = 20;
    var revealScale = Reveal.getScale();

    if( event[ modifier ] && isEnabled ) {
        event.preventDefault();

        var bounds = event.target.getBoundingClientRect();

        zoom.to({
            x: ( bounds.left * revealScale ) - zoomPadding,
            y: ( bounds.top * revealScale ) - zoomPadding,
            width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
            height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
            pan: false
        });
    }
} );

我应该如何将 Alt + 鼠标单击更改为仅按“z”键？主文件为:https://github.com/hakimel/reveal.js/blob/master/plugin/zoom-js/zoom.js

干杯，阿纳尔多。

Answer 1

您可以通过检查幻灯片的 mousemove 事件来实现此目的。这将用于跟踪按下“z”时鼠标最后所处的位置。然后，您还需要更新定义的键绑定(bind)，这样每当您按“z”时(keyDown 事件都会触发调用 reveal.js 中的 onDocumentKeyDown 函数>) 网页放大该元素。

虽然我已经测试了下面的内容并发现它有效，但我应该补充一点，我不是一个经常使用 JavaScript 的程序员。我使用的是全局变量，许多脚本和编程语言都普遍认为这是一件坏事。

在zoom.js中添加:

var bbox_elm_below_mouse; // keeps track of the mouselocation

(function(){
document.querySelector( '.reveal .slides' ).addEventListener('mousemove', function(event){
    bbox_elm_below_mouse = event.target;
    })
})();  // Update the global var any time the mouse moves.

function initiateZoom(){
    // based on the function on the function at the top in reveal.js's modification to zoom.js
    var isEnabled = true;
    var zoomPadding = 20;
    var revealScale = Reveal.getScale();

    if( isEnabled ) {
        var bounds = bbox_elm_below_mouse.getBoundingClientRect();
        zoom.to({
            x: ( bounds.left * revealScale ) - zoomPadding,
            y: ( bounds.top * revealScale ) - zoomPadding,
            width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
            height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
            pan: false
        });
    }

    Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
    Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
};

您需要跟踪鼠标事件和键盘事件的原因是，当键盘事件触发时，该事件无法知道鼠标在哪里(如 discussed in this forum )。

最后，添加到 reveal.js 的 onDocumentKeyDown 函数，在 //2. System Defined Key Bindings 部分以下几行:

// letter "z"
case 90: initiateZoom(); break;

switch 语句将如下所示:

        switch( event.keyCode ) {
            // p, page up
            case 80: case 33: navigatePrev(); break;
            // n, page down
            case 78: case 34: navigateNext(); break;
            // h, left
            case 72: case 37: navigateLeft(); break;
            // l, right
            case 76: case 39: navigateRight(); break;
            // k, up
            case 75: case 38: navigateUp(); break;
            // j, down
            case 74: case 40: navigateDown(); break;
            // home
            case 36: slide( 0 ); break;
            // end
            case 35: slide( Number.MAX_VALUE ); break;
            // space
            case 32: isOverview() ? deactivateOverview() : event.shiftKey ? navigatePrev() : navigateNext(); break;
            // return
            case 13: isOverview() ? deactivateOverview() : triggered = false; break;
            // two-spot, semicolon, b, period, Logitech presenter tools "black screen" button
            case 58: case 59: case 66: case 190: case 191: togglePause(); break;
            // f
            case 70: enterFullscreen(); break;
            // a
            case 65: if ( config.autoSlideStoppable ) toggleAutoSlide( autoSlideWasPaused ); break;
            // letter "z"
            case 90: initiateZoom(); break;
            default:
                triggered = false;
        }

现在重新加载演示文稿，当鼠标位于要放大的元素上方时按“z”。

我可能会更改对 zoom.to 的调用，以使浏览器放大到光标所在的位置。就像现在一样(即使在 Reveal.js 的默认配置中)，您将放大与光标下的元素相关的位置，这可能有点远离您实际想要的位置，特别是如果该元素采用一些屏幕空间。

请注意，此方法不太适合 Reveal.js 的 API changing the keyboard bindings ，因为异步调用其 zoom.js 依赖项(必须在调用 Reveal.configure( 之前)定义函数 initiateZoom ))。但是，您也许可以使用 Reveal.isReady() 来解决这个问题。 。不过，只有当您想使用 API 重新配置热键绑定(bind)时才需要这样做，而不是像我在上面的示例中那样编辑源代码。