98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>DojoX GFX: Vector Text test: load and display a font</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<style type="text/css">
|
|
@import "../../../../dojo/resources/dojo.css";
|
|
@import "../../../../dijit/tests/css/dijitTests.css";
|
|
</style>
|
|
<!-- SVGWEB { -->
|
|
<meta name="svg.render.forceflash" content="true"/>
|
|
<script src="svgweb/src/svg.js" data-path="svgweb/src"></script>
|
|
<script src="../../../../dojo/dojo.js" djConfig="isDebug:true,forceGfxRenderer:'svg'" type="text/javascript"></script>
|
|
<!-- } -->
|
|
<script type="text/javascript">
|
|
dojo.require("dojox.gfx");
|
|
dojo.require("dojox.gfx.VectorText");
|
|
|
|
var bg="#181818", fill="#464b44", padding=32;
|
|
dojo.addOnLoad(function(){
|
|
var url = dojo.moduleUrl("dojox", "gfx/resources/Gillius.svg");
|
|
var f = new dojox.gfx.VectorFont(url);
|
|
|
|
// don't do too much, svgweb is slow~~~
|
|
for (var i in f.glyphs) {
|
|
if (i < 'a' || i > 'z') {
|
|
delete f.glyphs[i];
|
|
}
|
|
}
|
|
|
|
// draw out the glyphs for testing.
|
|
var surface = dojox.gfx.createSurface("test", 2500, 560);
|
|
/* SVGWEB { */
|
|
surface.whenLoaded(function() {
|
|
var start = new Date().getTime();
|
|
var suspendId = surface.rawNode.suspendRedraw(10000000);
|
|
var rect = surface.createRect({ x: 0, y: 0, width: 2500, height: 560 })
|
|
.setFill(bg);
|
|
var g = surface.createGroup(), cx=0, count=0;
|
|
for(var gl in f.glyphs){
|
|
var glyph = f.glyphs[gl];
|
|
var t = g.createGroup();
|
|
if(glyph.path){
|
|
var p = t.createPath(glyph.path).setFill(fill);
|
|
}
|
|
t.setTransform([
|
|
dojox.gfx.matrix.flipY,
|
|
dojox.gfx.matrix.translate(cx, -f.viewbox.height-f.descent)
|
|
]);
|
|
cx += glyph.xAdvance, count++;
|
|
g.createLine({
|
|
x1: cx, x2: cx, y1: 0, y2: f.viewbox.height
|
|
}).setStroke({color:"#409953", style:"Dash", width:1 });
|
|
}
|
|
cx -= glyph.xAdvance;
|
|
var factor = (500/f.viewbox.height)/2;
|
|
g.setTransform(dojox.gfx.matrix.scale(factor));
|
|
surface.setDimensions(cx*factor, (f.viewbox.height*factor)+padding*2);
|
|
rect.setShape({ x:0, y:0, width:cx*factor, height: (f.viewbox.height*factor)+padding*2 });
|
|
dojo.byId("test").style.height = Math.round(f.viewbox.height*factor)+padding*2+"px";
|
|
|
|
// try to find the baseline
|
|
surface.createLine({ x1: 0, x2: cx*factor,
|
|
y1: factor*(f.viewbox.height+f.descent), y2:factor*(f.viewbox.height+f.descent)
|
|
}).setStroke({ color: "#a36e2c" });
|
|
|
|
// lets do some measuring lines.
|
|
var s = "#70657e", axis = surface.createGroup();
|
|
// measurement axis
|
|
axis.createLine({ x1: 0, x2: cx*factor, y1: factor*f.viewbox.height+padding*2-1, y2: factor*f.viewbox.height+padding*2-1 })
|
|
.setStroke(s);
|
|
|
|
var major=50, minor=10, yMajor=20, yMinor=10, tick=5, steps=Math.floor(cx/minor);
|
|
for(var i=0; i<steps; i++){
|
|
// ticks
|
|
var xpos = i*minor, y2 = padding*2+factor*f.viewbox.height, y1 = (xpos%major==0)?y2-yMajor:y2-yMinor;
|
|
axis.createLine({ x1: xpos, x2: xpos, y1: y1, y2: y2 }).setStroke(s);
|
|
if(xpos%major==0){
|
|
axis.createText({ x: xpos, y: y1-4, text: xpos.toString(), align: "middle" })
|
|
.setFont({ family: "sans-serif", size:"8pt"})
|
|
.setFill(s);
|
|
}
|
|
}
|
|
|
|
surface.rawNode.unsuspendRedraw(suspendId);
|
|
alert(new Date().getTime() - start);
|
|
});
|
|
/* } */
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>dojox.gfx Vector Text test: loading a font</h1>
|
|
<p>This is a test of the new VectorText functionality; we load up an SVG Font definition and use it to render text (as opposed to tapping into a browser's native text capability).</p>
|
|
<div id="test" style="width: 500px; height: 560px;"></div>
|
|
</body>
|
|
</html>
|