Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-05 04:14:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
fabric.js/test/demo/index.html

167 lines
No EOL
7.8 KiB
HTML
Raw Blame History

<!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">&nbsp;</div>
<div id="complexity">Canvas complexity (number of paths):<strong></strong></div>
</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="shape25"><strong>36</strong> paths</button></li>
<li><button class="shape" id="shape36"><strong>41</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="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="shape14"><strong>226</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="shape1"><strong>448</strong> paths</button></li>
<li><button class="shape" id="shape38"><strong>563</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="shape43"><strong>936</strong> paths</button></li>
<li><button class="shape" id="shape7"><strong>1018</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="shape32"><strong>1515</strong> paths</button></li>
<li><button class="shape" id="shape13"><strong>1652</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="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="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="shape52"><strong>11285</strong> paths <em>(broken)</em></button></li>
<li><button class="shape" id="shape41"><strong>12361</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="shape48"><strong>41787</strong> paths</button></li>
<li><button class="shape" id="shape54"><strong>xx</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="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 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>
Reference in a new issue View git blame Copy permalink