变化reveal.js放大快捷

目前滑盖内部。ZOMM快捷键为ALT +单击变化reveal.js放大快捷

// 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

干杯，阿纳尔多。

来源

2015-06-27 arnaldo

您可以通过检查幻灯片的mousemove事件来实现此目的。当按下“z”时，这将用于跟踪鼠标的最后位置。然后，您还需要更新已定义的键绑定，例如，只要按下“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.jsonDocumentKeyDown功能，读取// 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的默认配置中），您将放大与光标下的元素相关的位置，这可能与您实际需要的位置有点偏离，特别是如果该元素需要一些屏幕空间。

注意，这种方法并不太适合于changing the keyboard bindings Reveal.js的API，因为异步调用其zoom.js依赖（功能initiateZoom必须定义你叫Reveal.configure()之前）。但是，您可以通过使用Reveal.isReady()来避开它。这只是必要的，但如果你想使用API来重新配置热键绑定，而不是像我在上面的例子中那样编辑源代码。

来源

2015-12-06 02:50:05

变化reveal.js放大快捷

回答

相关问题