响应式热图

Question

问题

我遇到了一个小问题，我编写了一些代码，其中我已经自动化了一个脚本来跟踪用户与 UI 的交互，包括mousemove&click事件。如果我不必担心让它响应，那么我可能会称之为一天并交付我已经完成的工作，但是我的大脑正在寻找一些巫术知识，我正在努力使其超级响应. 这只是我正在做的事情的一个简单示例，它不是天才，如果有的话，主要是heatmap.js正在做繁重的工作。目前我只是想看看我是否可以将其作为概念证明而不是其他任何东西......

编码

所以目前，我正在跟踪event.pageX&event.pageY值以准确存储事件发生的位置，我也在存储window.innerWidth&window.innerHeight值以尝试和计算出一些允许我根据大小偏移位置的函数其他设备。

例如，如果您查看上面的示例图像，这对于静态页面来说是完美的，但是如果我要说使页面更窄一点，您可以在这里看到它与上面的图像不一致：

无论如何，不​​用多说，下面是一些示例代码：

// A lot of other code...

var setupHeatMaps = function (pages, heatMaps) {
  pages.forEach(function (page) {
    page.addEventListener("click", function (event) {
      heatMaps.push({ x: event.pageX, y: event.pageY, value: 10000 });
      onStateChange();  
    });

    // Don't collect ALL mouse movements, that'd be crazy, so collect 
    // every 1/10 mouse movements.
    var counter = 0;

    page.addEventListener("mousemove", function (event) {
      if (counter === 10) {
        heatMaps.push({ x: event.pageX, y: event.pageY, value: 20 });
        onStateChange();
        counter = 0;
      } else {
        counter ++;
      }
    });
  });
};

// A lot of other code... 

// Curried function so that it can be passed around without exposing the state...
var renderHeatMaps = function (heatMaps) {
  return function () {
    var max = heatMaps.length;
    var points = heatMaps;

    var parent = getParentElement();
    var styleObj = window.getComputedStyle(parent);
    var div = document.createElement("div");
    var body = document.querySelector("body");
    var background = document.createElement("div");

    // This element needs to sit in front of the 
    // background element, hence the higher z-index value.
    div.style.position = "absolute";
    div.style.zIndex = 9;
    div.style.left = "0px";
    div.style.top = "-80px";
    div.style.width = "100vw";

    // Even though this element will sit behind the element
    // that's created above, we will still want this element to 
    // sit in front of 99% of the content that's on the page.
    background.style.position = "fixed";
    background.style.top = "0px";
    background.style.left = "0px";
    background.style.height = "100vh";
    background.style.width = "100vw";
    background.style.zIndex = 5;
    background.style.backgroundColor = "rgba(255, 255, 255, 0.35)";
    background.setAttribute("id", "quote-customer-heat-map-background");

    var heightInPx = styleObj.getPropertyValue("height");
    var rawHeight = parseInt(heightInPx.replace("px", ""));
    var newHeight = parseInt((rawHeight + 80));

    div.style.height = newHeight + "px";
    div.setAttribute("id", "quote-customer-heat-map-foreground");
    body.style.paddingBottom = "0px";
    body.appendChild(background);
    body.appendChild(div);

    var heatMap = h337.create({
      container: div,
      radius: 45
    });
    
    heatMap.setData({ max: max, data: points });
  };
};

// A lot of other code...

由于pages您可以看到使用的元素setupHeatMaps在宽度上发生变化，因此查看此数据的偏移非常严重。老实说，昨天我花了很多时间思考这个问题，但我仍然没有想到任何看起来合理的东西。

或者

我想知道我是否应该以某种方式只是保存页面为图像，与热图夸大了，这样我就不会真的有关于热图响应担心。但是我需要弄清楚其他一些事情......例如，对这些数据进行版本控制，所以如果用户在他们的手机上查看页面，它会将该数据与从前一个会话收集的数据分开存储在笔记本电脑或桌面设备上。

结论

老实说，我不完全确定最好的行动方案是什么，你们之前有没有遇到过这样的事情？你们有没有想过什么天才可以解决这样的问题？

PS我会分享更多的代码，但是有一个巨大的是进入这个代码量整体解决方案，所以我有点不能分享这一切，我敢肯定，在＃1的人会恨我的！- 您也可以说我是作为 POC 来做这件事的，因为通常我只是将background元素和div元素的渲染卸载到底层框架，而不是像这样以编程方式进行，请记住，这只是一个概念验证。

Answer 1

虽然这个解决方案可能不是有史以来最优雅的解决方案，但它至少可以工作，如果有人有任何想法或任何更好的东西，请务必参与！

我的解决方案解释

所以我在想，我可以通过 渲染它iframe，当然这不是有史以来最漂亮的解决方案，但至少这意味着不涉及复杂的定位逻辑，与我见过的其他一些解决方案相比，它在计算复杂性方面相对轻量级看了它&它适用于各种屏幕尺寸，它基本上消除了响应的需要......有点......

当然，这意味着您将拥有向左、向右和中心的滚动条，但它很简单，开门见山，这意味着我可以在很短的时间内生成 MVP，实际上，我希望您的普通初级开发人员可以更容易理解发生了什么？你们有什么感想？

我也试图从用户的角度来考虑它，实际上在这种应用程序中，我更喜欢真实的、原始的准确性，而不是看起来如此漂亮的东西，这让我想成为一名设计师。我什至对这个主题做了一些功课，因为我本质上一直在尝试构建一些会话重放软件，我必须说，这是一个非常有趣的项目/功能！

通过一些样式，我已经能够完成这样的事情...显然这不是网站/应用程序的直接片段，但这是我老板创建的一些营销材料，但是“笔记本电脑”中的内容'，这是Web 应用程序的实际屏幕截图/片段！- 总而言之，我认为看起来还可以吗？- 你可以看到溢出发生的位置，屏幕的右侧有点被切断，但因为 UI 中的其他所有内容都表现得好像它们fixed在那里有一个位置，我个人认为它似乎工作得非常好。

编辑

我只想感谢所有花费时间的人，无论是添加评论还是提供答案，很高兴看到开发社区如此有帮助！谢谢大家！

博客文章

所以我在这里写了更多关于这个主题的文章：

• 领英帖子
• 博客文章