mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-05 04:14:54 +00:00
124 lines
4.6 KiB
HTML
124 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Animating crosses (custom class)</title>
|
|
<script src="../../dist/all.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 }
|
|
.block { float: left; margin-right: 20px; width: 260px; height: 270px; }
|
|
</style>
|
|
<link rel="stylesheet" href="../../lib/master.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> · Customizing canvas</h2>
|
|
|
|
<div class="block">
|
|
<h3>Custom selection style</h3>
|
|
<canvas id="c1" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Custom object boundaries</h3>
|
|
<canvas id="c3" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Unselectable canvas</h3>
|
|
<canvas id="c2" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Unselectable object</h3>
|
|
<canvas id="c4" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Custom canvas background</h3>
|
|
<canvas id="c5" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Locked object rotation</h3>
|
|
<canvas id="c6" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Locked object scaling</h3>
|
|
<canvas id="c7" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Locked X movement</h3>
|
|
<canvas id="c8" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h3>Locked Y movement</h3>
|
|
<canvas id="c9" width="200" height="200"></canvas>
|
|
</div>
|
|
|
|
<script id="main">
|
|
var canvas1 = new fabric.Canvas('c1');
|
|
canvas1.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
|
|
|
|
canvas1.selectionColor = 'rgba(0,255,0,0.3)';
|
|
canvas1.selectionBorderColor = 'red';
|
|
canvas1.selectionLineWidth = 5;
|
|
|
|
var canvas2 = new fabric.Canvas('c2');
|
|
canvas2.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
|
|
canvas2.selection = false;
|
|
|
|
var canvas3 = new fabric.Canvas('c3');
|
|
canvas3.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
|
|
|
|
canvas3.item(0).borderColor = 'red';
|
|
canvas3.item(0).cornerColor = 'green';
|
|
canvas3.item(0).cornersize = 6;
|
|
|
|
var canvas4 = new fabric.Canvas('c4');
|
|
canvas4.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
|
|
canvas4.add(new fabric.Rect({ left: 50, top: 50, fill: 'green', width: 30, height: 30 }));
|
|
canvas4.add(new fabric.Rect({ left: 150, top: 50, fill: 'green', width: 30, height: 30 }));
|
|
canvas4.add(new fabric.Rect({ left: 150, top: 150, fill: 'green', width: 30, height: 30 }));
|
|
canvas4.add(new fabric.Rect({ left: 50, top: 150, fill: 'green', width: 30, height: 30 }));
|
|
|
|
canvas4.item(0).selectable = false;
|
|
|
|
var canvas5 = new fabric.Canvas('c5');
|
|
canvas5.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
|
|
canvas5.backgroundColor = 'rgba(0,0,255,0.3)';
|
|
canvas5.renderAll();
|
|
|
|
var canvas6 = new fabric.Canvas('c6');
|
|
canvas6.add(new fabric.Rect({ width: 50, height: 50, fill: '#55f', top: 100, left: 100 }));
|
|
canvas6.item(0).lockRotation = true;
|
|
|
|
var canvas7 = new fabric.Canvas('c7');
|
|
canvas7.add(new fabric.Rect({ width: 50, height: 50, fill: '#55f', top: 100, left: 100 }));
|
|
canvas7.item(0).lockScalingX = canvas7.item(0).lockScalingY = true;
|
|
|
|
var canvas8 = new fabric.Canvas('c8');
|
|
canvas8.add(new fabric.Rect({ width: 50, height: 50, fill: '#55f', top: 100, left: 100 }));
|
|
canvas8.item(0).lockMovementX = true;
|
|
|
|
var canvas9 = new fabric.Canvas('c9');
|
|
canvas9.add(new fabric.Rect({ width: 50, height: 50, fill: '#55f', top: 100, left: 100 }));
|
|
canvas9.item(0).lockMovementY = true;
|
|
|
|
</script>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|