在 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)";
}

Answer 2

这是一个不太优雅的例子 - 蛮力 - FIDDLE。

它在悬停时移动。

CSS

.holder {
    width: 450px;
    height: 442px;
    border:1px solid black;
    background-image: url(http://torreybraman.com/dev/circlechart.jpg);
    background-size: 550 550;
    background-repeat: none;
    position: relative;
    transition: all 5s;
}
.holder:hover {
    transform: rotate(360deg);
}
#seca5 {
    position: absolute;
    top: 150px;
    left: 5px;
    transform: rotate(-70deg);
}
#secc5 {
    position: absolute;
    top: 14px;
    left: 190px;
    transform: rotate(0deg);
}
#sece5 {
    position: absolute;
    top: 150px;
    left: 370px;
    transform: rotate(70deg);
}
#sech5 {
    position: absolute;
    top: 410px;
    left: 200px;
    transform: rotate(180deg);
}