Permalink
Browse files

Add clipping option to kitchesink

  • Loading branch information...
1 parent 3a0e95c commit 2bb56695ace8024b47b58267ccb6cf3202e6a311 @kangax committed Mar 10, 2013
Showing with 650 additions and 180 deletions.
  1. +36 −16 js/kitchensink.js
  2. +613 −164 lib/fabric.js
  3. +1 −0 posts/demos/_posts/2011-9-1-kitchensink.html
View
@@ -338,7 +338,8 @@
};
var gradientifyBtn = document.getElementById('gradientify'),
- shadowifyBtn = document.getElementById('shadowify');
+ shadowifyBtn = document.getElementById('shadowify'),
+ clipBtn = document.getElementById('clip');
var activeObjectButtons = [
lockHorizontallyEl,
@@ -348,7 +349,8 @@
lockRotationEl,
removeSelectedEl,
gradientifyBtn,
- shadowifyBtn
+ shadowifyBtn,
+ clipBtn
];
var opacityEl = document.getElementById('opacity');
@@ -587,7 +589,9 @@
gradientifyBtn.onclick = function() {
var obj = canvas.getActiveObject();
if (obj) {
- obj.setGradientFill({
+ obj.setGradient('fill', {
+ x1: 0,
+ y1: 0,
x2: (getRandomInt(0, 1) ? 0 : obj.width),
y2: (getRandomInt(0, 1) ? 0 : obj.height),
colorStops: {
@@ -601,20 +605,36 @@
shadowifyBtn.onclick = function() {
var obj = canvas.getActiveObject();
- if (obj) {
- if (obj.shadow) {
- obj.shadow = null;
- }
- else {
- obj.setShadow({
- color: 'rgba(0,0,0,0.3)',
- blur: 10,
- offsetX: 10,
- offsetY: 10
- });
- }
- canvas.renderAll();
+ if (!obj) return;
+
+ if (obj.shadow) {
+ obj.shadow = null;
}
+ else {
+ obj.setShadow({
+ color: 'rgba(0,0,0,0.3)',
+ blur: 10,
+ offsetX: 10,
+ offsetY: 10
+ });
+ }
+ canvas.renderAll();
+ };
+
+ clipBtn.onclick = function() {
+ var obj = canvas.getActiveObject();
+ if (!obj) return;
+
+ if (obj.clipTo) {
+ obj.clipTo = null;
+ }
+ else {
+ var radius = obj.width < obj.height ? (obj.width / 2) : (obj.height / 2);
+ obj.clipTo = function (ctx) {
+ ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
+ };
+ }
+ canvas.renderAll();
};
var textEl = document.getElementById('text');
Oops, something went wrong.

0 comments on commit 2bb5669

Please sign in to comment.