javascript - 画布仅显示在滑块的第一个图像上或连接到每个图像的底部

Question

所以我试图做到这一点，以便每当单击图像时，它都会在画布上绘制一个圆圈。图像和画布应该是重叠的。cnvs.style.position = 'absolute';但是，当我在第一张图像上激活所有画布时，我遇到了一个问题 。因此，如果我要单击其他图像，则会在第一个图像上绘制圆圈，但不会在单击的图像上绘制。但是，如果我注释掉cnvs.style.position = 'absolute';画布将连接到图像的底部而不是被覆盖。我需要让它覆盖每个画布和图像，以便在单击一个图像时会出现一个圆圈。我在想我有一个css问题，但我不知道如何解决它。

document.body.onload = addElement;

      function addElement() {
            
            // image path
            const imagePath = ['https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F8%2F84%2FAssociation_of_Gay_and_Lesbian_Psychiatrists_logo.jpg&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2F2016%2F07%2F14%2Fpluto-one-year%2Fassets%2Ficon-pluto.png&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.oFxADNN67dYP-ke5xg7HbQHaHG%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glassdoor.com%2Fsqll%2F1065746%2Felevation-church-squarelogo-1453223965790.png&f=1&nofb=1'];
            
            for (const image of imagePath) {
                  // get the item id of an image
                  var slice = image.slice(26, 34);
                  var id = image;
                  var hdnName = document.getElementById("sendServ"); 

                  const img = document.createElement("img");
                  img.src = image;
                  img.classList.add("new");
                  img.id = slice;

                  const cnvs = document.createElement("canvas");
                  cnvs.classList.add("suiteiCanvas");
                 
                 // cnvs.style.position = 'absolute';
                  cnvs.style.left = img.offsetLeft + "px";
                  cnvs.style.top = img.offsetTop + "px";
                  cnvs.style.display = 'none';

                  var ctx = cnvs.getContext("2d");
                  ctx.clearRect(0, 0, cnvs.width, cnvs.height);
                  ctx.beginPath();
                  ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
                  ctx.lineWidth = 15;
                  ctx.strokeStyle = '#FF0000';
                  ctx.stroke();

                  var div = document.createElement("div");
                  var div1 = document.createElement("div");
                  div.id = id;
                  div1.id = '1';
                  div.classList.add("image");


                  img.onclick = function draw() {
                        cnvs.style.display = '';
                        hdnName.value = img.id;
                  };

                  cnvs.onclick = function remove() {
                        cnvs.style.display = 'none';
                        hdnName.value = null;
                  };

                  document.getElementById('suitei-slider').appendChild(div);
               
                  document.getElementById(image).appendChild(img);
                  document.getElementById(image).appendChild(cnvs);
               
               
            }
      }
      
// slick slider      
   

canvas.suiteiCanvas{
  height: auto; 
  width: auto;
  
max-height: 200px;
max-width: 150px;

margin-left: 100px; 
margin-right: 100px;
border:3px solid rgb(20, 11, 11);
}

#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}

img.new {
 
 
  height: auto; 
  width: auto;

max-height: 200px;
max-width: 150px;

margin-left: 100px; 
margin-right: 100px;
border:3px solid rgb(20, 11, 11);
  
}

<div class="multiple-items" id="suitei-slider"></div>
<input type="hidden" id="sendServ">

标签： javascripthtmlcsscanvas

Answer 1

您需要将画布设置在position: absolute容器中，position: relative以便您的画布仍包含在容器中。由于容器不在 中position: absolute，它们不会叠加，但它们的内容会叠加，因此您的画布将与图像叠加。

然后，您必须将画布居中（我怀疑），所以我设置了画布尺寸（现在它是硬编码的）并固定x了圆圈的位置。

我希望这是你要找的。

document.body.onload = addElement;

      function addElement() {
            
            // image path
            const imagePath = ['https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F8%2F84%2FAssociation_of_Gay_and_Lesbian_Psychiatrists_logo.jpg&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2F2016%2F07%2F14%2Fpluto-one-year%2Fassets%2Ficon-pluto.png&f=1&nofb=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.oFxADNN67dYP-ke5xg7HbQHaHG%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glassdoor.com%2Fsqll%2F1065746%2Felevation-church-squarelogo-1453223965790.png&f=1&nofb=1'];
            
            for (const image of imagePath) {
                  // get the item id of an image
                  var slice = image.slice(26, 34);
                  var id = image;
                  var hdnName = document.getElementById("sendServ"); 

                  const img = document.createElement("img");
                  img.src = image;
                  img.classList.add("new");
                  img.id = slice;

                  const cnvs = document.createElement("canvas");
                  cnvs.classList.add("suiteiCanvas");
                 
                 // cnvs.style.position = 'absolute';
                  cnvs.style.left = img.offsetLeft + "px";
                  cnvs.style.top = img.offsetTop + "px";
                  cnvs.style.display = 'none';
                  cnvs.width = 150;
                  cnvs.height = 150;

                  var ctx = cnvs.getContext("2d");
                  ctx.clearRect(0, 0, cnvs.width, cnvs.height);
                  ctx.beginPath();
                  ctx.arc(75, 75, 50, 0, 2 * Math.PI, false);
                  ctx.lineWidth = 15;
                  ctx.strokeStyle = '#FF0000';
                  ctx.stroke();

                  var div = document.createElement("div");
                  var div1 = document.createElement("div");
                  div.id = id;
                  div1.id = '1';
                  div.classList.add("image");


                  img.onclick = function draw() {
                        cnvs.style.display = '';
                        hdnName.value = img.id;
                  };

                  cnvs.onclick = function remove() {
                        cnvs.style.display = 'none';
                        hdnName.value = null;
                  };

                  document.getElementById('suitei-slider').appendChild(div);
               
                  document.getElementById(image).appendChild(img);
                  document.getElementById(image).appendChild(cnvs);
               
               
            }
      }
      
// slick slider

.image {
  position: relative; /* add this */
  user-select: none; /* and this maybe */
}

canvas.suiteiCanvas{
  height: auto; 
  width: auto;
  height: 150px;
  max-width: 150px;
  /*margin-left: 100px; 
  margin-right: 100px;*/
  border:3px solid rgb(20, 11, 11);
  position: absolute; /* add this */
}

#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}

img.new { 
  height: auto; 
  width: auto;
  max-height: 200px;
  max-width: 150px;
  /*margin-left: 100px; 
  margin-right: 100px;*/
  border:3px solid rgb(20, 11, 11);
  
}

<div class="multiple-items" id="suitei-slider"></div>
<input type="hidden" id="sendServ">