Question

我刚刚构建了我的第一个RevealJS演示文稿，虽然所有看起来都很有效但是我遇到了一个HighChart游戏破解问题，这个问题是由RevealJS缩放/移动和元素与SVG相关的方式引起的（至少我认为所以）。

这里有一个类似的问题报告，至少它看起来很相关，虽然我一直无法解决我的问题，因为建议的代码不是插件而且我的JS技能最多缺乏 - ＆gt; Mouse position in SVG and RevealJS

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

这是似乎相关的代码部分，在我的情况下，第二个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

。

https://codepen.io/anon/pen/MVLazG

欢迎任何和所有帮助。如果有一种方法可以保持更好的鼠标位置来处理图形，我会感激建议和代码（在没有运气的情况下用不同的方法撞了我几个小时）。

Answer 1

这是通过在包装div上设置转换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; });引起的。您可以在Highcharts github here上阅读更多相关信息。

这有一个解决方法似乎适用于您的示例：

test.index.names
FrozenList(['target', 'h', 'd', 'y', 'obsrv'])

test.index.values
('A', '15', '60', '0', 97),
('B', '15', '60', '0', 98),

直播示例：https://codepen.io/anon/pen/GxzPKq

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

1 个答案: