Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-02 02:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

"mouse:down" and "mouse:up" events are now being passed clicked target (when one exists). Add example with opacity and no boundaries (transparent boundaries) on an object.

Browse source
This commit is contained in:
kangax 2011-06-30 14:46:30 -04:00
parent a64f622e61
commit dcb6ac67a5
3 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
demos/customization/index.html
View file

@ -32,6 +32,11 @@
<h3>Custom object boundaries</h3>
<canvas id="c3" width="200" height="200"></canvas>
</div>
<div class="block">
<h3>No object boundaries + opacity on move</h3>
<canvas id="c10" width="200" height="200"></canvas>
</div>
<div class="block">
<h3>Unselectable canvas</h3>
@ -87,6 +92,30 @@
canvas3.item(0).cornerColor = 'green';
canvas3.item(0).cornersize = 6;
var canvas10 = new fabric.Canvas('c10');
canvas10.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas10.item(0).borderColor = 'rgba(0,0,0,0)';
canvas10.item(0).cornerColor = 'rgba(0,0,0,0)';
canvas10.observe('mouse:down', function(e) {
if (e.memo.target) {
e.memo.target.opacity = 0.5;
canvas10.renderAll();
}
});
canvas10.observe('mouse:up', function(e) {
if (e.memo.target) {
e.memo.target.opacity = 1;
canvas10.renderAll();
}
});
canvas10.observe('object:moved', function(e) {
e.memo.target.opacity = 0.5;
});
canvas10.observe('object:modified', function(e) {
e.memo.target.opacity = 1;
});
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 }));

4
dist/all.js vendored
View file

@ -4415,7 +4415,7 @@ fabric.util.animate = animate;
_this._setCursorFromEvent(e, target);
}, 50);
this.fire('mouse:up');
this.fire('mouse:up', { target: target });
},
_shouldClearSelection: function (e) {
@ -4493,7 +4493,7 @@ fabric.util.animate = animate;
}
this.renderAll();
this.fire('mouse:down');
this.fire('mouse:down', { target: target });
},
/**

4
src/canvas.class.js
View file

@ -553,7 +553,7 @@
_this._setCursorFromEvent(e, target);
}, 50);
this.fire('mouse:up');
this.fire('mouse:up', { target: target });
},
_shouldClearSelection: function (e) {
@ -637,7 +637,7 @@
// we must renderAll so that active image is placed on the top canvas
this.renderAll();
this.fire('mouse:down');
this.fire('mouse:down', { target: target });
},
/**