javascript - 如何触发点击 Canvas 对象和同时放置在对象顶部的 DOM 元素？-6ren

javascript - 如何触发点击 Canvas 对象和同时放置在对象顶部的 DOM 元素？

转载作者：行者123 更新时间：2023-12-04 08:03:27

我有一些可以添加到 fabricjs Canvas 的圆圈。每个圆圈都是一个对象，而在我的 javascript 代码之外，我有一个 DOM 元素，如下所示:

<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
  <div class="tooltipcontent darktext tooltippadding" style="position:relative;">
    Testtest
  </div>
</span>

这个元素用 Tippjs(一个 js 工具提示包)触发一个工具提示，它有以下代码(不要介意每个循环，我还应该提到下面的代码在 Canvas 函数之外):

$( "#cirkel1" ).each(function( i ) {
  tippy(this, {
    theme: 'blue',
    trigger: 'click',
    allowHTML: true,
    placement: 'right',
    animation: 'scale-subtle',
    interactive: true,
    content: function (reference) {
      return reference.querySelector('.tooltipcontent');
    }
  });
});

在我为 Canvas 声明所有内容的函数中，我使用以下代码将 DOM 元素放置在 Canvas 对象的顶部:

fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
  return {
    left: object.left + this._offset.left,
    top: object.top + this._offset.top
  };
}

var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;

function positionBtn(obj) {
  var absCoords = canvas.getAbsoluteCoords(obj);
  cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
  cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}

这是有效的，并且工具提示在单击时显示，但在我的 Canvas 功能中，我还有一个单击功能，可以在单击时切换特定圆圈的图像。我需要在点击圆圈时同时触发，现在当我点击一个圆圈时，图像会出现，但只有在我第二次点击后，工具提示也会出现，而不是在第一次点击时出现。
通过第二次单击删除图像也不起作用，直到我单击另一个圆圈，然后再单击先前单击的圆圈。
奇怪的是，当我删除两个功能之一(工具提示单击或图像切换单击)时，它会立即起作用，但只有图像切换立即起作用，而工具提示仅在第二次单击后起作用。这是为什么？
整个代码可以在这里看到(点击小圆圈进行测试): https://codepen.io/twan2020/pen/jOVaWMm

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <base href="//printzelf.nl/new/">
    <title>Image test</title>
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  </head>
  <body>
    <style media="screen">
    .tippy-box {
      width: 100%!important;
      text-align: center;
      background-color: #fff!important;
      color: #fff!important;
      box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
    }
    .darktext {
      color: #383838;
      font-family: Panton;
      font-size: 15px;
    }
    .tooltippadding {
      padding: 15px;
    }
    body .tippy-arrow {
      color: #fff!important;
    }
    </style>
    <img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
    <div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
      <canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
    </div>
  </body>
  <span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
    <div class="tooltipcontent darktext tooltippadding" style="position:relative;">
      Testtest
    </div>
  </span>
  <!-- Popper JS -->
  <script src="assets/js/popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
  <script type="text/javascript" src="assets/js/fabric.js"></script>
  <script type="text/javascript">
  (function() {
    var myImg = document.querySelector("#background");
     var realWidth = myImg.naturalWidth;
     var realHeight = myImg.naturalHeight;
     var source = document.getElementById('background').src;
     var canvas = new fabric.Canvas('c');
     canvas.hoverCursor = 'pointer';
     canvas.selection = false;
     canvas.setDimensions({ width: realWidth, height: realHeight });
     var img = new Image();
     // use a load callback to add image to canvas.
     img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
     canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
         backgroundImageOpacity: 0.5,
         backgroundImageStretch: false
     });


     const hotspots = [
      {
        top: 140,
        left: 230,
        radius: 10,
        fill: '#009fe3',
        id: 'cirkel1',
        hoverCursor: 'pointer',
        selectable: false,
        imgtop: 200,
        imgleft: 300,
        imgheight: 200,
        imgwidth: 200,
        tooltipid: 'cirkel1',
        imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
      },
      {
        top: 240,
        left: 530,
        radius: 10,
        fill: '#009fe3',
        id: 'cirkel2',
        hoverCursor: 'pointer',
        selectable: false,
        imgtop: 200,
        imgleft: 700,
        imgheight: 200,
        imgwidth: 200,
        imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
      },
      {
        top: 240,
        left: 730,
        radius: 10,
        fill: '#009fe3',
        id: 'cirkel2',
        hoverCursor: 'pointer',
        selectable: false,
        imgtop: 200,
        imgleft: 800,
        imgheight: 200,
        imgwidth: 200,
        imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
      }
    ];

    const loadedImages = [];

    for (let [idx, props] of hotspots.entries()) {
      let c = new fabric.Circle(props);
      c.class = 'hotspot';
      c.name = 'hotspot-' + idx;
      canvas.add(c);
    }

    fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
      return {
        left: object.left + this._offset.left,
        top: object.top + this._offset.top
      };
    }

    var cirkel1tooltip = document.getElementById('cirkel1'),
    btnWidth = 40,
    btnHeight = 40;

    function positionBtn(obj) {
      var absCoords = canvas.getAbsoluteCoords(obj);
      cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
      cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
    }

    for (const ho of canvas.getObjects()) {
      // check for 'hotspot' class
      if (ho.class && ho.class === 'hotspot') {
        ho.on('mousedown', () => {
          // check if image was previously loaded
          if (loadedImages.indexOf(ho.name) < 0) {
            // image is not in the array
            // so it needs to be loaded
            // prepare the image properties
            let imgProps = {
              width: ho.imgwidth,
              height: ho.imgheight,
              left: ho.imgleft,
              top: ho.imgtop,
              scaleX: .25,
              scaleY: .25,
              selectable: false,
              id: 'img-' + ho.name,
              hoverCursor: "default"
            };
            var printzelfImg = new Image();
            printzelfImg.onload = function (img) {
              var printzelf = new fabric.Image(printzelfImg, imgProps);
              canvas.add(printzelf);
            };
            printzelfImg.src = ho.imgUrl;
            // update the `loadedImages` array
            loadedImages.push(ho.name);
          } else {
            // image was previously loaded
            for (const o of canvas.getObjects()) {
              // find the correct image on the canvas
              if (o.id && o.id === 'img-' + ho.name) {
                // toggle the visible property
                o.visible = !o.visible;
                break;
              }
            }
          }
          positionBtn(ho);
        });
      }
    }
  })();
  $( "#cirkel1" ).each(function( i ) {
    tippy(this, {
      theme: 'blue',
      trigger: 'click',
      allowHTML: true,
      placement: 'right',
      animation: 'scale-subtle',
      interactive: true,
      content: function (reference) {
        return reference.querySelector('.tooltipcontent');
      }
    });
  });
  </script>
