lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 19:07:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

better layers width() and height() workflow

Browse Source
This commit is contained in:
Лаврёнов Антон
2014-05-20 17:52:22 +08:00
parent acac6e402f
commit 7e3803bdd1
5 changed files with 184 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
kinetic.js
View File

@@ -4,7 +4,7 @@
* http://www.kineticjs.com/
* Copyright 2013, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: 2014-05-15
* Date: 2014-05-20
*
* Copyright (C) 2011 - 2013 by Eric Rowell
*
@@ -83,29 +83,7 @@ var Kinetic = {};
*/
angleDeg: true,
// user agent
UA: (function() {
var userAgent = (root.navigator && root.navigator.userAgent) || '';
var ua = userAgent.toLowerCase(),
// jQuery UA regex
match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[],
// adding mobile flag as well
mobile = !!(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
return {
browser: match[ 1 ] || '',
version: match[ 2 ] || '0',
// adding mobile flab
mobile: mobile
};
})(),
/**
* @namespace Filters
@@ -551,8 +529,36 @@ var Kinetic = {};
},
getAngle: function(angle) {
return this.angleDeg ? angle * PI_OVER_180 : angle;
}
},
_parseUA: function(userAgent) {
var ua = userAgent.toLowerCase(),
// jQuery UA regex
match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[],
// adding mobile flag as well
mobile = !!(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)),
ieMobile = !!(userAgent.match(/IEMobile/i));
return {
browser: match[ 1 ] || '',
version: match[ 2 ] || '0',
// adding mobile flab
mobile: mobile,
ieMobile: ieMobile // If this is true (i.e., WP8), then Kinetic touch events are executed instead of equivalent Kinetic mouse events
};
},
// user agent
UA: undefined
};
Kinetic.UA = Kinetic._parseUA((root.navigator && root.navigator.userAgent) || '');
})(this);
// Uses Node, AMD or browser globals to create a module.
@@ -7215,7 +7221,7 @@ var Kinetic = {};
*/
Kinetic.Node.prototype.isDragging = function() {
var dd = Kinetic.DD;
return dd.node && dd.node._id === this._id && dd.isDragging;
return !!(dd.node && dd.node._id === this._id && dd.isDragging);
};
Kinetic.Node.prototype._listenDrag = function() {
@@ -7232,6 +7238,10 @@ var Kinetic = {};
}
else {
this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
// ignore right and middle buttons
if (evt.evt.button === 1 || evt.evt.button === 2) {
return;
}
if(!Kinetic.DD.node) {
that.startDrag(evt);
}
@@ -7637,6 +7647,9 @@ var Kinetic = {};
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if (this.shouldDrawHit(canvas)) {
if (layer) {
layer.clearHitCache();
}
if (cachedHitCanvas) {
this._drawCachedHitCanvas(context);
}
@@ -7988,7 +8001,9 @@ var Kinetic = {};
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if(this.shouldDrawHit(canvas)) {
if (layer) {
layer.clearHitCache();
}
if (cachedHitCanvas) {
this._drawCachedHitCanvas(context);
}
@@ -9568,6 +9583,12 @@ var Kinetic = {};
}
},
_mousemove: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Kinetic.UA.ieMobile) {
return _touchmove(evt);
}
// workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464
if ((typeof evt.webkitMovementX !== 'undefined' || typeof evt.webkitMovementY !== 'undefined') && evt.webkitMovementY === 0 && evt.webkitMovementX === 0) {
return;
@@ -9621,6 +9642,12 @@ var Kinetic = {};
}
},
_mousedown: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Kinetic.UA.ieMobile) {
return _touchstart(evt);
}
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
@@ -9643,6 +9670,11 @@ var Kinetic = {};
}
},
_mouseup: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Kinetic.UA.ieMobile) {
return _touchend(evt);
}
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition()),
@@ -9806,8 +9838,8 @@ var Kinetic = {};
x = offsetX;
y = evt.offsetY;
}
// we unforunately have to use UA detection here because accessing
// the layerX or layerY properties in newer veresions of Chrome
// we unfortunately have to use UA detection here because accessing
// the layerX or layerY properties in newer versions of Chrome
// throws a JS warning. layerX and layerY are required for FF
// when the container is transformed via CSS.
else if (Kinetic.UA.browser === 'mozilla') {
@@ -9959,6 +9991,9 @@ var Kinetic = {};
this.getHitCanvas().getContext().clear(bounds);
return this;
},
clearHitCache: function() {
this._hitImageData = undefined;
},
// extend Node.prototype.setZIndex
setZIndex: function(index) {
Kinetic.Node.prototype.setZIndex.call(this, index);
@@ -10040,6 +10075,42 @@ var Kinetic = {};
},
setSize : function(width, height) {
this.canvas.setSize(width, height);
},
/**
* get/set width of layer.getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);`
* @name width
* @method
* @memberof Kinetic.BaseLayer.prototype
* @returns {Number}
* @example
* var width = layer.width();
*/
getWidth : function() {
if (this.parent) {
return this.parent.getWidth();
}
},
setWidth : function() {
Kinetic.Util.warn('Can not change with of layer. Use "stage.width(value)" function instead.');
},
/**
* get/set height of layer.getter return height of stage. setter doing nothing.
* if you want change height use `stage.height(value);`
* @name height
* @method
* @memberof Kinetic.BaseLayer.prototype
* @returns {Number}
* @example
* var height = layer.height();
*/
getHeight : function() {
if (this.parent) {
return this.parent.getHeight();
}
},
setHeight : function() {
Kinetic.Util.warn('Can not change with of layer. Use "stage.width(value)" function instead.');
}
});
Kinetic.Util.extend(Kinetic.BaseLayer, Kinetic.Container);
@@ -10161,8 +10232,24 @@ var Kinetic = {};
return null;
}
},
_getImageData: function(x, y) {
var width = this.hitCanvas.width || 1,
height = this.hitCanvas.height || 1,
index = (y * width ) + x;
if (!this._hitImageData) {
this._hitImageData = this.hitCanvas.context.getImageData(0, 0, width, height);
}
return [
this._hitImageData.data[4 * index + 0] , // Red
this._hitImageData.data[4 * index + 1], // Green
this._hitImageData.data[4 * index + 2], // Blue
this._hitImageData.data[4 * index + 3] // Alpha
];
},
_getIntersection: function(pos) {
var p = this.hitCanvas.context._context.getImageData(pos.x, pos.y, 1, 1).data,
var p = this._getImageData(pos.x, pos.y),
p3 = p[3],
colorKey, shape;
@@ -10239,6 +10326,7 @@ var Kinetic = {};
clear: function(bounds) {
this.getContext().clear(bounds);
this.getHitCanvas().getContext().clear(bounds);
this.imageData = null; // Clear getImageData cache
return this;
},
// extend Node.prototype.setVisible

10
kinetic.min.js vendored
View File

File diff suppressed because one or more lines are too long

36
src/BaseLayer.js
View File

@@ -133,6 +133,42 @@
},
setSize : function(width, height) {
this.canvas.setSize(width, height);
},
/**
* get/set width of layer.getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);`
* @name width
* @method
* @memberof Kinetic.BaseLayer.prototype
* @returns {Number}
* @example
* var width = layer.width();
*/
getWidth : function() {
if (this.parent) {
return this.parent.getWidth();
}
},
setWidth : function() {
Kinetic.Util.warn('Can not change with of layer. Use "stage.width(value)" function instead.');
},
/**
* get/set height of layer.getter return height of stage. setter doing nothing.
* if you want change height use `stage.height(value);`
* @name height
* @method
* @memberof Kinetic.BaseLayer.prototype
* @returns {Number}
* @example
* var height = layer.height();
*/
getHeight : function() {
if (this.parent) {
return this.parent.getHeight();
}
},
setHeight : function() {
Kinetic.Util.warn('Can not change with of layer. Use "stage.width(value)" function instead.');
}
});
Kinetic.Util.extend(Kinetic.BaseLayer, Kinetic.Container);

