dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
105 lines (93 loc) • 4.15 kB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testing text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require(["dojo/ready", "dojo/_base/array", "dojo/dom", "dojo/on", "dojox/gfx","dojox/gfx/matrix"],
function(ready, array, dom, on, gfx, matrix){
var ROTATION = 30, surface = null, t1, t2, t3, t4, t5, t6, t7, t8, t9;
function placeBBox(surface, shape){
var bbox = shape.getBoundingBox();
var t = shape.getTransform();//shape._getRealMatrix();
var tbbox = matrix.multiplyRectangle(t, bbox);
var rect = surface.createRect(tbbox).setStroke("red");
}
function placeAnchor(surface, x, y){
surface.createLine({x1: x - 2, y1: y, x2: x + 2, y2: y}).setStroke("blue");
surface.createLine({x1: x, y1: y - 2, x2: x, y2: y + 2}).setStroke("blue");
}
function makeText(surface, text, font, fill, stroke){
var t = surface.createText(text);
if(font) t.setFont(font);
if(fill) t.setFill(fill);
if(stroke) t.setStroke(stroke);
placeAnchor(surface, text.x, text.y);
return t;
}
function makeShapes(){
var m = matrix;
surface.createLine({x1: 250, y1: 0, x2: 250, y2: 500}).setStroke("green");
t1 = makeText(surface, {x: 250, y: 50, text: "Start", align: "start"},
{family: "Times", size: "36pt", weight: "bold"}, "black", "red")
.setTransform(m.rotategAt(ROTATION, 250, 50));
t2 = makeText(surface, {x: 250, y: 100, text: "Middle", align: "middle"},
{family: "Symbol", size: "24pt"}, "red", "black")
.setTransform(m.rotategAt(ROTATION, 250, 100));
t3 = makeText(surface, {x: 250, y: 150, text: "End", align: "end"},
{family: "Helvetica", style: "italic", size: "18pt", rotated: true}, "#FF8000")
.setTransform(m.rotategAt(ROTATION, 250, 150));
t4 = makeText(surface, {x: 250, y: 200, text: "Define Shuffle Tiff", align: "middle", kerning: true},
{family: "serif", size: "36pt"}, "black")
.setTransform(m.rotategAt(0, 250, 200));
t5 = makeText(surface, {x: 250, y: 250, text: "Define Shuffle Tiff", align: "middle", kerning: false},
{family: "serif", size: "36pt"}, "black")
.setTransform(m.rotategAt(0, 250, 250));
// test #14522
t6 = makeText(surface, {x: 250, y: 290, text: 18, align: "start"},
{family: "sans serif", size: "18pt", weight: "bold"}, "black");
// test #16099
t7 = makeText(surface, {x: 0, y: 0, text: "Middle", align: "middle"},
{family: "sans serif", size: "24pt"}, "red", "black")
.setTransform(m.translate(250, 340));
t8 = makeText(surface, {x: 250, y: 390, text: "Number: \u200E\u202A20\u202C", align: "middle"},
{family: "sans serif", size: "24pt"}, "red", "black");
// a text with some descents
t9 = makeText(surface, {x: 0, y: 0, text: "go, Dojo! go", align: "end"},
{family: "serif", size: "36pt"}, "red", "black")
.setTransform(m.translate(250, 440));
array.forEach(["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"], function(name){
var node = eval("(" + name + ")");
placeBBox(surface, node);
});
}
function createSurface(nodeId){
surface = gfx.createSurface(nodeId, 500, 500);
surface.whenLoaded(makeShapes);
}
function getSizes(){
if (!surface.children.length){return;}
var t = [];
array.forEach(["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"], function(name){
var node = eval("(" + name + ")");
t.push(node.getShape().text + " = " + node.getTextWidth());
});
dom.byId("sizes").innerHTML = t.join("<br/>");
}
ready(function(){
on(dom.byId("getSizes"), "click", getSizes);
on(dom.byId("clear"), "click", function(){surface.clear();});
createSurface("test");
});
});
</script>
</head>
<body>
<h1>dojox.gfx Text test</h1>
<div id="test" style="width: 500px; height: 500px;"></div>
<div><button id="clear">Clear</button> <button id="getSizes">Get sizes</button></div>
<p id="sizes"> </p>
<p>That's all Folks!</p>
</body>
</html>