</html>

另外，是否可以将不同的工具提示附加到每个点/圆圈？

最佳答案

它不起作用的原因是您只有 1 个 DIV 热点并且您在鼠标按下时移动该热点并期望它随后触发 onclick 事件，但该事件不起作用。它在第二次点击时起作用的原因是它现在的热点。
解决方案是拥有与热点相同数量的 DIV。这允许您拥有独特的弹出消息。目前，它为每个热点显示相同的消息。
有一个 onShow(instance) 和 onHide(instance) 用于tippy 属性，它允许您在单击这些热点时执行额外的功能。在您的情况下，您想要加载与所选热点相关的图像。这消除了设置两个事件。
切换图像也有问题。我解决了这个问题，但我不能 100% 确定它是如何工作的。
此外，您在标记之外有 HTML 标记，并且 HTML 内容不应该存在于正文之外。
我尽可能地保留了你的大部分原始代码。

<html lang="en" dir="ltr">
  <head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <style media="screen">
.tippy-box {
  width: 100%!important;
  text-align: center;
  background-color: #fff!important;
  color: #fff!important;
  box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
  color: #383838;
  font-family: Panton;
  font-size: 15px;
}
.tooltippadding {
  padding: 15px;
}
body .tippy-arrow {
  color: #fff!important;
}
</style>
  </head>
  <body>

<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
  <canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>

  <span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent1 tooltipcontent darktext tooltippadding" style="position:relative;">
  Message 1
</div>
  </span>
  
  <span id="cirkel2" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent2 tooltipcontent darktext tooltippadding" style="position:relative;">
  Message 2
</div>
  </span>
  
  <span id="cirkel3" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent3 tooltipcontent darktext tooltippadding" style="position:relative;">
  Message 3
