SVG和RevealJS中的鼠标位置 [英] Mouse position in SVG and RevealJS
问题描述
我正在使用RevealJS创建演示文稿，并希望合并使用D3创建的一些交互式SVG可视化。我之前已经多次没有遇到过这种情况，但这次我遇到了一些困难。经过一些调试后，我将问题跟踪到以下内容：由于某种原因，当RevealJS中包含整个东西时，相对于SVG的鼠标位置没有正确报告。
我的原始版本的代码使用标准的D3技术来获得鼠标位置。尽管如此，为了简化和隔离问题，我删除了D3，现在使用vanilla Javascript来获取鼠标位置，详见
我认为RevealJS正在对SVG执行一些额外的转换，但是我找不到它而且我是希望有一些RevealJS推荐的方法来解决这个问题。
所以我从布局（）函数 reveal.js ：
transformSlides（{layout： 'translate（-50％， - 50％）scale（'+ scale +'）'}）;
用于居中元素。为Firefox和Chrome提供一套
的报表（无需在布局中检查 function）我想水平居中滑动元素： features.zoom
（）
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;边框：纯黑色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 =stylesheethref =https://cdn.rawgit.com/hakimel/reveal。 js / 65bdccd5807b6dfecad6eb3ea38872436d291e81 / css / reveal.css>< link rel =stylesheethref =https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/lib/css/zenburn.css> ;< link rel =stylesheethref =https://cdn.rawgit.com/hakimel/reveal.js/65bdccd5807b6dfecad6eb3ea38872436d291e81/css/theme/sky.cssid =theme>< body> < div class =reveal> < div class =slides> <节> < h2 style =font-size：150％> RevealJS中的鼠标位置< / h2> < p style =font-size：75％>确保单击运行代码段最右侧的整页。然后将鼠标悬停在下面的SVG上，以获得SVG中鼠标的位置。该位置是使用标准的javascript技术获得的，并且在< a href =non_reveal_version.html>这个非透露版本< / a>中工作正常。但出于某种原因。当RevealJS存在时，Firefox中的值现在是正确的。但它在Chrome中运行良好。 < / p为H. < svg id =svgwidth =300height =200>< / svg> < div id =info> pos< / div> < /节> < / DIV> < / div>
问题解决了你有一个可靠的方式从（0,0）到（300,200）获取SVG区域中Chrome，Firefox甚至Internet Explorer的鼠标指针坐标
这里，它将如果您希望幻灯片具有与前一个（稍大）相同的大小和/或响应调整大小，请稍微不准确坐标：在与前一代码相同的位置，我会让宽度和字体大小具有百分比（我可以这样做SVG本身，这里有一个固定的大小）
dom.slides.style.width =' 90％';
dom.slides.style.fontSize = scale * 100 +'％';
I'm creating a presentation with RevealJS and would like to incorporate some interactive SVG visualizations created with D3. I've done this without difficulty a number of times before but I'm having some difficulty this time. After a bit of debugging, I've traced the problem to the following: For some reason, the mouse position relative to an SVG is not reported correctly when the whole thing is wrapped inside RevealJS.
My original version of the code used a standard D3 technique to get the mouse position. In an effort to simplify and isolate the problem, though, I eliminated D3 and now use vanilla Javascript to get the mouse position as detailed in this StackOverflow answer. My code (implemented as a stack-snippet) looks like so:
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>
When I run it inside RevealJS in Firefox on my Mac, though, I get very different numbers - as if the coordinates have been shifted by (-423,-321) or some other large negative pair of numbers. I've added a screen shot below to illustrate this. The mouse doesn't appear in the screenshot but is near the upper left corner so that it should read something like (3,5) or some small values like that.
I assume that RevealJS is performing some extra transformation on the SVG, but I can't find it and I'm hoping there's some RevealJS recommended way to deal with this.
There is a full working (well, not actually correctly) version of the RevealJS version here. It's pretty much the exact same code as in the stack-snippet above, but wrapped inside a minimal RevealJS template.
Looking into this more closely still, the issue appears to happen with Firefox but not with Chrome. I'm running current versions of those programs on my 1 year old Macbook Pro. I'd really like some code that works in a wide range of browsers and would certainly want it to run in both Firefox and Chrome.
Notice how elegant it is to create slides animations with CSS tranforms but it is not the most reliable approach for the display as it yields inconsistent results across browsers and I suppose that you're going to do something with those coordinates later and that you may need to have a precise location of the mouse pointer.
You were right something unexpected happened in reveal.js
Basically, with scale and translate the SVG element is shifted downward right and scaled but the coordinates of the pointer are as if your hovering its original position and size area then computed relative to the current layout, hence the negative values, please take a look at the picture.
So I'm removing this line from the layout() function in reveal.js :
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
that is used to center the element. With one set
of statements for both of Firefox and Chrome (no need to check for features.zoom
in the layout() function) I want to horizontally center the slide element:
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>
Problem solved you have a reliable way of getting the coordinates of the mouse pointer consistently accross both Chrome, Firefox and even Internet Explorer in the SVG area from (0,0) to (300,200)
Here, it will be slightly less accurate coordinates if you want the slide to have the same size as the previous one (slightly bigger ) and/or responsive to resizing : In the same place as the previous code, I would let the width and the font size having percentages (I could do so to the SVG itself which is having a fixed size here)
dom.slides.style.width = '90%';
dom.slides.style.fontSize= scale*100+'%';
这篇关于SVG和RevealJS中的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
