Question

我有一个HTML格式的图像，我希望用户用HTML编写输入，然后如果他点击图像，它将创建一个彩色div，它写在input内，这个div的位置是基于用户点击的坐标（不是居中，有点在顶部和左边），现在我可以创建矩形div，但我不知道如何在其中加入文字。

let listaAre = [];
let quantiClic = 0;

document.getElementById('blah').addEventListener('click', event => {
  document.getElementById('squareContaine').innerHTML =
    document.getElementById('squareContaine').innerHTML +
    '<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;"></div>';
  document.getElementById('squar' + quantiClic).style.top = (event.pageY - Number(document.getElementById('dimensione').value) / 2) + 'px';
  document.getElementById('squar' + quantiClic).style.left = (event.pageX - Number(document.getElementById('dimensione').value) / 2) + 'px';
  document.getElementById('squar' + quantiClic).style.width = Number(document.getElementById('dimensione').value)/4 + 'px';
  document.getElementById('squar' + quantiClic).style.height = Number(document.getElementById('dimensione').value)/10 + 'px';
  document.getElementById('squar' + quantiClic).style.background =(document.getElementById('colorebordo').value);

  listaAre.push({
    x: (event.offsetX - Number(document.getElementById('dimensione').value) / 2),
    y: (event.offsetY - Number(document.getElementById('dimensione').value) / 2),
    width: Number(document.getElementById('dimensione').value),
    height: Number(document.getElementById('dimensione').value),
    background:(document.getElementById('colorebordo').value)
  });
  document.getElementById('squar' + quantiClic).addEventListener('click',       function (e) {
    this.style.display = 'none';
  });
  quantiClic = quantiClic + 1;
});

article, aside, figure, footer, header,
hgroup, menu, nav, section { display: block; }
.fasciaalta {
  position: fixed;
  background-color: white;
}

<div class="fasciaalta">
  <input type="color" id="colorebordo">
  <input type="text" id="nome">
  <input type="number" id="dimensione" value="200">
  <hr size="2px" color="blue" width="100">
</div>

<img id="blah" src="montagna.jpg" alt="your image" />
<div id="squareContaine"></div>

<div id="previewImage"></div>

Answer 1

您可以通过访问事件对象的import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import com.google.android.gms.ads.AdRequest; import com.google.android.gms.ads.AdView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MobileAds.initialize(getApplicationContext(), "ca-app-pub-96568545160124~214045445"); AdView mAdView = (AdView) findViewById(R.id.adView); AdRequest adRequest = new AdRequest.Builder().build(); mAdView.loadAd(adRequest); }和clientX属性来获取事件单击时鼠标的坐标。然后你只需告诉新元素将它们用作顶部和左侧样式来定位它。

段

＆＃13;

clientY

＆＃13;

document.getElementById('blah').addEventListener('click', function(event) {
  var div = document.createElement("DIV"); // Create a <div> element
  var t = document.createTextNode("HELLO");// Create a text node
  div.appendChild(t);                      // Append the text to <div>

  document.body.appendChild(div);          //Add <div> to document
  div.style.position = 'absolute';         //Make its position absolute

  //Set the coordinates
  div.style.left = event.clientX + "px";
  div.style.top  = event.clientY + "px";
})

＆＃13;

附加

如果不是创建新的div，而是想使用一个简单地使用<div> <img id="blah" src="http://img1.wikia.nocookie.net/__cb6/nyancat/images/5/50/Wiki-background" alt="your image" /> </div>访问该元素，而是更改其属性。我已经让这个例子变得尽可能简单，这样它不仅可以适用于您的情况，还可以适用于其他任何人试图解决他们的问题。

Answer 2

如果您需要文本值，那么您只需要更改点击功能的前2个语句。 - Check this Codepen

1）点击，获取文本框的值，如此

var val = document.getElementById('nome').value;

2）接下来将此val插入您的innerHTML声明

document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;">'+ val + '</div>';

滚动上述语句的最后，看到val已插入。

如果盒子的背景为黑色，也不要忘记更改文本的颜色。

  document.getElementById('blah').addEventListener('click', event => {
    var val = document.getElementById('nome').value; //added
    //below statement changed
    document.getElementById('squareContaine').innerHTML =
    document.getElementById('squareContaine').innerHTML +
    '<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;">'+ val + '</div>';

    .. rest of the code remain the same ..
  });

创建一个带有文字的div，我点击图片

2 个答案:

段

附加