</div>
  </span>
  
  
  <!-- Popper JS -->
  <script src="assets/js/popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
  <script type="text/javascript" src="assets/js/fabric.js"></script>
  <script type="text/javascript">
  (function() {
var myImg = document.querySelector("#background");
 var realWidth = myImg.naturalWidth;
 var realHeight = myImg.naturalHeight;
 var source = document.getElementById('background').src;
 var canvas = new fabric.Canvas('c');
 canvas.hoverCursor = 'pointer';
 canvas.selection = false;
 canvas.setDimensions({ width: realWidth, height: realHeight });
 var img = new Image();
 // use a load callback to add image to canvas.
 img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
 canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
     backgroundImageOpacity: 0.5,
     backgroundImageStretch: false
 });


 const hotspots = [
  {
    top: 140,
    left: 230,
    radius: 10,
    fill: '#009fe3',
    id: 'cirkel1',
    hoverCursor: 'pointer',
    selectable: false,
    imgtop: 200,
    imgleft: 300,
    imgheight: 200,
    imgwidth: 200,
    tooltipid: 'cirkel1',
    imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
  },
  {
    top: 240,
    left: 530,
    radius: 10,
    fill: '#009fe3',
    id: 'cirkel2',
    hoverCursor: 'pointer',
    selectable: false,
    imgtop: 200,
    imgleft: 700,
    imgheight: 200,
    imgwidth: 200,
    imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
  },
  {
    top: 240,
    left: 730,
    radius: 10,
    fill: '#009fe3',
    id: 'cirkel2',
    hoverCursor: 'pointer',
    selectable: false,
    imgtop: 200,
    imgleft: 800,
    imgheight: 200,
    imgwidth: 200,
    imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
  }
];

const loadedImages = [];

for (let [idx, props] of hotspots.entries()) {
  let c = new fabric.Circle(props);
  c.class = 'hotspot';
  c.name = 'hotspot-' + idx;
  canvas.add(c);
}

fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
  return {
    left: object.left + this._offset.left,
    top: object.top + this._offset.top
  };
}

var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;

function positionBtn(obj, index) {
  var absCoords = canvas.getAbsoluteCoords(obj);
  var element = document.getElementById('cirkel'+index);
  element.style.left = (absCoords.left - btnWidth / 10) + 'px';
  element.style.top = (absCoords.top - btnHeight / 10) + 'px';
}

canvas.getObjects().forEach(function(ho, index) {
  positionBtn(ho, index + 1); 
});
  

  
  $( ".carttip" ).each(function( i ) {
tippy(this, {
  theme: 'blue',
  trigger: 'click',
  allowHTML: true,
  placement: 'right',
  animation: 'scale-subtle',
  interactive: true,
  onShow(instance) {
     canvas.getObjects().forEach(function(ho, index) {
        if (ho.class && ho.class === 'hotspot') {
           if (instance.id == index + 1) {
           // check if image was previously loaded
              if (loadedImages.indexOf(ho.name) < 0) {
                 // image is not in the array
                 // so it needs to be loaded
                 // prepare the image properties
                 let imgProps = {
                    width: ho.imgwidth,
                    height: ho.imgheight,
                    left: ho.imgleft,
                    top: ho.imgtop,
                    scaleX: .25,
                    scaleY: .25,
                    selectable: false,
                    id: 'img-' + ho.name,
                    hoverCursor: "default",
                    
                 };
                 var printzelfImg = new Image();
                 printzelfImg.onload = function (img) {
                    var printzelf = new fabric.Image(printzelfImg, imgProps);
                    printzelf.trippyHotspotImage = true;
                    canvas.add(printzelf);
                 };
                 printzelfImg.src = ho.imgUrl;
                 // update the `loadedImages` array
                 loadedImages.push(ho.name);
              } else {
                 for (const o of canvas.getObjects()) {
                    if (o.id && o.id === 'img-' + ho.name) {
                       o.visible = true;
                       break;
                    }
                 }
                 canvas.renderAll();
              }
           }
        }
     });
  },
  onHide(instance) {
     for (const o of canvas.getObjects()) {
        if (o.trippyHotspotImage) {
           o.visible = false;
        }
     }
     canvas.renderAll();
  },
  content: function (reference) {
    return reference.querySelector('.tooltipcontent' + (i + 1));
  }
});
  });
})();
  </script>
  </body>

  </html>

关于javascript - 如何触发点击 Canvas 对象和同时放置在对象顶部的 DOM 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66329819/

文章推荐： point-of-sale - 如何修复verifone vx520中的篡改错误

文章推荐： npm - 如何使用 npm 安装字体？

文章推荐： php - 在 WooCommerce 中为变化添加和显示多个自定义字段

