-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (105 loc) · 4.6 KB
/
index.html
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Js Canvas Tester</title>
</head>
<body>
<h1 style="text-align:center">Simple Test Module for jsCanvas</h1>
<blockquote>
This module shows the jsCanvas compiler used in conjunction with the <a href=http://code.google.com/p/canvg/>canvg SVG->Canvas converter</a>.
The general idea here is that at development time we compile the necessary SVG files into a javascript
object which can be realized at runtime. The advantage is that there is no need to load the canvg interpreter
code at runtime, as well as being able to manipulate the compiled object at run time. Here, we show a couple of
manipulations by changing the line color to blue, and changing some of the fill colors, including a gradient.
The ability to change the fill colors also makes it easy to add pattern fills from server-side patterns,
which is sort of a pain in SVG.
</blockquote>
<table>
<tr><td>File <input id="infile" size=50 value="http://mtcc.com/site/imgs/phzavatar.svg"><td><button onclick="jsCanvas.test ()">Render</button>
<tr><th>Compiled SVG with Color Substitution<th>Object Source
<tr><td valign=top><canvas id=ycanvas><td id=source>
</table>
<hr>
<address><a href="mailto:[email protected]">Michael Thomas</a></address>
<script type=text/javascript src=http://mtcc.com/site/jscanvas.js></script>
<script type=text/javascript src=http://mtcc.com/site/rgbcolor.js></script>
<script type=text/javascript src=http://mtcc.com/site/canvg.js></script>
<script type=text/javascript>
jsCanvas.ajax = function (url) {
var AJAX;
// make certain we get freshest
url += '?cb='+Math.random ();
if(window.XMLHttpRequest){AJAX=new XMLHttpRequest();}
else{AJAX=new ActiveXObject('Microsoft.XMLHTTP');}
if(AJAX){
AJAX.open('GET',url,false);
AJAX.send(null);
return AJAX.responseText;
}
return null;
};
jsCanvas.test = function () {
var el = document.getElementById ('infile');
var svg = jsCanvas.ajax (el.value);
ycanvas = document.getElementById ('ycanvas');
// if you specify a width and height, it will scale it at compile time.
// generally you probably want to generate it at normal scale, and scale it
// at run time, which is what we do here.
xcanvas = new jsCanvas ('jscanvastest');
xcanvas.canvas.style.display = 'none'; // we don't want our compiler canvas displayed
// now render it. for completion, we eval it and execute it just to test.
// normally, you'd probably do something like POST the generated javascript
// code to a web site so that it could be used on other pages
xcanvas.compile (svg, function () {
eval (xcanvas.toString ());
// instantiate the compiled object and give it the context
// of the displayed canvas it should render into
var yctx = ycanvas.getContext('2d');
var cantest = new jscanvastest (yctx);
// we can get the natural size of the object from the instantiated
// object this way.
// alternatively, you can use inwidth/inheight to scale the output
// object to a given canvas size, eg:
// yctx.scale (200/cantest.inwidth, 200/cantest.inwidth);
ycanvas.width = cantest.inwidth;
ycanvas.height = cantest.inheight;
yctx.scale (.5, .5);
// capture the sets to various fields in the 2d context
// this is good for changing the look of the generated object at run time.
// @override
cantest.setter = function (ctx, key, val) {
if (key == 'fillStyle') {
switch (val) {
case '#bbbbbb':
val = 'rgba(255, 0, 0, 1)';
break;
case '#aaaaaa':
val = ctx.createLinearGradient(0,0,0,500);
val.addColorStop (0, 'rgb(255,0,0)');
val.addColorStop (1, 'rgb(0,255,0)');
break;
case '#eeeeee':
val = ctx.createPattern(document.getElementById('pattern'), 'repeat');
break;
default:
break; // keep original
}
} else if (key == 'strokeStyle' && val == 'rgba(0, 0, 0, 1)')
val = 'rgba(0, 0, 255, 1)';
ctx [key] = val;
};
// all set up, render away...
cantest.render ();
// paint up the object source
var el = document.getElementById ('source');
el.innerHTML = '<pre>'+xcanvas.toString ()+'</pre>';
});
}
</script>
<img id="pattern" src=http://mtcc.com/site/imgs/davidmatblack.png style="display:none">
<!-- Created: Tue Apr 9 08:38:52 PDT 2013 -->
<!-- hhmts start -->
Last modified: Tue Apr 9 12:43:52 PDT 2013
<!-- hhmts end -->
</body>
</html>