mirror of
https://github.com/wassname/CanvasTextWrapper.git
synced 2026-06-27 18:21:38 +08:00
Vadim
161 lines
5.4 KiB
HTML
161 lines
5.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<script src="js/CanvasTextWrapper.js"></script>
|
|
<script src="js/options.js"></script>
|
|
<script src="js/examples.js"></script>
|
|
<title>CanvasTextWrapper</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<p>CanvasTextWrapper</p>
|
|
|
|
<p class="description">
|
|
Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with
|
|
alignment and padding.
|
|
</p>
|
|
</header>
|
|
<article>
|
|
<h2>Syntax</h2><br/>
|
|
|
|
<p class="white-block">CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
|
|
|
|
<div>
|
|
<div class="emph">Options</div>
|
|
- is an object with the following available properties and values:
|
|
</div>
|
|
<ul class="syntax">
|
|
<li>
|
|
<div class="emph">font</div>
|
|
(String) - text style that includes font size in px, weight, font family, etc. Similar to CSS font shorthand
|
|
property
|
|
</li>
|
|
<li>
|
|
<div class="emph">lineHeight</div>
|
|
(Number or String)
|
|
<ul class="values">
|
|
<li>number - n times font size where 1 is equivalent to '100%'</li>
|
|
<li>"%"</li>
|
|
<li>"px"</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">textAlign</div>
|
|
(String) - horizontal alignment of each line
|
|
<ul class="values">
|
|
<li>"left"</li>
|
|
<li>"center"</li>
|
|
<li>"right"</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">verticalAlign</div>
|
|
(String) - vertical alignment of the whole text block
|
|
<ul class="values">
|
|
<li>"top"</li>
|
|
<li>"middle"</li>
|
|
<li>"bottom"</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">paddingX</div>
|
|
(Number) - horizontal padding (in px) set equally on both, left and right sides
|
|
</li>
|
|
<li>
|
|
<div class="emph">paddingY</div>
|
|
(Number) - vertical padding (in px) set equally on both, top and bottom sides
|
|
</li>
|
|
<li>
|
|
<div class="emph">fitParent</div>
|
|
(Boolean) - parameter that controls which element to fit
|
|
<ul class="values">
|
|
<li>true - fit canvas parent's width instead of canvas own width</li>
|
|
<li>false - fit canvas width</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">lineBreak</div>
|
|
(String) - text split rule
|
|
<ul class="values">
|
|
<li>"auto" - text fills padded container going to a next line on a whole word</li>
|
|
<li>"word" - each next word will be placed on a new line</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">sizeToFill</div>
|
|
(Boolean) - auto font size to fill text container
|
|
<ul class="values">
|
|
<li>true - ignore given font size/line height and resize text to fill its padded container</li>
|
|
<li>false - use specified or default font size</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">strokeText</div>
|
|
(Boolean) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are
|
|
ignored)
|
|
</li>
|
|
<li>
|
|
<div class="emph">justifyLines</div>
|
|
(Boolean) - if enabled, text breaks on every new line character "\n"
|
|
</li>
|
|
<p>
|
|
NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter
|
|
unless "sizeToFill" option is enabled.
|
|
</p>
|
|
</ul>
|
|
|
|
<h2>Default Options</h2><br/>
|
|
<pre class="white-block">
|
|
{
|
|
<strong>font</strong>: "18px Arial, sans-serif",
|
|
<strong>lineHeight</strong>: 1,
|
|
<strong>textAlign</strong>: "left",
|
|
<strong>verticalAlign</strong>: "top",
|
|
<strong>paddingX</strong>: 0,
|
|
<strong>paddingY</strong>: 0,
|
|
<strong>fitParent</strong>: false,
|
|
<strong>lineBreak</strong>: "auto",
|
|
<strong>sizeToFill</strong>: false,
|
|
<strong>allowNewLine</strong>: true,
|
|
<strong>justifyLines</strong>: false,
|
|
<strong>strokeText</strong>: false
|
|
}
|
|
</pre>
|
|
|
|
<h2>Usage</h2><br/>
|
|
|
|
<p>
|
|
Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using
|
|
CanvasTextWrapper like so:
|
|
</p>
|
|
|
|
<pre class="white-block">
|
|
var canvas = document.getElementById("#canvasText");
|
|
canvas.width = 200;
|
|
canvas.height = 200;
|
|
context = canvas.getContext("2d");
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = "#ff0000";
|
|
CanvasTextWrapper(canvas,"Hello"); //default options will apply
|
|
</pre>
|
|
|
|
<h2>Installation</h2><br/>
|
|
|
|
<p class="white-block">
|
|
bower install canvas-text-wrapper<br/>
|
|
npm install canvas-text-wrapper
|
|
</p>
|
|
</article>
|
|
<section>
|
|
<h2>Examples</h2>
|
|
</section>
|
|
<footer>
|
|
← <a href="https://github.com/namniak/CanvasTextWrapper">View on GitHub</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|