dom - 哪些因素促使虚拟 DOM 超越浏览器原生 DOM？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
dom - polymer : Light DOM vs Local DOM
Polymer的light DOM和local DOM有什么区别？来自文档(1): The DOM that an element creates and manages is called its
dom - DOM 突变事件库？
当内容添加到网页时，我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。我想使用 DOM 突变事件，但它们并非在所有浏览器中都可用。是否有为
shadow-dom - 我可以在 Shadow DOM 中获得一个按钮来提交不在 Shadow DOM 中的表单吗？
我刚遇到一个有趣的情况，我有一个提交放置在内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...
javascript - 在当前 dom 之前添加 dom，并保持当前 dom 留在视口(viewport)中
假设有一个滚动列表，当我插入一些新的 DOM 附加到当前 dom 时，它工作正常。上拉但是如果我之前插入一些新的 DOM，新的 DOM 将在视口(viewport)中，而旧的 DOM 将被下推。下拉
dom - Shadow DOM 是否像 React.js 中的 Virtual DOM 一样快？
在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快？最佳答案它们是不同用途的不同事物，因此比较性能没有意义。虚拟 DOM 虚拟 DOM 旨在避免对
dom - 从 DOM 中选择元素
在我的页面内容上，我将多张卡片组织成网格 __________________ | ____ ____ | | | | | | | | | | | |
dom - 在浏览器中调试自定义 DOM 事件
是否可以在浏览器中看到(调试)从 DOM 元素触发的自定义事件？假设我想查看 Bootstrap Collapse 的哪个特定元素触发了 show.bs.collapse event ，我能以某种方
dom - 浏览器会自动插入哪些 DOM 元素？
我正在生成用于客户端的 XPaths 服务器端，我很困惑为什么在 DOM 中找不到表路径(即 td 中的内容)。事实证明，现代浏览器(至少是 Chrome 和 Firefox)插入了 tbody在文
dom - 检索 DOM 文本节点位置
是否可以检索文本节点的几何位置(即从父元素、页面等的顶部/左侧偏移量)？最佳答案不是直接的。 TextNode 没有用于测量视口(viewport)定位的原始 IE 偏移*(和类似的)扩展。仅在
dom - 什么是 DOM 元素？
以下语句中的 DOM 元素的含义是什么？ Statement #1 You can add multiple classes to a single DOM element. Statement #2
dom - 卡住 Dom 操作
有没有办法让 firebug(或任何其他浏览器，或使用任何其他工具)阻止任何 dom 操作的发生？有时布局调试充满悬停事件的屏幕是不可能的，因为元素可能会消失，并且您看不到它们的复合布局。最佳答案
dom - 我需要元素的完整 dom 节点路径
我需要在html文档中搜索 text here 然后输出完整的节点路径(CSS或XPATH) 例如 html > body > div class ="something" > table > tr
dom - 页面加载时间中的 DOM 加载时间代表什么？
这是我的一个页面的典型加载时间如何拆分为:- Domain Lookup 0 0 % Connect 134 .3% Request
dom - .on() 未检测到 dom 更改
我的 .on() 工作时遇到一些问题。我的网站是here . 如果你看看 www.eliteweb-creation.co.uk/dev/js/nav.js，我正在 mouseenter 和 mous
dom - YUI3 DOM 未定义？
我是 Javascript 的新手，负责将我们产品的 UI 从 YUI2 迁移到 YUI3。看起来哪里都没有迁移指南，所以我现在正在浏览互联网帖子和 yui 文档。在我的全局范围内，我临时添加了类似
dom - 如何与实习生一起测试 DOM 敏感性
我想和实习生一起测试一些 DOM 相关的东西，不需要特定的固定装置，只是一般的 DOM 东西，比如我改变了 Element.prototype。这是否需要通过本地 Selenium 服务器(或 sau
dom - 文档对象模型 (DOM) 概念背后的真正思想是什么？
我是 HTML 和 HTML5 的初学者。当我阅读以下内容时 link ，我找到了术语 DOM 和 DOM API。我通读了维基百科，但无法理解其背后的全部思想。谁能给我解释一下: 文档对象模型
dom - DOM 扩展/包装究竟是什么？
我有两个主要问题。 Object 之类的扩展是否算数？什么是 DOM 包装？ http://perfectionkills.com/whats-wrong-with-extending-the-do
dom - 建议用于构建小部件的最小 Dom 操作库
对不起查询,原型(prototype)，雅虎 YUI，道场在考虑小的时候不吸引我。我想要一个模块化的库，代码尽可能小，最多 20Kb [un compressed] 是我所期望的。应该提供 Dom 操

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何触发点击 Canvas 对象和同时放置在对象顶部的 DOM 元素？