mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-29 09:44:41 +00:00
219 lines
No EOL
12 KiB
HTML
219 lines
No EOL
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<title>Demo of a Fabric.js — HTML5/Javascript canvas library and an SVG parser</title>
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="../../lib/excanvas.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
|
|
<script src="../../dist/all.js" type="text/javascript"></script>
|
|
|
|
<script src="../fonts/Delicious_500.font.js"></script>
|
|
|
|
<link rel="stylesheet" href="demo.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<div id="body-wrapper">
|
|
<h2>
|
|
Demo of a <a href="http://github.com/kangax/fabric.js">Fabric.js</a> — interactive object model on top of <code>canvas</code> element.
|
|
</h2>
|
|
<div id="controls">
|
|
|
|
</div>
|
|
<div style="position:relative;width:804px;height:704px;float:left;">
|
|
<canvas id="canvas" width="800" height="700"></canvas>
|
|
<div id="fps"> </div>
|
|
<div id="complexity">Canvas complexity (number of paths):<strong></strong></div>
|
|
<!-- <textarea id="text"></textarea> -->
|
|
</div>
|
|
|
|
<div id="commands">
|
|
<p>Add <strong>simple shapes</strong> to canvas:</p>
|
|
<ul>
|
|
<li>
|
|
<button class="rect">Rectangle</button>
|
|
<button class="circle">Circle</button>
|
|
<button class="triangle">Triangle</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Add <strong>images</strong> to canvas:</p>
|
|
<ul>
|
|
<li style="margin-top:10px">
|
|
<button class="image1">Image 1</button>
|
|
<button class="image2">Image 2</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Add <strong>SVG shapes</strong> to canvas:</p>
|
|
<ul class="svg-shapes">
|
|
<!-- <li><button class="shape" id="shape28"><strong>5378</strong> paths</button></li>
|
|
<li><button class="shape" id="shape52"><strong>11285</strong> paths</button></li>
|
|
<li><button class="shape" id="shape56"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape60"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape68"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape70"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape73"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape92"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape78"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape79"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape80"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape81"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape82"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape83"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape84"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape85"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape86"><strong>xxx</strong> paths</button></li>
|
|
<li><button class="shape" id="shape87"><strong>xxx</strong> paths</button></li> -->
|
|
<li><button class="shape" id="shape54">Image (<strong>1</strong> path)</button></li>
|
|
<li><button class="shape" id="shape74">Gradient (<strong>1</strong> path)</button></li>
|
|
<li><button class="shape" id="shape66">Gradient (<strong>1</strong> path)</button></li>
|
|
<li><button class="shape" id="shape75">Gradient (<strong>1</strong> path)</button></li>
|
|
<li><button class="shape" id="shape25"><strong>36</strong> paths</button></li>
|
|
<li><button class="shape" id="shape36"><strong>41</strong> paths</button></li>
|
|
<li><button class="shape" id="shape58"><strong>54</strong> paths</button></li>
|
|
<li><button class="shape" id="shape59"><strong>57</strong> paths</button></li>
|
|
<li><button class="shape" id="shape8"><strong>65</strong> paths</button></li>
|
|
<li><button class="shape" id="shape17"><strong>87</strong> paths</button></li>
|
|
<li><button class="shape" id="shape2"><strong>90</strong> paths</button></li>
|
|
<li><button class="shape" id="shape69">HTML5 logo (<strong>96</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape47"><strong>133</strong> paths</button></li>
|
|
<li><button class="shape" id="shape51"><strong>141</strong> paths</button></li>
|
|
<li><button class="shape" id="shape50"><strong>167</strong> paths</button></li>
|
|
<li><button class="shape" id="shape99"><strong>174</strong> paths</button></li>
|
|
<li><button class="shape" id="shape63"><strong>202</strong> paths</button></li>
|
|
<li><button class="shape" id="shape64"><strong>224</strong> paths</button></li>
|
|
<li><button class="shape" id="shape14"><strong>226</strong> paths</button></li>
|
|
<li><button class="shape" id="shape62"><strong>237</strong> paths</button></li>
|
|
<li><button class="shape" id="shape98"><strong>280</strong> paths</button></li>
|
|
<li><button class="shape" id="shape57"><strong>321</strong> paths</button></li>
|
|
<li><button class="shape" id="shape90"><strong>363</strong> paths</button></li>
|
|
<li><button class="shape" id="shape9"><strong>404</strong> paths</button></li>
|
|
<li><button class="shape" id="shape45"><strong>404</strong> paths</button></li>
|
|
<li><button class="shape" id="shape65"><strong>444</strong> paths</button></li>
|
|
<li><button class="shape" id="shape1"><strong>448</strong> paths</button></li>
|
|
<li><button class="shape" id="shape93"><strong>464</strong> paths</button></li>
|
|
<li><button class="shape" id="shape91"><strong>562</strong> paths</button></li>
|
|
<li><button class="shape" id="shape38"><strong>563</strong> paths</button></li>
|
|
<li><button class="shape" id="shape96"><strong>674</strong> paths</button></li>
|
|
<li><button class="shape" id="shape94"><strong>710</strong> paths</button></li>
|
|
<li><button class="shape" id="shape37"><strong>758</strong> paths</button></li>
|
|
<li><button class="shape" id="shape10"><strong>778</strong> paths</button></li>
|
|
<li><button class="shape" id="shape101"><strong>832</strong> paths</button></li>
|
|
<li><button class="shape" id="shape102"><strong>850</strong> paths</button></li>
|
|
<li><button class="shape" id="shape43"><strong>936</strong> paths</button></li>
|
|
<li><button class="shape" id="shape7"><strong>1018</strong> paths</button></li>
|
|
<li><button class="shape" id="shape95"><strong>1066</strong> paths</button></li>
|
|
<li><button class="shape" id="shape97"><strong>1126</strong> paths</button></li>
|
|
<li><button class="shape" id="shape3"><strong>1197</strong> paths</button></li>
|
|
<li><button class="shape" id="shape26"><strong>1215</strong> paths</button></li>
|
|
<li><button class="shape" id="shape77"><strong>1424</strong> paths</button></li>
|
|
<li><button class="shape" id="shape32"><strong>1515</strong> paths</button></li>
|
|
<li><button class="shape" id="shape13"><strong>1652</strong> paths</button></li>
|
|
<li><button class="shape" id="shape71"><strong>1868</strong> paths</button></li>
|
|
<li><button class="shape" id="shape76"><strong>1944</strong> paths</button></li>
|
|
<li><button class="shape" id="shape53"><strong>1948</strong> paths</button></li>
|
|
<li><button class="shape" id="shape21"><strong>1972</strong> paths</button></li>
|
|
<li><button class="shape" id="shape5"><strong>2208</strong> paths</button></li>
|
|
<li><button class="shape" id="shape40"><strong>2394</strong> paths</button></li>
|
|
<li><button class="shape" id="shape55"><strong>2499</strong> paths</button></li>
|
|
<li><button class="shape" id="shape4"><strong>2742</strong> paths</button></li>
|
|
<li><button class="shape" id="shape29"><strong>3103</strong> paths</button></li>
|
|
<li><button class="shape" id="shape30"><strong>3566</strong> paths</button></li>
|
|
<li><button class="shape" id="shape61"><strong>3685</strong> paths</button></li>
|
|
<li><button class="shape" id="shape6"><strong>3921</strong> paths</button></li>
|
|
<li><button class="shape" id="shape23"><strong>4418</strong> paths</button></li>
|
|
<li><button class="shape" id="shape42"><strong>4583</strong> paths</button></li>
|
|
<li><button class="shape" id="shape31"><strong>4768</strong> paths</button></li>
|
|
<li><button class="shape" id="shape15"><strong>8325</strong> paths</button></li>
|
|
<li><button class="shape" id="shape22"><strong>9663</strong> paths</button></li>
|
|
<li><button class="shape" id="shape41"><strong>12361</strong> paths</button></li>
|
|
<li><button class="shape" id="shape67"><strong>12604</strong> paths</button></li>
|
|
<li><button class="shape" id="shape24"><strong>12866</strong> paths</button></li>
|
|
<li><button class="shape" id="shape27"><strong>13905</strong> paths</button></li>
|
|
<li><button class="shape" id="shape49"><strong>14174</strong> paths</button></li>
|
|
<li><button class="shape" id="shape33"><strong>17059</strong> paths</button></li>
|
|
<li><button class="shape" id="shape20"><strong>19035</strong> paths</button></li>
|
|
<li><button class="shape" id="shape35"><strong>19271</strong> paths</button></li>
|
|
<li><button class="shape" id="shape44"><strong>22375</strong> paths</button></li>
|
|
<li><button class="shape" id="shape72"><strong>29303</strong> paths</button></li>
|
|
<li><button class="shape" id="shape48"><strong>41787</strong> paths</button></li>
|
|
<!-- <li><button class="shape" id="shape100"><strong>x</strong> paths</button></li> -->
|
|
</ul>
|
|
|
|
<ul>
|
|
<li><button id="rasterize">Rasterize canvas to image</button></li>
|
|
|
|
<li><button class="clear">Clear canvas</button></li>
|
|
<li><button id="remove-selected">Remove selected object/group</button></li>
|
|
|
|
<li style="margin-top:10px;">
|
|
<button id="lock-horizontally">Lock horizontal movement</button>
|
|
</li>
|
|
<li>
|
|
<button id="lock-vertically">Lock vertical movement</button>
|
|
</li>
|
|
<li>
|
|
<button id="lock-scaling">Lock scaling</button>
|
|
</li>
|
|
<li>
|
|
<button id="lock-rotation">Lock rotation</button>
|
|
</li>
|
|
|
|
<li style="margin-top:10px;">
|
|
<button id="gradientify">Gradientify</button>
|
|
</li>
|
|
|
|
<li style="margin-top:10px;">
|
|
<button id="drawing-mode">Enter drawing mode</button>
|
|
<div style="display:none;" id="drawing-mode-options">
|
|
Width:
|
|
<input value="10" id="drawing-line-width" size="2">
|
|
Color:
|
|
<input type="color" value="rgb(0,0,0)" id="drawing-color" size="15">
|
|
</div>
|
|
</li>
|
|
|
|
<li style="margin-top:10px;">
|
|
<label for="canvas-console">Execute code:</label>
|
|
<textarea rows="17" cols="45" id="canvas-console">
|
|
/*
|
|
// clear canvas
|
|
canvas.clear();
|
|
|
|
// remove currently selected object
|
|
canvas.remove(canvas.getActiveObject());
|
|
|
|
// add red rectangle
|
|
canvas.add(new fabric.Rect({
|
|
width: 50,
|
|
height: 50,
|
|
left: 50,
|
|
top: 50,
|
|
fill: 'rgb(255,0,0)'
|
|
}));
|
|
|
|
// add green, half-transparent circle
|
|
canvas.add(new fabric.Circle({
|
|
radius: 40,
|
|
left: 50,
|
|
top: 50,
|
|
fill: 'rgb(0,255,0)',
|
|
opacity: 0.5
|
|
}));
|
|
*/
|
|
</textarea>
|
|
<button type="button" id="execute">Execute</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script src="centering_guidelines.js" type="text/javascript"></script>
|
|
<script src="aligning_guidelines.js" type="text/javascript"></script>
|
|
<script src="demo.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |