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

Merge pull request #647 from Kienz/canvasOffset

Browse source 
Fix wrong canvas offset
This commit is contained in:
Juriy Zaytsev 2013-05-25 09:42:03 -07:00
commit e8c3b8f4fe
3 changed files with 47 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/canvas.class.js
View file

@ -746,11 +746,14 @@
* @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
*/
_createUpperCanvas: function () {
var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, '');
this.upperCanvasEl = this._createCanvasElement();
this.upperCanvasEl.className = 'upper-canvas';
fabric.util.addClass(this.upperCanvasEl, 'upper-canvas ' + lowerCanvasClass);
this.wrapperEl.appendChild(this.upperCanvasEl);
this._copyCanvasStyle(this.lowerCanvasEl, this.upperCanvasEl);
this._applyCanvasStyle(this.upperCanvasEl);
this.contextTop = this.upperCanvasEl.getContext('2d');
},
@ -802,6 +805,16 @@
fabric.util.makeElementUnselectable(element);
},
/**
* Copys the the entire inline style from one element (fromEl) to another (toEl)
* @private
* @param {Element} fromEl Element style is copied from
* @param {Element} toEl Element copied style is applied to
*/
_copyCanvasStyle: function (fromEl, toEl) {
toEl.style.cssText = fromEl.style.cssText;
},
/**
* Returns context of canvas where object selection is drawn
* @return {CanvasRenderingContext2D}

4
src/util/dom_event.js
View file

@ -187,9 +187,9 @@
while (element && element.parentNode && !firstFixedAncestor) {
element = element.parentNode;
if (element !== fabric.document && fabric.util.getElementPosition(element) === 'fixed') firstFixedAncestor = element;
if (element !== fabric.document && fabric.util.getElementStyle(element, 'position') === 'fixed') firstFixedAncestor = element;
if (element !== fabric.document && orgElement !== upperCanvasEl && fabric.util.getElementPosition(element) === 'absolute') {
if (element !== fabric.document && orgElement !== upperCanvasEl && fabric.util.getElementStyle(element, 'position') === 'absolute') {
scrollLeft = 0;
scrollTop = 0;
}

51
src/util/dom_misc.js
View file

@ -102,10 +102,23 @@
function getElementOffset(element) {
var docElem, win,
box = {left: 0, top: 0},
doc = element && element.ownerDocument;
doc = element && element.ownerDocument,
offset = {left: 0, top: 0},
offsetAttributes = {
'borderLeftWidth': 'left',
'borderTopWidth': 'top',
'paddingLeft': 'left',
'paddingTop': 'top'
};
if (!doc){
return {left: 0, top: 0};
}
for (var attr in offsetAttributes) {
offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;
}
docElem = doc.documentElement;
if ( typeof element.getBoundingClientRect !== "undefined" ) {
box = element.getBoundingClientRect();
@ -116,31 +129,29 @@
win = doc.nodeType === 9 && doc.defaultView;
}
return {
left: box.left + win.pageXOffset - (docElem.clientLeft || 0),
top: box.top + win.pageYOffset - (docElem.clientTop || 0)
left: box.left + win.pageXOffset - (docElem.clientLeft || 0) + offset.left,
top: box.top + win.pageYOffset - (docElem.clientTop || 0) + offset.top
};
}
/**
* Returns position of a given element
* @function
* Returns style attribute value of a given element
* @memberOf fabric.util
* @param {HTMLElement} element Element to get offset for
* @return {Object} position of the given element.
* @param {HTMLElement} element Element to get style attribute for
* @param {String} attr Style attribute to get for element
* @return {String} Style attribute value of the given element.
*/
var getElementPosition;
if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {
getElementPosition = function (element) {
return fabric.document.defaultView.getComputedStyle(element, null).position;
};
}
else {
/** @ignore */
getElementPosition = function (element) {
var value = element.style.position;
if (!value && element.currentStyle) value = element.currentStyle.position;
function getElementStyle(element, attr) {
element.style = element.style || { };
if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {
return fabric.document.defaultView.getComputedStyle(element, null)[attr];
}
else {
var value = element.style[attr];
if (!value && element.currentStyle) value = element.currentStyle[attr];
return value;
};
}
}
(function () {
@ -237,6 +248,6 @@
fabric.util.addClass = addClass;
fabric.util.wrapElement = wrapElement;
fabric.util.getElementOffset = getElementOffset;
fabric.util.getElementPosition = getElementPosition;
fabric.util.getElementStyle = getElementStyle;
})();