[英]RevealJS and Highchart Mouse position Tooltip Issue
I've just built my first RevealJS presentation and while all seemed to work at glance I ran into an game breaking issue with a HighChart that is caused by the way RevealJS scales/moves and elements and SVG related (at least I think so). 我刚刚建立了我的第一个RevealJS演示文稿,尽管所有功能似乎一目了然,但我遇到了HighChart的游戏突破性问题,该问题是由RevealJS缩放/移动,元素和SVG相关的方式引起的(至少我是这么认为的)。
There's a similar issue report here, at least it seems related, though I've been unable to resolve my issue as the suggested code is not a drop-in and I'm my JS skills are lacking at best -> Mouse position in SVG and RevealJS 这里有一个类似的问题报告,至少看起来似乎相关,尽管我无法解决我的问题,因为建议的代码不是插件 ,并且我的JS技能充其量缺乏-> SVG中的鼠标位置和RevealJS
I was hoping someone could help me pinpoint a potential solution, maybe that of the other stack easily can be adapted (I do need the scaling function, I know I could initialize RevealJS with a percentage option, but that will effectively break scaling on any smaller devices). 我希望有人可以帮助我确定一个潜在的解决方案,也许可以轻松地适应其他堆栈的解决方案(我确实需要缩放功能,我知道我可以使用一个百分比选项来初始化RevealJS,但这将有效地打破任何较小的缩放设备)。
This is the code part that seems related, in my case the second else if( scale > 1 && features.zoom ) { ... }
is triggered and the scaling creates a bad offset depending on resolution. 这是似乎相关的代码部分,在我的情况下,第二个其他
if( scale > 1 && features.zoom ) { ... }
被触发,并且缩放会根据分辨率产生不良的偏移量。
var size = getComputedSlideSize();
// Layout the contents of the slides
layoutSlideContents( config.width, config.height );
dom.slides.style.width = size.width + 'px';
dom.slides.style.height = size.height + 'px';
// Determine scale of content to fit within available space
scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );
console.log("Size:"+size.presentationWidth);
console.log("Size:"+size.width);
console.log("1:"+scale);
// Respect max/min scale settings
scale = Math.max( scale, config.minScale );
console.log("2:"+scale);
scale = Math.min( scale, config.maxScale );
console.log("3:"+scale);
// Don't apply any scaling styles if scale is 1
if( scale === 1 ) {
dom.slides.style.zoom = '';
dom.slides.style.left = '';
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
transformSlides( { layout: '' } );
}
else {
// Prefer zoom for scaling up so that content remains crisp.
// Don't use zoom to scale down since that can lead to shifts
// in text layout/line breaks.
if( scale > 1 && features.zoom ) {
dom.slides.style.zoom = scale;
dom.slides.style.left = '';
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
transformSlides( { layout: '' } );
}
// Apply scale transform as a fallback
else {
dom.slides.style.zoom = '';
dom.slides.style.left = '50%';
dom.slides.style.top = '50%';
dom.slides.style.bottom = 'auto';
dom.slides.style.right = 'auto';
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
}
}
I've created a codepen to illustrate the issue, resize it from small to max size and check the mouse tooltip, there will be a small to massive offset between where the mouse is and what tooltip point shows except when the scale is 1:1. 我创建了一个Codepen来说明问题,将其从小到最大调整大小并检查鼠标的工具提示,除了比例为1:1时,鼠标的位置与显示的工具提示点之间会有小到大的偏移量。
https://codepen.io/anon/pen/MVLazG https://codepen.io/anon/pen/MVLazG
Any and all help would be welcome. 任何帮助都将受到欢迎。 If there's a way to process the graph in a way that would retain a better mouse position I'd be grateful both suggestions and code (banged my head for a couple of hours on different approaches without luck).
如果有一种方法可以保留更好的鼠标位置来处理图形,我将不胜感激建议和代码(用其他方法敲了几个小时没碰运气)。
It is caused by setting transform's scale
on the wrapping div. 这是由在包装div上设置transform的
scale
引起的。 You can read more about on Highcharts github here . 您可以在此处在Highcharts github上了解更多信息。
There is a workaround for this which seems to work in your example: 有一个解决方法,在您的示例中似乎可以解决:
Highcharts.wrap(Highcharts.Pointer.prototype, 'normalize', function (proceed, event, chartPosition) {
var e = proceed.call(this, event, chartPosition);
var element = this.chart.container;
if (element && element.offsetWidth && element.offsetHeight) {
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
var scaleY = element.getBoundingClientRect().height / element.offsetHeight;
if (scaleX !== 1) {
e.chartX = parseInt(e.chartX / scaleX, 10);
}
if (scaleY !== 1) {
e.chartY = parseInt(e.chartY / scaleY, 10);
}
}
return e;
});
live example: https://codepen.io/anon/pen/GxzPKq 实时示例: https : //codepen.io/anon/pen/GxzPKq
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.