Javascript RevealJS和Highchart鼠标位置工具提示问题

我刚刚构建了我的第一个RevealJS演示文稿，虽然乍一看一切都正常，但我遇到了一个打破游戏规则的问题，这是由RevealJS缩放/移动、元素和SVG相关的方式引起的（至少我认为是这样）

这里有一个类似的问题报告，至少它看起来是相关的，尽管我无法解决我的问题，因为建议的代码不是偶然出现的，而且我很抱歉，我的JS技能充其量是缺乏的->

我希望有人能帮我找到一个潜在的解决方案，也许其他堆栈的解决方案可以很容易地进行调整（我确实需要缩放功能，我知道我可以使用百分比选项初始化RevealJS，但这将有效地打破任何较小设备上的缩放）

这是似乎相关的代码部分，在我的例子中，如果（scale>1&&features.zoom）{…}被触发，则第二个else

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 +')' } );
            }
        }

我已经创建了一个代码笔来说明这个问题，将其从小尺寸调整到最大尺寸，并检查鼠标工具提示，在鼠标位置和工具提示点之间会有一个小到大的偏移，除非比例为1:1

---

欢迎任何和所有的帮助。如果有一种处理图形的方法能够保持更好的鼠标位置，我将非常感谢您的建议和代码（我的头在不同的方法上撞了几个小时，但没有运气）。

这是由于在包装分区上设置transform的

比例造成的。您可以在Highcharts github上阅读更多信息

在您的示例中，似乎有一个解决方法：

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;
});

实例：
这是由于在包装div上设置transform的
比例造成的。您可以在Highcharts github上阅读更多信息

在您的示例中，似乎有一个解决方法：

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;
});

实例：
这可能是个好消息，我将在我的本地代码中总结一下，看看这是否真的可以解决我的问题（我真的很高兴）。更新：至少在Chrome上，新的实例似乎只在变小时才起作用，但在分辨率更高的屏幕上，当屏幕变大时，它似乎不起作用，除非我遗漏了什么。仍在努力理解代码并阅读引用的github讨论。@组织者，我看到您在这里有一个可行的解决方案，我不确定您为什么不接受它。您的原始代码直接在浏览器中运行良好。最后，让我告诉你，这与那个问题大不相同，因为Firefox存在问题。这可能是个好消息，我将在本地代码中总结一下，看看这是否真的可以解决我的问题（我真的很高兴）更新：至少在Chrome上，新的live示例似乎只在变小时有效，但在分辨率更高的屏幕上，当它变大时似乎不起作用，除非我遗漏了什么。仍在努力理解代码并阅读引用的github讨论。@组织者，我看到您在这里有一个可行的解决方案，我不确定您为什么不接受它。您的原始代码直接在浏览器中运行良好。最后，让我告诉你，这与那个问题大不相同，因为Firefox的问题。