mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-24 13:13:44 +00:00
[BACK_INCOMPAT] fabric.Canvas#getContext now returns context of canvas element on which all objects are drawn. fabric.Canvas#getSelectionContext returns context of canvas element on which object selection is drawn.
This commit is contained in:
kangax
parent
35fcc980da
commit
5a2eb2e3df
7 changed files with 173 additions and 155 deletions
161
dist/all.js
vendored
161
dist/all.js
vendored
|
|
@ -4857,6 +4857,15 @@ fabric.util.string = {
|
|||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns context of canvas where objects are drawn
|
||||
* @method getContext
|
||||
* @return {CanvasRenderingContext2D}
|
||||
*/
|
||||
getContext: function () {
|
||||
return this.contextContainer;
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears all contexts (background, main, top) of an instance
|
||||
* @method clear
|
||||
|
|
@ -5438,7 +5447,7 @@ fabric.util.string = {
|
|||
})(typeof exports != 'undefined' ? exports : this);
|
||||
|
||||
(function() {
|
||||
|
||||
|
||||
var extend = fabric.util.object.extend,
|
||||
getPointer = fabric.util.getPointer,
|
||||
addListener = fabric.util.addListener,
|
||||
|
|
@ -5453,41 +5462,41 @@ fabric.util.string = {
|
|||
'mr': 'e-resize',
|
||||
'mb': 's-resize'
|
||||
},
|
||||
|
||||
|
||||
utilMin = fabric.util.array.min,
|
||||
utilMax = fabric.util.array.max,
|
||||
|
||||
|
||||
sqrt = Math.sqrt,
|
||||
pow = Math.pow,
|
||||
atan2 = Math.atan2,
|
||||
abs = Math.abs,
|
||||
min = Math.min,
|
||||
max = Math.max,
|
||||
|
||||
|
||||
STROKE_OFFSET = 0.5;
|
||||
|
||||
|
||||
/**
|
||||
* @class fabric.Canvas
|
||||
* @constructor
|
||||
* @extends fabric.StaticCanvas
|
||||
* @param {HTMLElement | String} el <canvas> element to initialize instance on
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
*/
|
||||
fabric.Canvas = function(el, options) {
|
||||
options || (options = { });
|
||||
|
||||
this._initStatic(el, options);
|
||||
this._initInteractive();
|
||||
|
||||
|
||||
fabric.Canvas.activeInstance = this;
|
||||
};
|
||||
|
||||
|
||||
function ProtoProxy(){ }
|
||||
ProtoProxy.prototype = fabric.StaticCanvas.prototype;
|
||||
fabric.Canvas.prototype = new ProtoProxy;
|
||||
|
||||
|
||||
var InteractiveMethods = /** @scope fabric.Canvas.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* Indicates that canvas is interactive. This property should not be changed.
|
||||
* @property
|
||||
|
|
@ -5550,14 +5559,14 @@ fabric.util.string = {
|
|||
* @type String
|
||||
*/
|
||||
CURSOR: 'default',
|
||||
|
||||
|
||||
/**
|
||||
* Default element class that's given to wrapper (div) element of canvas
|
||||
* @constant
|
||||
* @type String
|
||||
*/
|
||||
CONTAINER_CLASS: 'canvas-container',
|
||||
|
||||
|
||||
_initInteractive: function() {
|
||||
this._currentTransform = null;
|
||||
this._groupSelector = null;
|
||||
|
|
@ -5568,7 +5577,7 @@ fabric.util.string = {
|
|||
this._initEvents();
|
||||
this.calcOffset();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Adds mouse listeners to canvas
|
||||
* @method _initEvents
|
||||
|
|
@ -5604,12 +5613,12 @@ fabric.util.string = {
|
|||
fabric.isTouchSupported && addListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove);
|
||||
};
|
||||
|
||||
this._onMouseMove = function (e) {
|
||||
this._onMouseMove = function (e) {
|
||||
e.preventDefault && e.preventDefault();
|
||||
_this.__onMouseMove(e);
|
||||
};
|
||||
|
||||
this._onResize = function (e) {
|
||||
this._onResize = function (e) {
|
||||
_this.calcOffset();
|
||||
};
|
||||
|
||||
|
|
@ -5722,7 +5731,7 @@ fabric.util.string = {
|
|||
|
||||
var target = this.findTarget(e),
|
||||
pointer = this.getPointer(e),
|
||||
activeGroup = this.getActiveGroup(),
|
||||
activeGroup = this.getActiveGroup(),
|
||||
corner;
|
||||
|
||||
if (this._shouldClearSelection(e)) {
|
||||
|
|
@ -5803,7 +5812,7 @@ fabric.util.string = {
|
|||
// performance.
|
||||
var target = this.findTarget(e);
|
||||
|
||||
if (!target) {
|
||||
if (!target) {
|
||||
// image/text was hovered-out from, we remove its borders
|
||||
for (var i = this._objects.length; i--; ) {
|
||||
if (this._objects[i] && !this._objects[i].active) {
|
||||
|
|
@ -5813,7 +5822,7 @@ fabric.util.string = {
|
|||
style.cursor = this.CURSOR;
|
||||
}
|
||||
else {
|
||||
// set proper cursor
|
||||
// set proper cursor
|
||||
this._setCursorFromEvent(e, target);
|
||||
if (target.isActive()) {
|
||||
// display corners when hovering over an image
|
||||
|
|
@ -5823,14 +5832,14 @@ fabric.util.string = {
|
|||
}
|
||||
else {
|
||||
// object is being transformed (scaled/rotated/moved/etc.)
|
||||
var pointer = getPointer(e),
|
||||
x = pointer.x,
|
||||
var pointer = getPointer(e),
|
||||
x = pointer.x,
|
||||
y = pointer.y;
|
||||
|
||||
this._currentTransform.target.isMoving = true;
|
||||
|
||||
if (this._currentTransform.action === 'rotate') {
|
||||
// rotate object only if shift key is not pressed
|
||||
if (this._currentTransform.action === 'rotate') {
|
||||
// rotate object only if shift key is not pressed
|
||||
// and if it is not a group we are transforming
|
||||
|
||||
if (!e.shiftKey) {
|
||||
|
|
@ -5883,7 +5892,7 @@ fabric.util.string = {
|
|||
containsPoint: function (e, target) {
|
||||
var pointer = this.getPointer(e),
|
||||
xy = this._normalizePointer(target, pointer),
|
||||
x = xy.x,
|
||||
x = xy.x,
|
||||
y = xy.y;
|
||||
|
||||
// http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
|
||||
|
|
@ -5907,13 +5916,13 @@ fabric.util.string = {
|
|||
*/
|
||||
_normalizePointer: function (object, pointer) {
|
||||
|
||||
var activeGroup = this.getActiveGroup(),
|
||||
x = pointer.x,
|
||||
var activeGroup = this.getActiveGroup(),
|
||||
x = pointer.x,
|
||||
y = pointer.y;
|
||||
|
||||
var isObjectInGroup = (
|
||||
activeGroup &&
|
||||
object.type !== 'group' &&
|
||||
activeGroup &&
|
||||
object.type !== 'group' &&
|
||||
activeGroup.contains(object)
|
||||
);
|
||||
|
||||
|
|
@ -5933,10 +5942,10 @@ fabric.util.string = {
|
|||
activeGroup = this.getActiveGroup();
|
||||
return (
|
||||
!target || (
|
||||
target &&
|
||||
activeGroup &&
|
||||
!activeGroup.contains(target) &&
|
||||
activeGroup !== target &&
|
||||
target &&
|
||||
activeGroup &&
|
||||
!activeGroup.contains(target) &&
|
||||
activeGroup !== target &&
|
||||
!e.shiftKey
|
||||
)
|
||||
);
|
||||
|
|
@ -5947,15 +5956,15 @@ fabric.util.string = {
|
|||
* @method _setupCurrentTransform
|
||||
*/
|
||||
_setupCurrentTransform: function (e, target) {
|
||||
var action = 'drag',
|
||||
var action = 'drag',
|
||||
corner,
|
||||
pointer = getPointer(e);
|
||||
|
||||
if (corner = target._findTargetCorner(e, this._offset)) {
|
||||
action = (corner === 'ml' || corner === 'mr')
|
||||
? 'scaleX'
|
||||
: (corner === 'mt' || corner === 'mb')
|
||||
? 'scaleY'
|
||||
action = (corner === 'ml' || corner === 'mr')
|
||||
? 'scaleX'
|
||||
: (corner === 'mt' || corner === 'mb')
|
||||
? 'scaleY'
|
||||
: 'rotate';
|
||||
}
|
||||
|
||||
|
|
@ -5968,7 +5977,7 @@ fabric.util.string = {
|
|||
offsetY: pointer.y - target.top,
|
||||
ex: pointer.x,
|
||||
ey: pointer.y,
|
||||
left: target.left,
|
||||
left: target.left,
|
||||
top: target.top,
|
||||
theta: target.theta,
|
||||
width: target.width * target.scaleX
|
||||
|
|
@ -6090,7 +6099,7 @@ fabric.util.string = {
|
|||
path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
|
||||
}
|
||||
|
||||
// TODO (kangax): maybe remove Path creation from here, to decouple fabric.Canvas from fabric.Path,
|
||||
// TODO (kangax): maybe remove Path creation from here, to decouple fabric.Canvas from fabric.Path,
|
||||
// and instead fire something like "drawing:completed" event with path string
|
||||
|
||||
path = path.join('');
|
||||
|
|
@ -6129,9 +6138,9 @@ fabric.util.string = {
|
|||
* @method _scaleObject
|
||||
* @param x {Number} pointer's x coordinate
|
||||
* @param y {Number} pointer's y coordinate
|
||||
* @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
|
||||
* @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
|
||||
*/
|
||||
*/
|
||||
_scaleObject: function (x, y, by) {
|
||||
var t = this._currentTransform,
|
||||
offset = this._offset,
|
||||
|
|
@ -6161,10 +6170,10 @@ fabric.util.string = {
|
|||
* @method _rotateObject
|
||||
* @param x {Number} pointer's x coordinate
|
||||
* @param y {Number} pointer's y coordinate
|
||||
*/
|
||||
*/
|
||||
_rotateObject: function (x, y) {
|
||||
|
||||
var t = this._currentTransform,
|
||||
var t = this._currentTransform,
|
||||
o = this._offset;
|
||||
|
||||
if (t.target.lockRotation) return;
|
||||
|
|
@ -6198,8 +6207,8 @@ fabric.util.string = {
|
|||
else {
|
||||
var activeGroup = this.getActiveGroup();
|
||||
// only show proper corner when group selection is not active
|
||||
var corner = !!target._findTargetCorner
|
||||
&& (!activeGroup || !activeGroup.contains(target))
|
||||
var corner = !!target._findTargetCorner
|
||||
&& (!activeGroup || !activeGroup.contains(target))
|
||||
&& target._findTargetCorner(e, this._offset);
|
||||
|
||||
if (!corner) {
|
||||
|
|
@ -6234,7 +6243,7 @@ fabric.util.string = {
|
|||
this.contextTop.fillRect(
|
||||
groupSelector.ex - ((left > 0) ? 0 : -left),
|
||||
groupSelector.ey - ((top > 0) ? 0 : -top),
|
||||
aleft,
|
||||
aleft,
|
||||
atop
|
||||
);
|
||||
|
||||
|
|
@ -6242,7 +6251,7 @@ fabric.util.string = {
|
|||
this.contextTop.strokeStyle = this.selectionBorderColor;
|
||||
|
||||
this.contextTop.strokeRect(
|
||||
groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
|
||||
groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
|
||||
groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop),
|
||||
aleft,
|
||||
atop
|
||||
|
|
@ -6250,7 +6259,7 @@ fabric.util.string = {
|
|||
},
|
||||
|
||||
_findSelectedObjects: function (e) {
|
||||
var target,
|
||||
var target,
|
||||
targetRegion,
|
||||
group = [ ],
|
||||
x1 = this._groupSelector.ex,
|
||||
|
|
@ -6266,7 +6275,7 @@ fabric.util.string = {
|
|||
|
||||
if (!currentObject) continue;
|
||||
|
||||
if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
|
||||
if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
|
||||
currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) {
|
||||
|
||||
if (this.selection && currentObject.selectable) {
|
||||
|
|
@ -6279,7 +6288,7 @@ fabric.util.string = {
|
|||
// do not create group for 1 element only
|
||||
if (group.length === 1) {
|
||||
this.setActiveObject(group[0], e);
|
||||
}
|
||||
}
|
||||
else if (group.length > 1) {
|
||||
var group = new fabric.Group(group);
|
||||
this.setActiveGroup(group);
|
||||
|
|
@ -6295,7 +6304,7 @@ fabric.util.string = {
|
|||
* @method findTarget
|
||||
* @param {Event} e mouse event
|
||||
* @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through
|
||||
*/
|
||||
*/
|
||||
findTarget: function (e, skipGroup) {
|
||||
|
||||
var target,
|
||||
|
|
@ -6334,7 +6343,7 @@ fabric.util.string = {
|
|||
y: pointer.y - this._offset.top
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @method _createUpperCanvas
|
||||
* @param {HTMLElement|String} canvasEl Canvas element
|
||||
|
|
@ -6343,13 +6352,13 @@ fabric.util.string = {
|
|||
_createUpperCanvas: function () {
|
||||
this.upperCanvasEl = this._createCanvasElement();
|
||||
this.upperCanvasEl.className = 'upper-canvas';
|
||||
|
||||
|
||||
this.wrapperEl.appendChild(this.upperCanvasEl);
|
||||
|
||||
|
||||
this._applyCanvasStyle(this.upperCanvasEl);
|
||||
this.contextTop = this.upperCanvasEl.getContext('2d');
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @method _initWrapperElement
|
||||
|
|
@ -6357,7 +6366,7 @@ fabric.util.string = {
|
|||
* @param {Number} height
|
||||
*/
|
||||
_initWrapperElement: function () {
|
||||
this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
|
||||
this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
|
||||
'class': this.CONTAINER_CLASS
|
||||
});
|
||||
fabric.util.setStyle(this.wrapperEl, {
|
||||
|
|
@ -6367,7 +6376,7 @@ fabric.util.string = {
|
|||
});
|
||||
fabric.util.makeElementUnselectable(this.wrapperEl);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @method _applyCanvasStyle
|
||||
|
|
@ -6376,7 +6385,7 @@ fabric.util.string = {
|
|||
_applyCanvasStyle: function (element) {
|
||||
var width = this.getWidth() || element.width,
|
||||
height = this.getHeight() || element.height;
|
||||
|
||||
|
||||
fabric.util.setStyle(element, {
|
||||
position: 'absolute',
|
||||
width: width + 'px',
|
||||
|
|
@ -6388,16 +6397,16 @@ fabric.util.string = {
|
|||
element.height = height;
|
||||
fabric.util.makeElementUnselectable(element);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns topmost canvas context
|
||||
* Returns context of canvas where object selection is drawn
|
||||
* @method getContext
|
||||
* @return {CanvasRenderingContext2D}
|
||||
*/
|
||||
getContext: function () {
|
||||
getSelectionContext: function() {
|
||||
return this.contextTop;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Sets given object as active
|
||||
* @method setActiveObject
|
||||
|
|
@ -6411,13 +6420,13 @@ fabric.util.string = {
|
|||
}
|
||||
this._activeObject = object;
|
||||
object.setActive(true);
|
||||
|
||||
|
||||
this.renderAll();
|
||||
|
||||
|
||||
this.fire('object:selected', { target: object, e: e });
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns currently active object
|
||||
* @method getActiveObject
|
||||
|
|
@ -6426,7 +6435,7 @@ fabric.util.string = {
|
|||
getActiveObject: function () {
|
||||
return this._activeObject;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Discards currently active object
|
||||
* @method discardActiveObject
|
||||
|
|
@ -6440,11 +6449,11 @@ fabric.util.string = {
|
|||
this._activeObject = null;
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Sets active group to a speicified one
|
||||
* @method setActiveGroup
|
||||
* @param {fabric.Group} group Group to set as a current one
|
||||
* @param {fabric.Group} group Group to set as a current one
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
|
|
@ -6452,7 +6461,7 @@ fabric.util.string = {
|
|||
this._activeGroup = group;
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns currently active group
|
||||
* @method getActiveGroup
|
||||
|
|
@ -6461,7 +6470,7 @@ fabric.util.string = {
|
|||
getActiveGroup: function () {
|
||||
return this._activeGroup;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Removes currently active group
|
||||
* @method discardActiveGroup
|
||||
|
|
@ -6474,7 +6483,7 @@ fabric.util.string = {
|
|||
}
|
||||
return this.setActiveGroup(null);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Deactivates all objects by calling their setActive(false)
|
||||
* @method deactivateAll
|
||||
|
|
@ -6491,7 +6500,7 @@ fabric.util.string = {
|
|||
this.discardActiveObject();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Deactivates all objects and dispatches appropriate events
|
||||
* @method deactivateAllWithDispatch
|
||||
|
|
@ -6509,22 +6518,22 @@ fabric.util.string = {
|
|||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
fabric.Canvas.prototype.toString = fabric.StaticCanvas.prototype.toString;
|
||||
extend(fabric.Canvas.prototype, InteractiveMethods);
|
||||
|
||||
// iterating manually to workaround Opera's bug
|
||||
|
||||
// iterating manually to workaround Opera's bug
|
||||
// where "prototype" property is enumerable and overrides existing prototype
|
||||
for (var prop in fabric.StaticCanvas) {
|
||||
if (prop !== 'prototype') {
|
||||
fabric.Canvas[prop] = fabric.StaticCanvas[prop];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (fabric.isTouchSupported) {
|
||||
fabric.Canvas.prototype._setCursorFromEvent = function() { };
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @class fabric.Element
|
||||
* @alias fabric.Canvas
|
||||
|
|
|
|||
2
dist/all.min.js
vendored
2
dist/all.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/all.min.js.gz
vendored
BIN
dist/all.min.js.gz
vendored
Binary file not shown.
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
function initAligningGuidelines(canvas) {
|
||||
|
||||
var ctx = canvas.getContext(),
|
||||
var ctx = canvas.getSelectionContext(),
|
||||
canvasHeight = canvas.getHeight(),
|
||||
aligningLineOffset = 5,
|
||||
aligningLineMargin = 4,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function initCenteringGuidelines(canvas) {
|
|||
centerLineMargin = 4,
|
||||
centerLineColor = 'rgba(255,0,241,0.5)',
|
||||
centerLineWidth = 1,
|
||||
ctx = canvas.getContext();
|
||||
ctx = canvas.getSelectionContext();
|
||||
|
||||
for (var i = canvasWidthCenter - centerLineMargin, len = canvasWidthCenter + centerLineMargin; i <= len; i++) {
|
||||
canvasWidthCenterMap[i] = true;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
(function() {
|
||||
|
||||
|
||||
var extend = fabric.util.object.extend,
|
||||
getPointer = fabric.util.getPointer,
|
||||
addListener = fabric.util.addListener,
|
||||
|
|
@ -14,41 +14,41 @@
|
|||
'mr': 'e-resize',
|
||||
'mb': 's-resize'
|
||||
},
|
||||
|
||||
|
||||
utilMin = fabric.util.array.min,
|
||||
utilMax = fabric.util.array.max,
|
||||
|
||||
|
||||
sqrt = Math.sqrt,
|
||||
pow = Math.pow,
|
||||
atan2 = Math.atan2,
|
||||
abs = Math.abs,
|
||||
min = Math.min,
|
||||
max = Math.max,
|
||||
|
||||
|
||||
STROKE_OFFSET = 0.5;
|
||||
|
||||
|
||||
/**
|
||||
* @class fabric.Canvas
|
||||
* @constructor
|
||||
* @extends fabric.StaticCanvas
|
||||
* @param {HTMLElement | String} el <canvas> element to initialize instance on
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
*/
|
||||
fabric.Canvas = function(el, options) {
|
||||
options || (options = { });
|
||||
|
||||
this._initStatic(el, options);
|
||||
this._initInteractive();
|
||||
|
||||
|
||||
fabric.Canvas.activeInstance = this;
|
||||
};
|
||||
|
||||
|
||||
function ProtoProxy(){ }
|
||||
ProtoProxy.prototype = fabric.StaticCanvas.prototype;
|
||||
fabric.Canvas.prototype = new ProtoProxy;
|
||||
|
||||
|
||||
var InteractiveMethods = /** @scope fabric.Canvas.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* Indicates that canvas is interactive. This property should not be changed.
|
||||
* @property
|
||||
|
|
@ -111,14 +111,14 @@
|
|||
* @type String
|
||||
*/
|
||||
CURSOR: 'default',
|
||||
|
||||
|
||||
/**
|
||||
* Default element class that's given to wrapper (div) element of canvas
|
||||
* @constant
|
||||
* @type String
|
||||
*/
|
||||
CONTAINER_CLASS: 'canvas-container',
|
||||
|
||||
|
||||
_initInteractive: function() {
|
||||
this._currentTransform = null;
|
||||
this._groupSelector = null;
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
this._initEvents();
|
||||
this.calcOffset();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Adds mouse listeners to canvas
|
||||
* @method _initEvents
|
||||
|
|
@ -165,12 +165,12 @@
|
|||
fabric.isTouchSupported && addListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove);
|
||||
};
|
||||
|
||||
this._onMouseMove = function (e) {
|
||||
this._onMouseMove = function (e) {
|
||||
e.preventDefault && e.preventDefault();
|
||||
_this.__onMouseMove(e);
|
||||
};
|
||||
|
||||
this._onResize = function (e) {
|
||||
this._onResize = function (e) {
|
||||
_this.calcOffset();
|
||||
};
|
||||
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
|
||||
var target = this.findTarget(e),
|
||||
pointer = this.getPointer(e),
|
||||
activeGroup = this.getActiveGroup(),
|
||||
activeGroup = this.getActiveGroup(),
|
||||
corner;
|
||||
|
||||
if (this._shouldClearSelection(e)) {
|
||||
|
|
@ -364,7 +364,7 @@
|
|||
// performance.
|
||||
var target = this.findTarget(e);
|
||||
|
||||
if (!target) {
|
||||
if (!target) {
|
||||
// image/text was hovered-out from, we remove its borders
|
||||
for (var i = this._objects.length; i--; ) {
|
||||
if (this._objects[i] && !this._objects[i].active) {
|
||||
|
|
@ -374,7 +374,7 @@
|
|||
style.cursor = this.CURSOR;
|
||||
}
|
||||
else {
|
||||
// set proper cursor
|
||||
// set proper cursor
|
||||
this._setCursorFromEvent(e, target);
|
||||
if (target.isActive()) {
|
||||
// display corners when hovering over an image
|
||||
|
|
@ -384,14 +384,14 @@
|
|||
}
|
||||
else {
|
||||
// object is being transformed (scaled/rotated/moved/etc.)
|
||||
var pointer = getPointer(e),
|
||||
x = pointer.x,
|
||||
var pointer = getPointer(e),
|
||||
x = pointer.x,
|
||||
y = pointer.y;
|
||||
|
||||
this._currentTransform.target.isMoving = true;
|
||||
|
||||
if (this._currentTransform.action === 'rotate') {
|
||||
// rotate object only if shift key is not pressed
|
||||
if (this._currentTransform.action === 'rotate') {
|
||||
// rotate object only if shift key is not pressed
|
||||
// and if it is not a group we are transforming
|
||||
|
||||
if (!e.shiftKey) {
|
||||
|
|
@ -444,7 +444,7 @@
|
|||
containsPoint: function (e, target) {
|
||||
var pointer = this.getPointer(e),
|
||||
xy = this._normalizePointer(target, pointer),
|
||||
x = xy.x,
|
||||
x = xy.x,
|
||||
y = xy.y;
|
||||
|
||||
// http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
|
||||
|
|
@ -468,13 +468,13 @@
|
|||
*/
|
||||
_normalizePointer: function (object, pointer) {
|
||||
|
||||
var activeGroup = this.getActiveGroup(),
|
||||
x = pointer.x,
|
||||
var activeGroup = this.getActiveGroup(),
|
||||
x = pointer.x,
|
||||
y = pointer.y;
|
||||
|
||||
var isObjectInGroup = (
|
||||
activeGroup &&
|
||||
object.type !== 'group' &&
|
||||
activeGroup &&
|
||||
object.type !== 'group' &&
|
||||
activeGroup.contains(object)
|
||||
);
|
||||
|
||||
|
|
@ -494,10 +494,10 @@
|
|||
activeGroup = this.getActiveGroup();
|
||||
return (
|
||||
!target || (
|
||||
target &&
|
||||
activeGroup &&
|
||||
!activeGroup.contains(target) &&
|
||||
activeGroup !== target &&
|
||||
target &&
|
||||
activeGroup &&
|
||||
!activeGroup.contains(target) &&
|
||||
activeGroup !== target &&
|
||||
!e.shiftKey
|
||||
)
|
||||
);
|
||||
|
|
@ -508,15 +508,15 @@
|
|||
* @method _setupCurrentTransform
|
||||
*/
|
||||
_setupCurrentTransform: function (e, target) {
|
||||
var action = 'drag',
|
||||
var action = 'drag',
|
||||
corner,
|
||||
pointer = getPointer(e);
|
||||
|
||||
if (corner = target._findTargetCorner(e, this._offset)) {
|
||||
action = (corner === 'ml' || corner === 'mr')
|
||||
? 'scaleX'
|
||||
: (corner === 'mt' || corner === 'mb')
|
||||
? 'scaleY'
|
||||
action = (corner === 'ml' || corner === 'mr')
|
||||
? 'scaleX'
|
||||
: (corner === 'mt' || corner === 'mb')
|
||||
? 'scaleY'
|
||||
: 'rotate';
|
||||
}
|
||||
|
||||
|
|
@ -529,7 +529,7 @@
|
|||
offsetY: pointer.y - target.top,
|
||||
ex: pointer.x,
|
||||
ey: pointer.y,
|
||||
left: target.left,
|
||||
left: target.left,
|
||||
top: target.top,
|
||||
theta: target.theta,
|
||||
width: target.width * target.scaleX
|
||||
|
|
@ -651,7 +651,7 @@
|
|||
path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
|
||||
}
|
||||
|
||||
// TODO (kangax): maybe remove Path creation from here, to decouple fabric.Canvas from fabric.Path,
|
||||
// TODO (kangax): maybe remove Path creation from here, to decouple fabric.Canvas from fabric.Path,
|
||||
// and instead fire something like "drawing:completed" event with path string
|
||||
|
||||
path = path.join('');
|
||||
|
|
@ -690,9 +690,9 @@
|
|||
* @method _scaleObject
|
||||
* @param x {Number} pointer's x coordinate
|
||||
* @param y {Number} pointer's y coordinate
|
||||
* @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
|
||||
* @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
|
||||
*/
|
||||
*/
|
||||
_scaleObject: function (x, y, by) {
|
||||
var t = this._currentTransform,
|
||||
offset = this._offset,
|
||||
|
|
@ -722,10 +722,10 @@
|
|||
* @method _rotateObject
|
||||
* @param x {Number} pointer's x coordinate
|
||||
* @param y {Number} pointer's y coordinate
|
||||
*/
|
||||
*/
|
||||
_rotateObject: function (x, y) {
|
||||
|
||||
var t = this._currentTransform,
|
||||
var t = this._currentTransform,
|
||||
o = this._offset;
|
||||
|
||||
if (t.target.lockRotation) return;
|
||||
|
|
@ -759,8 +759,8 @@
|
|||
else {
|
||||
var activeGroup = this.getActiveGroup();
|
||||
// only show proper corner when group selection is not active
|
||||
var corner = !!target._findTargetCorner
|
||||
&& (!activeGroup || !activeGroup.contains(target))
|
||||
var corner = !!target._findTargetCorner
|
||||
&& (!activeGroup || !activeGroup.contains(target))
|
||||
&& target._findTargetCorner(e, this._offset);
|
||||
|
||||
if (!corner) {
|
||||
|
|
@ -795,7 +795,7 @@
|
|||
this.contextTop.fillRect(
|
||||
groupSelector.ex - ((left > 0) ? 0 : -left),
|
||||
groupSelector.ey - ((top > 0) ? 0 : -top),
|
||||
aleft,
|
||||
aleft,
|
||||
atop
|
||||
);
|
||||
|
||||
|
|
@ -803,7 +803,7 @@
|
|||
this.contextTop.strokeStyle = this.selectionBorderColor;
|
||||
|
||||
this.contextTop.strokeRect(
|
||||
groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
|
||||
groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
|
||||
groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop),
|
||||
aleft,
|
||||
atop
|
||||
|
|
@ -811,7 +811,7 @@
|
|||
},
|
||||
|
||||
_findSelectedObjects: function (e) {
|
||||
var target,
|
||||
var target,
|
||||
targetRegion,
|
||||
group = [ ],
|
||||
x1 = this._groupSelector.ex,
|
||||
|
|
@ -827,7 +827,7 @@
|
|||
|
||||
if (!currentObject) continue;
|
||||
|
||||
if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
|
||||
if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
|
||||
currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) {
|
||||
|
||||
if (this.selection && currentObject.selectable) {
|
||||
|
|
@ -840,7 +840,7 @@
|
|||
// do not create group for 1 element only
|
||||
if (group.length === 1) {
|
||||
this.setActiveObject(group[0], e);
|
||||
}
|
||||
}
|
||||
else if (group.length > 1) {
|
||||
var group = new fabric.Group(group);
|
||||
this.setActiveGroup(group);
|
||||
|
|
@ -856,7 +856,7 @@
|
|||
* @method findTarget
|
||||
* @param {Event} e mouse event
|
||||
* @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through
|
||||
*/
|
||||
*/
|
||||
findTarget: function (e, skipGroup) {
|
||||
|
||||
var target,
|
||||
|
|
@ -895,7 +895,7 @@
|
|||
y: pointer.y - this._offset.top
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @method _createUpperCanvas
|
||||
* @param {HTMLElement|String} canvasEl Canvas element
|
||||
|
|
@ -904,13 +904,13 @@
|
|||
_createUpperCanvas: function () {
|
||||
this.upperCanvasEl = this._createCanvasElement();
|
||||
this.upperCanvasEl.className = 'upper-canvas';
|
||||
|
||||
|
||||
this.wrapperEl.appendChild(this.upperCanvasEl);
|
||||
|
||||
|
||||
this._applyCanvasStyle(this.upperCanvasEl);
|
||||
this.contextTop = this.upperCanvasEl.getContext('2d');
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @method _initWrapperElement
|
||||
|
|
@ -918,7 +918,7 @@
|
|||
* @param {Number} height
|
||||
*/
|
||||
_initWrapperElement: function () {
|
||||
this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
|
||||
this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
|
||||
'class': this.CONTAINER_CLASS
|
||||
});
|
||||
fabric.util.setStyle(this.wrapperEl, {
|
||||
|
|
@ -928,7 +928,7 @@
|
|||
});
|
||||
fabric.util.makeElementUnselectable(this.wrapperEl);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @method _applyCanvasStyle
|
||||
|
|
@ -937,7 +937,7 @@
|
|||
_applyCanvasStyle: function (element) {
|
||||
var width = this.getWidth() || element.width,
|
||||
height = this.getHeight() || element.height;
|
||||
|
||||
|
||||
fabric.util.setStyle(element, {
|
||||
position: 'absolute',
|
||||
width: width + 'px',
|
||||
|
|
@ -949,16 +949,16 @@
|
|||
element.height = height;
|
||||
fabric.util.makeElementUnselectable(element);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns topmost canvas context
|
||||
* Returns context of canvas where object selection is drawn
|
||||
* @method getContext
|
||||
* @return {CanvasRenderingContext2D}
|
||||
*/
|
||||
getContext: function () {
|
||||
getSelectionContext: function() {
|
||||
return this.contextTop;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Sets given object as active
|
||||
* @method setActiveObject
|
||||
|
|
@ -972,13 +972,13 @@
|
|||
}
|
||||
this._activeObject = object;
|
||||
object.setActive(true);
|
||||
|
||||
|
||||
this.renderAll();
|
||||
|
||||
|
||||
this.fire('object:selected', { target: object, e: e });
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns currently active object
|
||||
* @method getActiveObject
|
||||
|
|
@ -987,7 +987,7 @@
|
|||
getActiveObject: function () {
|
||||
return this._activeObject;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Discards currently active object
|
||||
* @method discardActiveObject
|
||||
|
|
@ -1001,11 +1001,11 @@
|
|||
this._activeObject = null;
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Sets active group to a speicified one
|
||||
* @method setActiveGroup
|
||||
* @param {fabric.Group} group Group to set as a current one
|
||||
* @param {fabric.Group} group Group to set as a current one
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
|
|
@ -1013,7 +1013,7 @@
|
|||
this._activeGroup = group;
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns currently active group
|
||||
* @method getActiveGroup
|
||||
|
|
@ -1022,7 +1022,7 @@
|
|||
getActiveGroup: function () {
|
||||
return this._activeGroup;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Removes currently active group
|
||||
* @method discardActiveGroup
|
||||
|
|
@ -1035,7 +1035,7 @@
|
|||
}
|
||||
return this.setActiveGroup(null);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Deactivates all objects by calling their setActive(false)
|
||||
* @method deactivateAll
|
||||
|
|
@ -1052,7 +1052,7 @@
|
|||
this.discardActiveObject();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Deactivates all objects and dispatches appropriate events
|
||||
* @method deactivateAllWithDispatch
|
||||
|
|
@ -1070,22 +1070,22 @@
|
|||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
fabric.Canvas.prototype.toString = fabric.StaticCanvas.prototype.toString;
|
||||
extend(fabric.Canvas.prototype, InteractiveMethods);
|
||||
|
||||
// iterating manually to workaround Opera's bug
|
||||
|
||||
// iterating manually to workaround Opera's bug
|
||||
// where "prototype" property is enumerable and overrides existing prototype
|
||||
for (var prop in fabric.StaticCanvas) {
|
||||
if (prop !== 'prototype') {
|
||||
fabric.Canvas[prop] = fabric.StaticCanvas[prop];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (fabric.isTouchSupported) {
|
||||
fabric.Canvas.prototype._setCursorFromEvent = function() { };
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @class fabric.Element
|
||||
* @alias fabric.Canvas
|
||||
|
|
|
|||
|
|
@ -420,6 +420,15 @@
|
|||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns context of canvas where objects are drawn
|
||||
* @method getContext
|
||||
* @return {CanvasRenderingContext2D}
|
||||
*/
|
||||
getContext: function () {
|
||||
return this.contextContainer;
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears all contexts (background, main, top) of an instance
|
||||
* @method clear
|
||||
|
|
|
|||
Loading…
Reference in a new issue