javascript - 在 png 图像上添加 div(或其他东西)

Question

因此，我已经对此进行了一些搜索，但是，我什至不太确定我在寻找什么。如果这个问题已经得到解决，请原谅我。

我想拍照，例如: http://torreybraman.com/dev/circlechart.jpg

并在单元格为空的地方制作一个 png。然后，我想通过某种 div 或类似的东西向这些单元格添加文本。

此外，这些“单元格”中的数据会经常更改，但整体布局始终相同。

我知道如何从数据源填充 div，但我不知道如何填充和旋转单元格内的数据以环绕圆圈。

有没有一种类似于 photoshop 添加文本框的方法(使用一些所见即所得的编辑器)？

我只是不知道从哪里开始。我需要最简单的方法来做到这一点，而无需广泛的 html/css/javascript 知识。

谢谢!

Answer 1

这是动态的技巧。如果您对此有任何疑问，请提出。

JSBin demo .

HTML:

<div id="wrapper">
    <img src="/dev/circlehart.jpg" />
</div>

CSS:

#wrapper {
    position: relative;
    width: 450px;
}
.word {
    position: absolute;
    top: 50%;
    left: 50%;
}

Javascript:

var words = ["Lorem", "ipsum", "dolor", "sit", "amet,", "consectetuer",
        "adipiscing", "elit,", "sed", "diam", "nonummy", "nibh", "euismod",
        "tincidunt", "ut", "laoreet", "dolore", "magna", "aliquam", "erat",
        "volutpat.", "Ut", "wisi", "enim", "ad", "minim", "veniam,", "quis",
        "nostrud", "exerci", "tation", "ullamcorper", "suscipit", "lobortis",
        "nisl", "ut", "aliquip", "ex", "ea", "commodo", "consequat."],
    wrapper = document.getElementById("wrapper"),
    xformProp = ["transform", "webkitTransform", "msTransform", "mozTransform"]
        .filter(function(p) {return p in this;}, wrapper.style)[0],
    i = 0, box;

for (; i < words.length; i++) {
    box = document.createElement("div");
    box.className = "word";
    box.appendChild(document.createTextNode(words[i]));
    wrapper.appendChild(box);
    box.style[xformProp] = "translate(-" + (box.offsetWidth/2) + "px, -"
            + (box.offsetHeight/2) + "px) rotate(" + (i % 10) * 36 + "deg)"
            + " translateY(" + (22 - (5 - Math.floor(i / 10)) * 45) + "px)";
}