我正在使用 RevealJS 创建一个演示文稿，并希望合并一些使用 D3 创建的交互式 SVG 可视化效果。之前我已经毫无困难地完成了很多次，但这次我遇到了一些困难。经过一些调试后，我将问题追溯到以下几点:由于某种原因，当整个内容都包含在 RevealJS 中时，鼠标相对于 SVG 的位置没有正确报告。
我的原始代码版本使用标准 D3 技术来获取鼠标位置。不过，为了简化和隔离问题，我取消了 D3，现在使用 vanilla Javascript 获取鼠标位置，详见 this StackOverflow answer。 .我的代码(作为堆栈片段实现)如下所示:
var info = document.getElementById("info");
var svg = document.getElementById("svg");
pt = svg.createSVGPoint();
var cursorPoint = function(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousemove',function(evt){
var loc = cursorPoint(evt);
info.textContent = "(" + loc.x + ", " + loc.y + ")";
},false);svg {
border: solid black 1px;
border-radius: 8px;
}<div id="info">pos</div>
<svg id="svg" width="300" height="200"></svg>
但是，当我在 Mac 上的 Firefox 中的 RevealJS 中运行它时，我得到了非常不同的数字 - 好像坐标已经移动了 (-423,-321) 或其他一些大的负数对。我在下面添加了一个屏幕截图来说明这一点。鼠标没有出现在屏幕截图中，但靠近左上角，因此它应该显示类似 (3,5) 的内容或类似的一些小值。
我假设 RevealJS 正在对 SVG 执行一些额外的转换，但我找不到它，我希望有一些 RevealJS 推荐的方法来处理这个问题。
RevealJS version here 有一个完整的工作版本(好吧，实际上并不正确) .它与上面的堆栈片段中的代码几乎完全相同，但包装在一个最小的 RevealJS 模板中。
再仔细研究一下，这个问题似乎发生在 Firefox 而不是 Chrome。我在我 1 岁的 Macbook Pro 上运行这些程序的当前版本。我真的很喜欢一些可以在各种浏览器中运行的代码，并且当然希望它可以在 Firefox 和 Chrome 中运行。
最佳答案
请注意使用 CSS tranforms 创建幻灯片动画是多么优雅但这不是最可靠的显示方法，因为它会在浏览器中产生不一致的结果，我想你稍后会用这些坐标做一些事情，你可能需要鼠标指针的精确位置。
你是对的，在 reveal.js 中发生了意想不到的事情
基本上，用 scale和 translate SVG 元素向右下移并缩放，但指针的坐标就像您悬停其原始位置和大小区域，然后相对于当前布局计算，因此为负值，请看图片。
所以我要从 reveal.js 的 layout() 函数中删除这一行:
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
用于使元素居中。一套
Firefox 和 Chrome 的语句(无需检查 features.zoom
在 layout() 函数中)我想水平居中滑动元素:
dom.slides.style.left = '0';
dom.slides.style.top = 'auto';
dom.slides.style.bottom = 'auto';
dom.slides.style.right = '0';
Reveal.initialize({});
var info = document.getElementById("info");
var svg = document.getElementById("svg");
pt = svg.createSVGPoint();
var cursorPoint = function(evt) {
pt.x = evt.clientX;
pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousemove', function(evt) {
var loc = cursorPoint(evt);
info.textContent = "(" + loc.x + ", " + loc.y + ")";
}, false);svg {
background-color: white;
border: solid black 1px;
border-radius: 8px;
}<script src="https://cdn.rawgit.com/Nasdav/revealjs-for-SO-answer/b6ea3980/reveal.js"></script>
<script src="https://cdn.rawgit.com/hakimel/reveal.js/master/lib/js/head.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/css/reveal.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/lib/css/zenburn.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/css/theme/sky.css" id="theme">
<body>
<div class="reveal">
<div class="slides">
<section>
<h2 style="font-size:150%">Mouse position in RevealJS</h2>
<p style="font-size:75%">
Make sure to click "full page" at the right most side of "Run Code Snippet". Then hover over the SVG below to get the "position" of the mouse in the SVG. The position is obtained using a standard javascript technique and works fine in
<a href="non_reveal_version.html">this non-reveal version</a>. For some reason though. The values are correct now in Firefox when RevealJS is present. It works well in Chrome, though.
</p>
<svg id="svg" width="300" height="200"></svg>
<div id="info">pos</div>
</section>
</div>
</div>
问题已解决，您有一种可靠的方法可以使 SVG 区域中的鼠标指针坐标在 Chrome、Firefox 甚至 Internet Explorer 中始终如一地从 (0,0) 到 (300,200)
在这里，如果您希望幻灯片与之前的幻灯片具有相同的大小(稍大)和/或响应调整大小，则坐标会稍微不准确:在与之前的代码相同的位置，我会让宽度和具有百分比的字体大小(我可以对这里具有固定大小的 SVG 本身这样做)
dom.slides.style.width = '90%';
dom.slides.style.fontSize= scale*100+'%';
关于javascript - SVG 和 RevealJS 中的鼠标位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47949001/
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只
我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA