14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<div id="poeDrawArea" style="max-width: 100%; height: 50em; border: solid red 1px; position: relative;">
</div>
<div style="display: none">
<div className="poe">
<div key={i} class="poehex">
<div id="bodypartLocator"
style="position: absolute; border: solid orange 2px; width: 20em; height: 20em;">
<svg id="bodypart"
style="display: block; position: absolute; width: 100%; height: 100%; border: solid green 1px; transition: transform 4s ease-in-out;"
|
|
>
>
>
|
>
>
>
>
>
>
>
|
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<div id="poeDrawArea" style="max-width: 100%; height: 50em; border: solid red 1px; position: relative;">
</div>
<div style="display: none">
<div className="poe">
<div key={i} class="poehex">
<div id="bodypartLocator"
style="position: absolute; border: solid
orange 2px; width: 20em; height: 20em; left: 0; top: 0;
transition: left 1s ease-in-out, top 1s ease-in-out;">
<svg id="bodypart"
style="display: block; opacity: 0.5;
position: absolute; width: 100%; height: 100%;
border: solid green 1px;
transition: transform 4s ease-in-out;
fill: black;"
xmlns="http://www.w3.org/2000/svg"
viewBox="-2 -2 4 4"
>
<polygon className="hexpoly" id="hex" points="-2,0 -1,1.732 1,1.732 2,0 1,-1.732 -1,-1.732" />
</svg>
</div> <!-- bodypartLocator -->
</div>
</div>
</div>
</body>
<script type="text/javascript">
PoeModel.setProperty("bodypartNum", "3");
PoeViewController.setBodypartProto(elementByID("bodypartLocator"),
"bodypart");
PoeViewController.attach(elementByID("poeDrawArea"));
setTimeout(() => {
PoeViewController.setPosition("20em", "10em");
}, 3000);
</script>
</html>
|