mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-03 22:20:32 +00:00
319 lines
No EOL
18 KiB
HTML
319 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Kitchensink — Fabric.js demos</title>
|
|
<script src="../../dist/all.js"></script>
|
|
<script src="../../lib/fonts/Delicious_500.font.js"></script>
|
|
<style>
|
|
.canvas-container { border: 1px solid #ccc; display: inline-block; vertical-align: top; }
|
|
h2 span { font-weight: normal; }
|
|
pre { background: #eef; display: inline-block; padding-right: 15px; margin-left: 15px }
|
|
</style>
|
|
<link rel="stylesheet" href="../../lib/master.css" type="text/css">
|
|
<link rel="stylesheet" href="demo.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<ul id="header">
|
|
<li><a href="../index.html">Demos</a></li>
|
|
<li><a href="../../benchmarks/index.html">Benchmarks</a></li>
|
|
<li><a href="../../docs/index.html">Docs</a></li>
|
|
<li><a href="../../test/unit/suite_runner.html">Tests</a></li>
|
|
</ul>
|
|
<div id="bd-wrapper">
|
|
<h2><span>Fabric.js demos</span> · Kitchen Sink</h2>
|
|
<div id="controls">
|
|
|
|
</div>
|
|
<div style="position:relative;width:804px;height:704px;float:left;">
|
|
<div id="fps"> </div>
|
|
<canvas id="canvas" width="800" height="700"></canvas>
|
|
<div id="complexity">Canvas complexity (number of paths):<strong></strong></div>
|
|
<div id="text-controls">
|
|
<textarea id="text"></textarea>
|
|
<div id="text-control-buttons">
|
|
<button type="button" id="text-cmd-italic">Italic</button>
|
|
<button type="button" id="text-cmd-underline">Underline</button>
|
|
<button type="button" id="text-cmd-linethrough">Linethrough</button>
|
|
<button type="button" id="text-cmd-overline">Overline</button>
|
|
<button type="button" id="text-cmd-shadow">Shadow</button>
|
|
<label for="text-align" style="display:inline-block">Text align:</label>
|
|
<select id="text-align">
|
|
<option>Left</option>
|
|
<option>Center</option>
|
|
<option>Right</option>
|
|
</select>
|
|
<label>Bg color: <input type="color" value="" id="text-bg-color" size="10"></label>
|
|
</div>
|
|
</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="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="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="shape115"><strong>124</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="shape109"><strong>153</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="shape112"><strong>183</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="shape108"><strong>236</strong> paths</button></li>
|
|
<li><button class="shape" id="shape62"><strong>237</strong> paths</button></li>
|
|
<li><button class="shape" id="shape113"><strong>278</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="shape110"><strong>1004</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="shape116"><strong>1196</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="shape114"><strong>1269</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>
|
|
|
|
<br><br>
|
|
|
|
<li><button class="shape" id="shape118"><strong>1173</strong> paths</button></li>
|
|
<li><button class="shape" id="shape119"><strong>600</strong> paths</button></li>
|
|
<li><button class="shape" id="shape120"><strong>395</strong> paths</button></li>
|
|
<li><button class="shape" id="shape121"><strong>756</strong> paths</button></li>
|
|
<li><button class="shape" id="shape122"><strong>513</strong> paths</button></li>
|
|
<li><button class="shape" id="shape123"><strong>359</strong> paths</button></li>
|
|
<li><button class="shape" id="shape123"><strong>359</strong> paths</button></li>
|
|
<li><button class="shape" id="shape125"><strong>676</strong> paths</button></li>
|
|
<li><button class="shape" id="shape126"><strong>696</strong> paths</button></li>
|
|
<li><button class="shape" id="shape128"><strong>341</strong> paths</button></li>
|
|
<li><button class="shape" id="shape129"><strong>756</strong> paths</button></li>
|
|
<li><button class="shape" id="shape130"><strong>1800</strong> paths</button></li>
|
|
<li><button class="shape" id="shape131"><strong>476</strong> paths</button></li>
|
|
<li><button class="shape" id="shape132"><strong>191</strong> paths</button></li>
|
|
<li><button class="shape" id="shape133"><strong>223</strong> paths</button></li>
|
|
<li><button class="shape" id="shape134"><strong>834</strong> paths</button></li>
|
|
<li><button class="shape" id="shape135"><strong>651</strong> paths</button></li>
|
|
<li><button class="shape" id="shape136"><strong>975</strong> paths</button></li>
|
|
<li><button class="shape" id="shape138"><strong>401</strong> paths</button></li>
|
|
<li><button class="shape" id="shape139"><strong>239</strong> paths</button></li>
|
|
<li><button class="shape" id="shape140"><strong>246</strong> paths</button></li>
|
|
<li><button class="shape" id="shape141"><strong>244</strong> paths</button></li>
|
|
<li><button class="shape" id="shape142"><strong>180</strong> paths</button></li>
|
|
<li><button class="shape" id="shape143"><strong>838</strong> paths</button></li>
|
|
<li><button class="shape" id="shape144"><strong>308</strong> paths</button></li>
|
|
<li><button class="shape" id="shape146"><strong>160</strong> paths</button></li>
|
|
<li><button class="shape" id="shape147"><strong>841</strong> paths</button></li>
|
|
|
|
<!--
|
|
<line>s are rendered incorrectly
|
|
<li><button class="shape" id="shape145"><strong>xxx</strong> paths</button></li> -->
|
|
|
|
<!--
|
|
some elements are positioned incorrectly
|
|
<li><button class="shape" id="shape137"><strong>xxx</strong> paths</button></li> -->
|
|
|
|
<!--
|
|
wrong position of ellipses
|
|
<li><button class="shape" id="shape127"><strong>xxx</strong> paths</button></li> -->
|
|
|
|
<!--
|
|
bezier curve doesn't seem to be rendered correctly
|
|
<li><button class="shape" id="shape117"><strong>xxx</strong> paths</button></li> -->
|
|
|
|
<!-- <li><button class="shape" id="shape111"><strong>18229</strong> paths</button></li> -->
|
|
|
|
<br><br>
|
|
|
|
<li><button class="shape" id="shape54">Image</button></li>
|
|
<li><button class="shape" id="shape74">Gradient 1</button></li>
|
|
<li><button class="shape" id="shape66">Gradient 2</button></li>
|
|
<li><button class="shape" id="shape75">Gradient 3</button></li>
|
|
<li><button class="shape" id="shape104">Arc(s) 1</button></li>
|
|
<li><button class="shape" id="shape105">Arc(s) 2</button></li>
|
|
<li><button class="shape" id="shape106">Arc(s) 3</button></li>
|
|
<li><button class="shape" id="shape107">Arc(s) 4</button></li>
|
|
|
|
<li><button class="shape" id="shape103">Transformed paths</button></li>
|
|
</ul>
|
|
|
|
<ul class="object-controls">
|
|
<li>
|
|
<button id="rasterize">Rasterize canvas to image</button>
|
|
<button class="clear">Clear canvas</button>
|
|
<button id="add-text">Add text</button>
|
|
</li>
|
|
|
|
<li style="margin-top:10px;"><button id="remove-selected">Remove selected object/group</button></li>
|
|
|
|
<li style="margin-top:10px;">
|
|
<button id="lock-horizontally">Lock horizontal movement</button>
|
|
<button id="lock-vertically">Lock vertical movement</button>
|
|
<button id="lock-scaling-x">Lock horizontal scaling</button>
|
|
<button id="lock-scaling-y">Lock vertical scaling</button>
|
|
<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="svg-console">Load SVG:</label>
|
|
|
|
<textarea rows="15" cols="55" id="svg-console">
|
|
<?xml version="1.0" standalone="no"?>
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
|
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
|
|
<svg width="100%" height="100%" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<rect width="300" height="100"
|
|
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
|
|
</svg>
|
|
</textarea>
|
|
<button type="button" id="load-svg">Load</button>
|
|
</li>
|
|
|
|
<li style="margin-top:10px;">
|
|
<label for="canvas-console">Execute code:</label>
|
|
<textarea rows="15" cols="55" 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="../../lib/centering_guidelines.js" type="text/javascript"></script>
|
|
<script src="../../lib/aligning_guidelines.js" type="text/javascript"></script>
|
|
<script src="../../lib/font_definitions.js"></script>
|
|
<script src="demo.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |