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 中为变化添加和显示多个自定义字段

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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