Question

所以，我已经做了一些搜索，但是，我甚至不确定我在寻找什么。如果这个问题已经得到解决，请原谅我。

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

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

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

我知道如何从数据源中填充div，但我没有edea如何填充和旋转单元格中的数据以绕过圆圈。

有没有像photoshop那样添加文本框（带有一些WYSIWYG编辑器）？

我只是不知道从哪里开始。如果没有广泛的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);
}

在png图像上添加div（或其他东西）

2 个答案: