planet-simulator/newLineTest.html at master · byuitechops/planet-simulator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<body>
    <svg>
      <rect class="shape" height="150px" width="150px" y="50px"></rect>
      <text id="rectWrap" class="wrap" y="50px" font-size="12">
        Here is a long text string that SVG should wrap by default, but it does not.
      </text>
    </svg>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.8/d3plus.min.js"></script>
    <script>
//        Snap.plugin(function (Snap, Element, Paper, glob) {
//         Paper.prototype.multitext = function (x, y, txt, max_width, attributes) {
//
//            var svg = Snap();
//            var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
//            var temp = svg.text(0, 0, abc);
//            temp.attr(attributes);
//            var letter_width = temp.getBBox().width / abc.length;
//            svg.remove();
//
//            var words = txt.split(" ");
//            var width_so_far = 0, current_line=0, lines=[''];
//            for (var i = 0; i < words.length; i++) {
//
//               var l = words[i].length;
//               if (width_so_far + (l * letter_width) > max_width) {
//                  lines.push('');
//                  current_line++;
//                  width_so_far = 0;
//               }
//               width_so_far += l * letter_width;
//               lines[current_line] += words[i] + " ";
//            }
//
//            var t = this.text(x,y,lines).attr(attributes);
//            t.selectAll("tspan:nth-child(n+2)").attr({
//               dy: "1.2em",
//               x: x
//            });
//            return t;
//         };
//      });
//    </script>
//    <script>
//        function multiline(text,maxWidth,maxLines){
////            <tspan x="0" dy="1.2em">Hello my name is ben</tspan>
//            var words = text.split(" ");
////            var svg = Snap();
////            var meep = Snap().text(0,0,text).getBBox().width / text.length
////            svg.remove()
////            console.log(meep)
//            var width_so_far = 0, current_line=0, current_paragraph=0, paragraphs=[['']];
//            for (var i = 0; i < words.length; i++) {
//                var wordLength = words[i].length;
//                if (width_so_far + wordLength > maxWidth) {
//                    if(current_line == maxLines - 1){
////                        paragraphs[current_paragraph] = "<tspan x='0' dy='1.2em'>" + paragraphs[current_paragraph].join("</tspan><tspan x='0' dy='1.2em'>") + "</tspan>"
//                        paragraphs.push(['']);
//                        current_paragraph++;
//                        current_line = 0;
//                        width_so_far = 0;
//                    } else {
//                        paragraphs[current_paragraph].push('');
//                        current_line++;
//                        width_so_far = 0;
//                    }
//                }
//                width_so_far += wordLength;
//                paragraphs[current_paragraph][current_line] += words[i] + " ";
//            }
//            paragraphs[current_paragraph] = "<tspan x='0' dy='1.2em'>" + paragraphs[current_paragraph].join("</tspan><tspan x='0' dy='1.2em'>") + "</tspan>"
//            return paragraphs;
//        }
//        var paragraphs = multiline("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et lacus venenatis, sodales mi ac, pharetra nibh. Phasellus congue nisi at mi lacinia finibus. Curabitur lectus elit, tincidunt quis gravida in, porta nec nulla. Nam pretium vulputate tincidunt. In sit amet sapien et metus congue mollis in quis quam. Vestibulum egestas non metus vitae venenatis. Curabitur iaculis nunc nulla, vitae interdum ante pellentesque in. In hac habitasse platea dictumst. Sed id volutpat lorem, nec venenatis nisi. Nulla ac aliquet nulla. Suspendisse id imperdiet enim, sit amet posuere felis. Maecenas volutpat augue quis felis imperdiet, vel porttitor ex laoreet. Nunc egestas mollis libero quis pulvinar. Etiam quis ex lacus.",70,3)
//        var svg = document.getElementsByTagName('svg')[0]
//        var line = document.createElement("http://www.w3.org/2000/svg", 'text')
//        line.setAttribute("x","0")
//        line.setAttribute("dy","1.2em")
//        svg.appendChild(line)
    </script>
    <script>
    </script>
</body>