zhouxy108/wisemapping-open-source
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Partially supported multilines.

Browse Source
This commit is contained in:
Paulo Veiga
2011-09-02 02:31:03 -03:00
parent e437e0e329
commit d43eb930d9
32 changed files with 804 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
web2d/src/test/javascript/render/font.html Normal file
View File

@@ -0,0 +1,159 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function multiline(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('200px', '240px');
overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0);
[6,8,10,15].forEach(function(size, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($(elemId));
}
function alignments(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center','left','right'].forEach(function(align, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('red');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($(elemId));
}
function initialize() {
web2d.peer.Toolkit.init();
// Multine tests ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
});
// Multine tests and alingments .. ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
})
}
</script>
</head>
<body onload="initialize();">
<h1>Web2d Fonts Tests</h1>
<table border="1">
<colgroup>
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<thead>
<tr>
<td></td>
<td>Arial</td>
<td>Tahoma</td>
<td>Verdana</td>
<td>Times</td>
</tr>
</thead>
<tr>
<td>
Multiline Text
</td>
<td>
<div id="multi0"></div>
</td>
<td>
<div id="multi1"></div>
</td>
<td>
<div id="multi2"></div>
</td>
<td>
<div id="multi3"></div>
</td>
</tr>
<tr>
<td>
Multiline Aligment
</td>
<td>
<div id="amulti0"></div>
</td>
<td>
<div id="amulti1"></div>
</td>
<td>
<div id="amulti2"></div>
</td>
<td>
<div id="amulti3"></div>
</td>
</tr>
<!--**************************************************************************-->
</table>
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

97
web2d/src/test/javascript/render/text.html
View File

@@ -15,7 +15,8 @@
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
@@ -44,66 +45,57 @@
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function zoomIn()
{
for(i=0; i<workspaces.length; i++)
{
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width*2,coordSize.height*2);
}
};
function zoomIn() {
for (i = 0; i < workspaces.length; i++) {
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
}
};
workspaces = [];
var textot;
workspaces = [];
var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
{
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize,coordSize);
overflowWorkspace.setCoordOrigin(0,0);
var TextTest = function (size, coordSize, textval, font, fontSizeval, style, modifier, fontColor, owner, iesimo) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize, coordSize);
overflowWorkspace.setCoordOrigin(0, 0);
/*var rect = new web2d.Rect(1 / 10);
rect.setPosition(40, 40);
rect.setSize(20, 20);
overflowWorkspace.appendChild(rect);
*/
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval+" "+scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval + " " + scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
textot = text;
overflowWorkspace.addItAsChildTo($(owner));
overflowWorkspace.addItAsChildTo($(owner));
var parent = $(owner);
var span= document.createElement("span");
span.setAttribute("id","textoHTML"+iesimo);
var textsize = text.offsetWidth;
var textHtml=document.createTextNode(textsize);
var fontSize=text.getHtmlFontSize();
span.appendChild(textHtml);
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:"+modifier+";font-style: "+style+"; font-size:"+ fontSize +"pt; font-family: "+font+";width:30;height:30;");
var parent = $(owner);
var span = document.createElement("span");
span.setAttribute("id", "textoHTML" + iesimo);
var textsize = text.offsetWidth;
var textHtml = document.createTextNode(textsize);
var fontSize = text.getHtmlFontSize();
span.appendChild(textHtml);
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:" + modifier + ";font-style: " + style + "; font-size:" + fontSize + "pt; font-family: " + font + ";width:30;height:30;");
parent.appendChild(span);
workspaces[iesimo]=overflowWorkspace;
};
parent.appendChild(span);
workspaces[iesimo] = overflowWorkspace;
};
function initialize(){
web2d.peer.Toolkit.init();
TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
}
function initialize() {
web2d.peer.Toolkit.init();
TextTest("100px", 200, "Test Text", "Arial", 10, "normal", "normal", "red", "text0", 0);
TextTest("100px", 100, "Test Text", "Arial", 10, "normal", "normal", "blue", "text1", 1);
TextTest("100px", 50, "Test Text", "Arial", 10, "normal", "normal", "blue", "text2", 2);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "normal", "blue", "text3", 3);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "bold", "green", "text4", 4);
}
</script>
</script>
</head>
<body onload="initialize();">
@@ -132,7 +124,8 @@
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect" onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>