1
test/runner.html
View File

@@ -48,6 +48,7 @@
<script src="unit/Node-test.js"></script>
<script src="unit/Container-test.js"></script>
<script src="unit/Stage-test.js"></script>
<script src="unit/BaseLayer-test.js"></script>
<script src="unit/Layer-test.js"></script>
<script src="unit/Group-test.js"></script>
<script src="unit/FastLayer-test.js"></script>

25
test/unit/BaseLayer-test.js Normal file
View File

@@ -0,0 +1,25 @@
suite('BaseLayer', function() {
// ======================================================
test.only('width and height', function() {
var stage = addStage();
var layer = new Kinetic.FastLayer();
assert.equal(layer.width(), undefined, 'while layer is not on stage width is undefined');
assert.equal(layer.height(), undefined, 'while layer is not on stage height is undefined');
layer.width(10);
assert.equal(layer.width(), undefined, 'while layer is not on stage changing width doing nothing');
layer.height(10);
assert.equal(layer.height(), undefined, 'while layer is not on stage changing height doing nothing');
stage.add(layer);
assert.equal(layer.width(), stage.width(), 'while layer is on stage width is stage`s width');
assert.equal(layer.height(), stage.height(), 'while layer is on stage height is stage`s height');
layer.width(10);
assert.equal(layer.width(), stage.width(), 'while layer is on stage changing width doing nothing');
layer.height(10);
assert.equal(layer.height(), stage.height(), 'while layer is on stage changing height doing nothing');
});
});