334 lines
10 KiB
Groff
334 lines
10 KiB
Groff
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<title>text() | reference | Processing.js</title>
|
|
<link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
|
|
<link rel="stylesheet" href="../css/syntax.css" type="text/css" />
|
|
<link rel="stylesheet" href="../css/processing-js.css" type="text/css" />
|
|
<script src="../js/processing.min.js" type="text/javascript"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../js/jquery.tweet.min.js" type="text/javascript"></script>
|
|
<script src="../js/tabselector.js" type="text/javascript"></script>
|
|
<script src="http://cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
|
|
<script type="text/javascript">
|
|
// Only do tracking on the actual site
|
|
if (document.location.host === "processingjs.org") {
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-8565070-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
}());
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<a href="http://processingjs.org/"><img src="../images/header.png" width="177" height="42"></a>
|
|
</div>
|
|
<span class="tagline">a port of the Processing Visualization Language</span>
|
|
|
|
<div class="navbar">
|
|
<canvas width="940px" height="78px" data-processing-sources="/sketches/bannerSketch.pde"></canvas>
|
|
<ul>
|
|
<li><a href="http://processingjs.org/"><span>home</span></a></li>
|
|
<li><a href="http://processingjs.org/download/"><span>download</span></a></li>
|
|
<li><a href="index.html"><span>reference</span></a></li>
|
|
<li><a href="http://processingjs.org/exhibition/"><span>exhibition</span></a></li>
|
|
<li><a href="http://processingjs.org/learning/"><span>learning</span></a></li>
|
|
<li><a href="http://processingjs.org/articles/"><span>articles</span></a></li>
|
|
<li><a href="http://processingjs.org/community/"><span>community</span></a></li>
|
|
<li><a href="http://processingjs.org/blog/"><span>blog</span></a></li>
|
|
</ul>
|
|
<a class="viewsource" href="http://processingjs.org/sketches/bannerSketch.pde">view source</a>
|
|
</div>
|
|
|
|
<div class="page row">
|
|
<div class="span11">
|
|
<table cellpadding="0" cellspacing="0" border="0" class="ref-item">
|
|
|
|
<tr class="name-row">
|
|
|
|
<th scope="row">Name</th>
|
|
|
|
<td><h3>text()</h3></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="pjs">
|
|
|
|
<th scope="row">Processing.js Behavior</th>
|
|
|
|
<td>Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the <a href="http://bocoup.com/processing-js/docs/index.php?page=Cross-Browser%20Canvas%20Fonts">Glyph method</a>. See also: <a href="http://jim.studt.net/canvastext/">Canvas Text</a>, <a href="http://canvas.burnttoys.net/bauhaus.html">BurntToys Bauhaus</a>.
|
|
|
|
<br /><br /><p><b>Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: <a href="http://processingjs.org/learning/basic/letters">Letters</a>, <a href="http://processingjs.org/learning/basic/words">Words</a>, <a href="http://processingjs.org/source/text-width/text-width.html">width()</a></b></p>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Examples</th>
|
|
|
|
<td><div class="example"><img src="text_.gif" alt="example pic" /><pre class="margin">PFont font;
|
|
|
|
// The font must be located in the sketch's
|
|
|
|
// "data" directory to load successfully
|
|
|
|
font = loadFont("FFScala.ttf");
|
|
|
|
textFont(font);
|
|
|
|
text("word", 15, 30);
|
|
|
|
fill(0, 102, 153);
|
|
|
|
text("word", 15, 60);
|
|
|
|
fill(0, 102, 153, 51);
|
|
|
|
text("word", 15, 90);</pre></div><div class="example"><img src="text_X.gif" alt="example pic" /><pre class="margin">size(100, 100, P3D);
|
|
|
|
PFont font;
|
|
|
|
font = loadFont("FFScala.ttf");
|
|
|
|
textFont(font);
|
|
|
|
text("word", 15, 60, -30);
|
|
|
|
fill(0, 102, 153);
|
|
|
|
text("word", 15, 60);</pre></div><div class="example"><img src="text_3.gif" alt="example pic" /><pre class="margin">PFont font;
|
|
|
|
font = loadFont("FFScala-Bold.ttf");
|
|
|
|
textFont(font);
|
|
|
|
String s = "The quick brown fox jumped over the lazy dog.";
|
|
|
|
text(s, 15, 20, 70, 70);</pre></div></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
|
|
|
|
<th scope="row">Description</th>
|
|
|
|
<td>Draws text to the screen. Displays the information specified in the <b>data</b> or <b>stringdata</b> parameters on the screen in the position specified by the <b>x</b> and <b>y</b> parameters and the optional <b>z</b> parameter. A font must be set with the <b>textFont()</b> function before <b>text()</b> may be called. The <b>width</b> and <b>height</b> parameters define a rectangular area to display within and may only be used with string data. The text displays in relation to the <b>textAlign()</b> function, which gives the option to draw to the left, right, and center of the coordinates. Use the <b>textMode()</b> function with the <b>SCREEN</b> parameter to display text in 2D at the surface of the window. Change the color of the text with the <b>fill()</b> function.</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Syntax</th>
|
|
|
|
<td><pre>text(<kbd>data</kbd>, <kbd>x</kbd>, <kbd>y</kbd>)
|
|
|
|
<span class="warning">text(<kbd>data</kbd>, <kbd>x</kbd>, <kbd>y</kbd>, <kbd>z</kbd>)</span>
|
|
|
|
text(<kbd>stringdata</kbd>, <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>)
|
|
|
|
<span class="warning">text(<kbd>stringdata</kbd>, <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>, <kbd>z</kbd>)</span></pre></td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Parameters</th>
|
|
|
|
<td><table cellpadding="0" cellspacing="0" border="0">
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">data</th>
|
|
|
|
<td>String, char, int, or float: the alphanumeric symbols to be displayed</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">x</th>
|
|
|
|
<td>int or float: x-coordinate of text</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">y</th>
|
|
|
|
|
|
|
|
<td>int or float: y-coordinate of text</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="warning">
|
|
|
|
<th scope="row" ><span class="warning">z</span></th>
|
|
|
|
<td>int or float: z-coordinate of text</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">stringdata</th>
|
|
|
|
<td>String: letters to be displayed</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">width</th>
|
|
|
|
<td>int or float: width of text box</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">height</th>
|
|
|
|
<td>int or float: height of text box</td>
|
|
|
|
</tr>
|
|
|
|
</table></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Usage</th>
|
|
|
|
<td>Web & Application</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr class="">
|
|
|
|
<th scope="row">Related</th>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
<a href="textAlign_.1">textAlign()</a><br />
|
|
|
|
<a href="textMode_.1">textMode()</a><br />
|
|
|
|
<a href="loadFont_.1">loadFont() </a><br />
|
|
|
|
<a href="PFont.1" >PFont </a><br />
|
|
|
|
<a href="textFont_.1">textFont()</a><br /></td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<div class="cclicense">
|
|
<p>This reference is licensed under the CC BY-NC-SA 2.0 license:</p>
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">
|
|
<img alt="Creative Commons License" border="0" src="../images/somerights20.gif" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar span4">
|
|
<h3><a href="http://processingjs.org/download/">Downloads</a></h3>
|
|
<ul>
|
|
<li><a href="http://processingjs.org/download/">Download the latest version of Processing.js!</a></li>
|
|
</ul>
|
|
|
|
<h3><a href="http://processingjs.org/articles/">Articles</a></h3>
|
|
<ul>
|
|
<li><a href="http://processingjs.org/articles/jsQuickStart.html">Quick Start - JavaScript Developer</a></li>
|
|
<li><a href="http://processingjs.org/articles/p5QuickStart.html">Quick Start - Processing Developer</a></li>
|
|
<li><a href="http://processingjs.org/articles/RenderingModes.html">Rendering Modes</a></li>
|
|
<li><a href="http://processingjs.org/articles/PomaxGuide.html">Pomax's Guide to processing-js</a></li>
|
|
</ul>
|
|
|
|
<h3><a>Web IDEs</a></h3>
|
|
<ul>
|
|
<li><a href="http://sketchpad.cc">Sketchpad.cc</a></li>
|
|
<li><a href="http://processingjs.org/tools/processing-helper.html">Processing.js Helper</a></li>
|
|
<li><a href="http://www.openprocessing.org">OpenProcessing.org</a></li>
|
|
</ul>
|
|
|
|
<h3><a href="http://processingjs.org/community/">Community</a></h3>
|
|
<ul>
|
|
<li><a href="irc://irc.mozilla.org/processing.js">IRC Channel</a></li>
|
|
<li><a href="http://processing-js.lighthouseapp.com/">Bug Tracker</a></li>
|
|
<li><a href="http://github.com/processing-js/processing-js/">Github Repository</a></li>
|
|
<li><a href="http://groups.google.com/group/processingjs">Google Group</a></li>
|
|
<li><a href="http://zenit.senecac.on.ca/wiki/index.php/">Open Source @ Seneca</a></li>
|
|
</ul>
|
|
|
|
<h3><a href="http://twitter.com/processingjs">Twitter Feed</a></h3>
|
|
<div class="twitter"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Processing is an open visualization language developed by
|
|
<a href="http://benfry.com/">Ben Fry</a> & <a href="http://reas.com/">Casey Reas</a>,
|
|
and originally ported to Javascript by
|
|
<a href="http://ejohn.org/blog/processingjs/">John Resig</a>.
|
|
Processing.js is maintained by the Processing.js team.
|
|
</div>
|
|
</div>
|
|
<a href="http://github.com/processing-js/processing-js/">
|
|
<img style="position: absolute; top: 0; right: 0; border: 0;" src="../images/forkme-right-orange.png" alt="Fork me on GitHub">
|
|
</a>
|
|
</body>
|
|
</html>
|