mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-10 23:03:10 +00:00
115 lines
No EOL
3.7 KiB
HTML
115 lines
No EOL
3.7 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>Canvas demo</title>
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="js/core/excanvas.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
|
|
<script src="../../dist/all.min.js" type="text/javascript"></script>
|
|
|
|
<link rel="stylesheet" href="demo.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<div id="body-wrapper">
|
|
<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>
|
|
</div>
|
|
|
|
<ul id="commands">
|
|
<li style="font-weight:bold;margin-bottom:1em">Add objects to canvas:</li>
|
|
|
|
<li>
|
|
<button class="rect">Rectangle</button>
|
|
<button class="circle">Circle</button>
|
|
<button class="triangle">Triangle</button>
|
|
</li>
|
|
|
|
<li style="margin-top:10px">
|
|
<button class="image1">Image 1</button>
|
|
<button class="image2">Image 2</button>
|
|
</li>
|
|
|
|
<li style="margin-top:10px;"><button class="shape" id="shape2">SVG shape (<strong>90</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape1">SVG shape (<strong>448</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape7">SVG shape (<strong>1018</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape3">SVG shape (<strong>1197</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape5">SVG shape (<strong>2208</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape4">SVG shape (<strong>2742</strong> paths)</button></li>
|
|
<li><button class="shape" id="shape6">SVG shape (<strong>3921</strong> paths)</button></li>
|
|
|
|
<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" disabled>Lock horizontal movement</button>
|
|
</li>
|
|
<li>
|
|
<button id="lock-vertically" disabled>Lock vertical movement</button>
|
|
</li>
|
|
<li>
|
|
<button id="lock-scaling" disabled>Lock scaling</button>
|
|
</li>
|
|
<li>
|
|
<button id="lock-rotation" disabled>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="1" id="drawing-line-width" size="2">
|
|
Color:
|
|
<input value="rgb(0,0,0)" id="drawing-color" size="10">
|
|
</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>
|
|
<script src="demo.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |