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”时鼠标的最后位置。然后，您还需要更新已定义的键绑定，这样无论何时按“z”（keyDown事件将触发onDocumentKeyDown中reveal.js函数的调用），网页都会放大元件。

虽然我已经测试了下面的内容并发现它正常工作，但我应该补充一点，我不是一个经常使用的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的{{1}}函数，在以下行中显示onDocumentKeyDown部分：

// 2. System defined key bindings

// letter "z" case 90: initiateZoom(); break;语句将如下所示：

switch

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

我可能会将调用更改为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; }，以使浏览器完全放大光标所在的点。就像现在一样（即使在Reveal.js的默认配置中），您将放大与光标下元素相关的位置，这可能与您实际需要的位置相差一点，特别是如果该元素需要一些屏幕空间。

请注意，此方法不适合Reveal.js的changing the keyboard bindings API，因为对其zoom.to依赖项的异步调用（必须定义函数zoom.js 之前你致电initiateZoom）。但是，您可以使用Reveal.isReady()来绕过它。如果你想使用API来重新配置热键绑定，而不是像我在上面的例子中那样编辑源代码，那么这是必要的。

更改reveal.js缩放快捷方式

1 个答案: