Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-26 08:24:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1168 from aspectit/css-scale-new

Browse source 
Fix mouse handling if the canvas has been scaled via CSS.
This commit is contained in:
Juriy Zaytsev 2014-02-18 11:58:29 -05:00
commit 7ded46ce7f
3 changed files with 33 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/canvas.class.js
View file

@ -255,7 +255,7 @@
// http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
// http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
return (target.containsPoint(xy) || target._findTargetCorner(e, this._offset));
return (target.containsPoint(xy) || target._findTargetCorner(pointer));
},
/**
@ -402,8 +402,8 @@
_setupCurrentTransform: function (e, target) {
if (!target) return;
var corner = target._findTargetCorner(e, this._offset),
pointer = getPointer(e, target.canvas.upperCanvasEl),
var pointer = this.getPointer(e),
corner = target._findTargetCorner(pointer),
action = this._getActionFromCorner(target, corner),
origin = this._getOriginFromCorner(target, corner);
@ -465,7 +465,6 @@
*/
_scaleObject: function (x, y, by) {
var t = this._currentTransform,
offset = this._offset,
target = t.target,
lockScalingX = target.get('lockScalingX'),
lockScalingY = target.get('lockScalingY');
@ -474,7 +473,7 @@
// Get the constraint point
var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),
localMouse = target.toLocalPoint(new fabric.Point(x - offset.left, y - offset.top), t.originX, t.originY);
localMouse = target.toLocalPoint(new fabric.Point(x, y), t.originX, t.originY);
this._setLocalMouse(localMouse, t);
@ -619,13 +618,12 @@
*/
_rotateObject: function (x, y) {
var t = this._currentTransform,
o = this._offset;
var t = this._currentTransform;
if (t.target.get('lockRotation')) return;
var lastAngle = atan2(t.ey - t.top - o.top, t.ex - t.left - o.left),
curAngle = atan2(y - t.top - o.top, x - t.left - o.left),
var lastAngle = atan2(t.ey - t.top, t.ex - t.left),
curAngle = atan2(y - t.top, x - t.left),
angle = radiansToDegrees(curAngle - lastAngle + t.theta);
// normalize angle to positive value
@ -710,7 +708,7 @@
this.lastRenderedObjectWithControlsAboveOverlay &&
this.lastRenderedObjectWithControlsAboveOverlay.visible &&
this.containsPoint(e, this.lastRenderedObjectWithControlsAboveOverlay) &&
this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(e, this._offset));
this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(this.getPointer(e)));
},
/**
@ -812,9 +810,20 @@
*/
getPointer: function (e) {
var pointer = getPointer(e, this.upperCanvasEl);
var bounds = this.upperCanvasEl.getBoundingClientRect();
var cssScale;
if (bounds.width === 0 || bounds.height === 0) {
// If bounds are not available (i.e. not visible), do not apply scale.
cssScale = {width: 1, height: 1};
} else {
cssScale = {
width: this.upperCanvasEl.width / bounds.width,
height: this.upperCanvasEl.height / bounds.height,
};
}
return {
x: pointer.x - this._offset.left,
y: pointer.y - this._offset.top
x: (pointer.x - this._offset.left) * cssScale.width,
y: (pointer.y - this._offset.top) * cssScale.height
};
},

15
src/mixins/canvas_events.mixin.js
View file

@ -21,8 +21,7 @@
tl: 7 // nw
},
addListener = fabric.util.addListener,
removeListener = fabric.util.removeListener,
getPointer = fabric.util.getPointer;
removeListener = fabric.util.removeListener;
fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
@ -404,7 +403,7 @@
this.stateful && target.saveState();
// determine if it's a drag or rotate case
if ((corner = target._findTargetCorner(e, this._offset))) {
if ((corner = target._findTargetCorner(this.getPointer(e)))) {
this.onBeforeScaleRotate(target);
}
@ -495,10 +494,10 @@
// We initially clicked in an empty area, so we draw a box for multiple selection
if (groupSelector) {
pointer = getPointer(e, this.upperCanvasEl);
pointer = this.getPointer(e);
groupSelector.left = pointer.x - this._offset.left - groupSelector.ex;
groupSelector.top = pointer.y - this._offset.top - groupSelector.ey;
groupSelector.left = pointer.x - groupSelector.ex;
groupSelector.top = pointer.y - groupSelector.ey;
this.renderTop();
}
@ -527,7 +526,7 @@
*/
_transformObject: function(e) {
var pointer = getPointer(e, this.upperCanvasEl),
var pointer = this.getPointer(e),
transform = this._currentTransform;
transform.reset = false,
@ -636,7 +635,7 @@
// only show proper corner when group selection is not active
corner = target._findTargetCorner
&& (!activeGroup || !activeGroup.contains(target))
&& target._findTargetCorner(e, this._offset);
&& target._findTargetCorner(this.getPointer(e));
if (!corner) {
style.cursor = target.hoverCursor || this.hoverCursor;

13
src/mixins/object_interactivity.mixin.js
View file

@ -1,7 +1,6 @@
(function(){
var getPointer = fabric.util.getPointer,
degreesToRadians = fabric.util.degreesToRadians,
var degreesToRadians = fabric.util.degreesToRadians,
isVML = typeof G_vmlCanvasManager !== 'undefined';
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
@ -15,16 +14,14 @@
/**
* Determines which corner has been clicked
* @private
* @param {Event} e Event object
* @param {Object} offset Canvas offset
* @param {Object} pointer The pointer indicating the mouse position
* @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
*/
_findTargetCorner: function(e, offset) {
_findTargetCorner: function(pointer) {
if (!this.hasControls || !this.active) return false;
var pointer = getPointer(e, this.canvas.upperCanvasEl),
ex = pointer.x - offset.left,
ey = pointer.y - offset.top,
var ex = pointer.x,
ey = pointer.y,
xPoints,
lines;