微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

如何解决如何触发点击画布对象和同时放置在对象顶部的 DOM 元素？

我有一些可以添加到 fabricjs 画布的圆圈。每个圆圈都是一个对象，而在我的 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 工具提示包）触发一个工具提示，它有以下代码（不要介意每个循环，我还应该提到下面的代码在画布函数之外）：

$( "#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');
    }
  });
});

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

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

这有效，工具提示在点击时显示，但在我的画布功能中，我还有一个点击功能，可以在点击时切换特定圆圈的图像。我需要在点击圆圈时同时触发，现在当我点击一个圆圈时，图像会出现，但只有在我第二次点击后，工具提示也会出现，而不是在第一次点击时。

通过第二次点击移除图像也不起作用，直到我点击另一个圆圈，然后再次点击之前点击的圆圈。

奇怪的是，当我删除两个功能（工具提示单击或图像切换单击）中的一个时，它立即起作用，但只有图像切换立即起作用，而工具提示仅在第二次单击后起作用。这是为什么？

整个代码可以在这里看到（点击小圆圈进行测试）：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,id: 'cirkel2',imgleft: 700,imgurl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
      },left: 730,imgleft: 800,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'),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,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',content: function (reference) {
        return reference.querySelector('.tooltipcontent');
      }
    });
  });
  </script>
</html>

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

解决方法

看起来第一次 click 事件没有在第一次 mousedown 之后立即触发。您使用的框架似乎阻止了这种情况，因为执行了一个过程（由侦听器执行）。

（可能与事件传播有关，但此时我仍然没有找到如何防止在 click 之后触发 mouseup 事件。）

我称之为解决方法：要在同一次点击中显示工具提示，即 mousedown 事件后跟 mouseup 事件，您可以设置 mouseup trigger 属性的值，显示工具提示：

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

如果 mouseup 发生在圈子上，则会触发 mousedown 事件。

工作片段。

<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,id: 'cirkel2',imgleft: 700,imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
      },left: 730,imgleft: 800,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,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,allowHTML: true,content: function (reference) {
        return reference.querySelector('.tooltipcontent');
      }
    });
  });
  </script>
</html>

,

它不起作用的原因是您只有 1 个 DIV 热点并且您在鼠标按下时移动该热点并期望它随后触发 onclick 事件，但该事件不起作用。它在第二次点击时起作用的原因是它现在的热点。

解决方案是拥有与热点相同数量的 DIV。这允许您拥有独特的弹出消息。目前，它为每个热点显示相同的消息。

tippy 属性有一个 onShow(instance) 和 onHide(instance)，允许您在点击这些热点时执行额外的功能。在您的情况下，您想要加载与所选热点相关的图像。这样就无需设置两个事件。

切换图片也有问题。我解决了这个问题，但我不能 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,{
     backgroundImageOpacity: 0.5,backgroundImageStretch: false
 });


 const hotspots = [
  {
    top: 140,imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
  },{
    top: 240,imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
  },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'),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',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,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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot