mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-27 22:44:00 +00:00
78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Event inspector</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 }
|
|
p { margin-top: 3px; margin-bottom: 3px; }
|
|
#log1, #log2 { display: inline-block; width: 200px; height: 500px; overflow-y: auto; font-family: monospace; font-size: 11px; }
|
|
</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="../../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> · Event inspector</h2>
|
|
|
|
<canvas id="c1" width="200" height="200"></canvas>
|
|
<canvas id="c2" width="200" height="200"></canvas>
|
|
|
|
<div>
|
|
<div id="log1"> </div>
|
|
<div id="log2"> </div>
|
|
</div>
|
|
|
|
<script id="main">
|
|
var canvas1 = new fabric.Element('c1');
|
|
canvas1.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
|
|
canvas1.add(new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50, left: 50 }));
|
|
|
|
var canvas2 = new fabric.Element('c2');
|
|
canvas2.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
|
|
canvas2.add(new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50, left: 50 }));
|
|
|
|
var log1 = document.getElementById('log1');
|
|
var log2 = document.getElementById('log2');
|
|
|
|
function log(message, where) {
|
|
var el = document.createElement('p');
|
|
el.appendChild(document.createTextNode(message));
|
|
var containerEl = (where === 1 ? log1 : log2);
|
|
containerEl.insertBefore(el, containerEl.firstChild);
|
|
}
|
|
|
|
function observe(eventName) {
|
|
canvas1.observe(eventName, function(){ log(eventName, 1) });
|
|
canvas2.observe(eventName, function(){ log(eventName, 2) });
|
|
}
|
|
|
|
observe('object:modified');
|
|
observe('object:moved');
|
|
observe('object:scaled');
|
|
observe('object:selected');
|
|
|
|
observe('selection:cleared');
|
|
|
|
observe('group:modified');
|
|
observe('group:selected');
|
|
observe('before:group:destroyed');
|
|
observe('after:group:destroyed');
|
|
|
|
// observe('after:render');
|
|
observe('mouse:up');
|
|
observe('mouse:down');
|
|
|
|
</script>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|