Yajbir-Malik/DocumentServer-v-9.2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init repo

Browse Source
This commit is contained in:
nikolay ivanov
2014-07-05 18:22:49 +00:00
commit a8be6b9e72
17348 changed files with 9229832 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
OfficeWeb/sdk/Common/Charts/examples/text.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Animated rotating text with the OfficeExcel software</title>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script>
__pause = false; // Provide a way to pause the rotation
__OfficeExcel_rotate = 0; // A record of the angle (IN DEGREES) we're at currently
__OfficeExcel_rotate2 = 0; // Ditto, but this is controlled by the buttons
window.onload = function ()
{
if (!__pause) {
var canvas = document.getElementById("myc");
var context = canvas.getContext('2d');
OfficeExcel.Clear(canvas); // Clears the canvas
context.beginPath();
context.fillStyle = 'black';
OfficeExcel.Text(context, 'Verdana',10,canvas.width/2,canvas.height/2,'Magic text! (' + __OfficeExcel_rotate + ')','center','center',false, ++__OfficeExcel_rotate);
OfficeExcel.Text(context, 'Verdana', 16, 50, 50, 'This is making me dizzy... (' + (__OfficeExcel_rotate * 5) + ')', 'center', 'left', false, __OfficeExcel_rotate * 2);
OfficeExcel.Text(context, 'Verdana', 20, 50, 200, 'Some user controllable text (' + __OfficeExcel_rotate2 + ')', 'center', 'center', false, __OfficeExcel_rotate2);
context.stroke();
context.fill();
}
setTimeout(window.onload, 1);
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: Javascript charts &amp; HTML5 canvas charts library</a>
>
<a href="./index.html">Examples</a>
>
Rotating text
</div>
<h1>A text <span>function that does horizontal and vertical alignment (and spins)</span></h1>
<table border="0" style="float: left; margin-right: 10px">
<tr>
<td colspan="2"><canvas id="myc" width="300" height="300" style="border: 1px dashed gray">The fallback HTML</canvas></td>
</tr>
<tr>
<td align="center">
<button style="width: 100px; margin: 5px" onmousedown="__OfficeExcel_rotate2 -= 5">&laquo; Rotate left</button>&nbsp;
<button style="margin: 5px" onmousedown="if (this.innerHTML == 'Pause') {__pause = true; this.innerHTML = 'Play'} else {this.innerHTML = 'Pause'; __pause = false; }">Pause</button>&nbsp;
<button style="width: 100px; margin: 5px" onmousedown="__OfficeExcel_rotate2 += 5">Rotate right&raquo;</button>
</td>
</tr>
</table>
<p>
OfficeExcel.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the
text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire
canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be
running on computers that have more processing power than
some small countries... <a href="javascript: location.href = location.href">Reset the page</a>
</p>
<p>
In a similar vein you could easily make some text that bounces from one side of the screen to the other,
hurrah - the return of &lt;marquee&gt;!
</p>
<div>
More examples can be found on the individual <a href="/examples/">example pages</a>, and a more complete
reference to the Text() function can be found in the <a href="../docs/api.html#functions.other">API docs</a>.
</div>
</body>
</html>