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

Support for pinch gesture to scale and rotate objects using Event.js.

Browse source
This commit is contained in:
Jaffer Haider 2013-01-08 16:04:38 +05:00
parent 7ee772a322
commit 20a87c6609
2 changed files with 1978 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1904
lib/event.js Normal file
View file

File diff suppressed because it is too large Load diff

74
src/canvas.class.js
View file

@ -233,12 +233,41 @@
if (fabric.isTouchSupported) {
addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
if('undefined' !== typeof Event && 'add' in Event) {
Event.add(this.upperCanvasEl, 'gesture', function(e, s) {
_this.__onTransformGesture(e, s);
});
}
}
else {
addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
}
},
/**
* Method that defines actions when an Event.js gesture is detected on an object. Currently only supports
* 2 finger gestures.
*
* @method __onTransformGesture
* @param e Event object by Event.js
* @param self Event proxy object by Event.js
*/
__onTransformGesture: function(e, self) {
if (this.isDrawingMode || e.touches.length !== 2 || 'gesture' !== self.gesture) {
return;
}
var target = this.findTarget(e);
if ('undefined' !== typeof target) {
this.onBeforeScaleRotate(target);
this._rotateObjectByAngle(self.rotation);
this._scaleObjectBy(self.scale);
}
this.fire('touch:gesture', {target: target, e: e, self: self});
},
/**
* Method that defines the actions when mouse is released on canvas.
@ -985,6 +1014,39 @@
// Make sure the constraints apply
target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
},
/**
* Scales an object by a factor
* @param s {Number} The scale factor to apply to the current scale level
* @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
* When not provided, an object is scaled by both dimensions equally
*/
_scaleObjectBy: function(s, by) {
var t = this._currentTransform,
target = t.target;
var lockScalingX = target.get('lockScalingX'),
lockScalingY = target.get('lockScalingY');
if (lockScalingX && lockScalingY)
return;
target._scaling = true;
if (!by) {
if (!lockScalingX) {
target.set('scaleX', t.scaleX * s);
}
if (!lockScalingY) {
target.set('scaleY', t.scaleY * s);
}
}
else if (by === 'x' && !target.get('lockUniScaling')) {
lockScalingX || target.set('scaleX', t.scaleX * s);
}
else if (by === 'y' && !target.get('lockUniScaling')) {
lockScalingY || target.set('scaleY', t.scaleY * s);
}
},
/**
* Rotates object by invoking its rotate method
@ -1004,6 +1066,18 @@
t.target.angle = radiansToDegrees(curAngle - lastAngle + t.theta);
},
/**
* Rotates object by an angle
* @param curAngle {Number} the angle of rotation in degrees
*/
_rotateObjectByAngle: function(curAngle) {
var t = this._currentTransform;
if (t.target.get('lockRotation'))
return;
t.target.angle = radiansToDegrees(degreesToRadians(curAngle) + t.theta);
},
/**
* @method _setCursor