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

reverted center attr back to offset. I think it's more confusing

Browse Source
This commit is contained in:
Eric Rowell
2014-01-10 22:09:22 -08:00
parent 9e574fd241
commit 79701fcca0
5 changed files with 104 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/Node.js
View File

@@ -31,8 +31,8 @@
'skewXChange.kinetic', 'skewXChange.kinetic',
'skewYChange.kinetic', 'skewYChange.kinetic',
'rotationChange.kinetic', 'rotationChange.kinetic',
'centerXChange.kinetic', 'offsetXChange.kinetic',
'centerYChange.kinetic', 'offsetYChange.kinetic',
'transformsEnabledChange.kinetic' 'transformsEnabledChange.kinetic'
].join(SPACE); ].join(SPACE);
@@ -702,11 +702,11 @@
getAbsolutePosition: function() { getAbsolutePosition: function() {
var absoluteMatrix = this.getAbsoluteTransform().getMatrix(), var absoluteMatrix = this.getAbsoluteTransform().getMatrix(),
absoluteTransform = new Kinetic.Transform(), absoluteTransform = new Kinetic.Transform(),
center = this.center(); offset = this.offset();
// clone the matrix array // clone the matrix array
absoluteTransform.m = absoluteMatrix.slice(); absoluteTransform.m = absoluteMatrix.slice();
absoluteTransform.translate(center.x, center.y); absoluteTransform.translate(offset.x, offset.y);
return absoluteTransform.getTranslation(); return absoluteTransform.getTranslation();
}, },
@@ -761,8 +761,8 @@
rotation: this.getRotation(), rotation: this.getRotation(),
scaleX: this.getScaleX(), scaleX: this.getScaleX(),
scaleY: this.getScaleY(), scaleY: this.getScaleY(),
centerX: this.getCenterX(), offsetX: this.getOffsetX(),
centerY: this.getCenterY(), offsetY: this.getOffsetY(),
skewX: this.getSkewX(), skewX: this.getSkewX(),
skewY: this.getSkewY() skewY: this.getSkewY()
}; };
@@ -772,8 +772,8 @@
this.attrs.rotation = 0; this.attrs.rotation = 0;
this.attrs.scaleX = 1; this.attrs.scaleX = 1;
this.attrs.scaleY = 1; this.attrs.scaleY = 1;
this.attrs.centerX = 0; this.attrs.offsetX = 0;
this.attrs.centerY = 0; this.attrs.offsetY = 0;
this.attrs.skewX = 0; this.attrs.skewX = 0;
this.attrs.skewY = 0; this.attrs.skewY = 0;
@@ -1108,8 +1108,8 @@
scaleY = this.getScaleY(), scaleY = this.getScaleY(),
skewX = this.getSkewX(), skewX = this.getSkewX(),
skewY = this.getSkewY(), skewY = this.getSkewY(),
centerX = this.getCenterX(), offsetX = this.getOffsetX(),
centerY = this.getCenterY(); offsetY = this.getOffsetY();
if(x !== 0 || y !== 0) { if(x !== 0 || y !== 0) {
m.translate(x, y); m.translate(x, y);
@@ -1123,8 +1123,8 @@
if(scaleX !== 1 || scaleY !== 1) { if(scaleX !== 1 || scaleY !== 1) {
m.scale(scaleX, scaleY); m.scale(scaleX, scaleY);
} }
if(centerX !== 0 || centerY !== 0) { if(offsetX !== 0 || offsetY !== 0) {
m.translate(-1 * centerX, -1 * centerY); m.translate(-1 * offsetX, -1 * offsetY);
} }
return m; return m;
@@ -1750,58 +1750,58 @@
* node.skewY(3); * node.skewY(3);
*/ */
Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'center', ['x', 'y']); Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'offset', ['x', 'y']);
/** /**
* get/set center. A node's center defines the position and rotation point * get/set offset. Offsets the default position and rotation point
* @method * @method
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
* @param {Object} center * @param {Object} offset
* @param {Number} center.x * @param {Number} offset.x
* @param {Number} center.y * @param {Number} offset.y
* @returns {Object} * @returns {Object}
* @example * @example
* // get center<br> * // get offset<br>
* var center = node.center();<br><br> * var offset = node.offset();<br><br>
* *
* // set center<br> * // set offset<br>
* node.center({<br> * node.offset({<br>
* x: 20<br> * x: 20<br>
* y: 10<br> * y: 10<br>
* }); * });
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerX', 0); Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetX', 0);
/** /**
* get/set center x * get/set offset x
* @name centerX * @name offsetX
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
* @param {Number} x * @param {Number} x
* @returns {Number} * @returns {Number}
* @example * @example
* // get center x<br> * // get offset x<br>
* var centerX = node.centerX();<br><br> * var offsetX = node.offsetX();<br><br>
* *
* // set center x<br> * // set offset x<br>
* node.centerX(3); * node.offsetX(3);
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerY', 0); Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0);
/** /**
* get/set center y * get/set offset y
* @name centerY * @name offsetY
* @method * @method
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
* @param {Number} y * @param {Number} y
* @returns {Number} * @returns {Number}
* @example * @example
* // get center y<br> * // get offset y<br>
* var centerY = node.centerY();<br><br> * var offsetY = node.offsetY();<br><br>
* *
* // set center y<br> * // set offset y<br>
* node.centerY(3); * node.offsetY(3);
*/ */
Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0); Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0);

116
test/unit/Node-test.js
View File

@@ -340,11 +340,11 @@ suite('Node', function() {
}); });
// ====================================================== // ======================================================
test('test center attr change', function() { test('test offset attr change', function() {
/* /*
* the premise of this test to make sure that only * the premise of this test to make sure that only
* root level attributes trigger an attr change event. * root level attributes trigger an attr change event.
* for this test, we have two center properties. one * for this test, we have two offset properties. one
* is in the root level, and the other is inside the shadow * is in the root level, and the other is inside the shadow
* object * object
*/ */
@@ -356,7 +356,7 @@ suite('Node', function() {
width: 200, width: 200,
height: 50, height: 50,
fill: 'blue', fill: 'blue',
center: {x:10, y:10}, offset: {x:10, y:10},
shadowColor: 'black', shadowColor: 'black',
shadowOffset: {x:20, y:20} shadowOffset: {x:20, y:20}
}); });
@@ -364,16 +364,16 @@ suite('Node', function() {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
var centerChange = false; var offsetChange = false;
var shadowOffsetChange = false; var shadowOffsetChange = false;
rect.on('centerChange', function(val) { rect.on('offsetChange', function(val) {
centerChange = true; offsetChange = true;
}); });
rect.center({x:1, y:2}); rect.offset({x:1, y:2});
assert.equal(centerChange, true); assert.equal(offsetChange, true);
}); });
// ====================================================== // ======================================================
@@ -410,8 +410,8 @@ suite('Node', function() {
width: 200, width: 200,
height: 50, height: 50,
fill: 'blue', fill: 'blue',
centerX: 10, offsetX: 10,
centerY: 10, offsetY: 10,
shadowColor: 'black', shadowColor: 'black',
shadowOffsetX: 20, shadowOffsetX: 20,
shadowOffsetY: 20, shadowOffsetY: 20,
@@ -480,8 +480,8 @@ suite('Node', function() {
width: 200, width: 200,
height: 50, height: 50,
fill: 'red', fill: 'red',
centerX: 10, offsetX: 10,
centerY: 10, offsetY: 10,
shadowColor: 'black', shadowColor: 'black',
shadowOffset: [20, 20], shadowOffset: [20, 20],
name: 'myRect', name: 'myRect',
@@ -961,7 +961,7 @@ suite('Node', function() {
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
center: { offset: {
x: 0, x: 0,
y: 0 y: 0
}, },
@@ -1027,7 +1027,7 @@ suite('Node', function() {
}); });
// ====================================================== // ======================================================
test('set center offset after instantiation', function() { test('set offset offset after instantiation', function() {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({
@@ -1036,7 +1036,7 @@ suite('Node', function() {
width: 100, width: 100,
height: 50, height: 50,
stroke: 'blue', stroke: 'blue',
center: { offset: {
x: 40, x: 40,
y: 20 y: 20
} }
@@ -1045,19 +1045,19 @@ suite('Node', function() {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
assert.equal(rect.centerX(), 40); assert.equal(rect.offsetX(), 40);
assert.equal(rect.centerY(), 20); assert.equal(rect.offsetY(), 20);
assert.equal(rect.center().x, 40); assert.equal(rect.offset().x, 40);
assert.equal(rect.center().y, 20); assert.equal(rect.offset().y, 20);
rect.center({x:80, y:40}); rect.offset({x:80, y:40});
assert.equal(rect.centerX(), 80); assert.equal(rect.offsetX(), 80);
assert.equal(rect.centerY(), 40); assert.equal(rect.offsetY(), 40);
assert.equal(rect.center().x, 80); assert.equal(rect.offset().x, 80);
assert.equal(rect.center().y, 40); assert.equal(rect.offset().y, 40);
}); });
@@ -1150,7 +1150,7 @@ suite('Node', function() {
}); });
// ====================================================== // ======================================================
test('test center', function() { test('test offset', function() {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({
@@ -1164,28 +1164,28 @@ suite('Node', function() {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
rect.center({x:1, y: 2}); rect.offset({x:1, y: 2});
assert.equal(rect.center().x, 1); assert.equal(rect.offset().x, 1);
assert.equal(rect.center().y, 2); assert.equal(rect.offset().y, 2);
rect.center({x:3, y:4}); rect.offset({x:3, y:4});
assert.equal(rect.center().x, 3); assert.equal(rect.offset().x, 3);
assert.equal(rect.center().y, 4); assert.equal(rect.offset().y, 4);
rect.center({ rect.offset({
x: 5, x: 5,
y: 6 y: 6
}); });
assert.equal(rect.center().x, 5); assert.equal(rect.offset().x, 5);
assert.equal(rect.center().y, 6); assert.equal(rect.offset().y, 6);
rect.centerX(7); rect.offsetX(7);
assert.equal(rect.center().x, 7); assert.equal(rect.offset().x, 7);
assert.equal(rect.center().y, 6); assert.equal(rect.offset().y, 6);
rect.centerY(8); rect.offsetY(8);
assert.equal(rect.center().x, 7); assert.equal(rect.offset().x, 7);
assert.equal(rect.center().y, 8); assert.equal(rect.offset().y, 8);
}); });
@@ -1451,8 +1451,8 @@ suite('Node', function() {
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true, draggable: true,
centerX: 30, offsetX: 30,
centerY: 30 offsetY: 30
//rotationDeg: 60 //rotationDeg: 60
//rotationDeg: Math.PI / 3 //rotationDeg: Math.PI / 3
}); });
@@ -1469,7 +1469,7 @@ suite('Node', function() {
}); });
// ====================================================== // ======================================================
test('test getPosition and getAbsolutePosition for transformed parent with center offset', function() { test('test getPosition and getAbsolutePosition for transformed parent with offset offset', function() {
var side = 100; var side = 100;
var diagonal = Math.sqrt(side * side * 2); var diagonal = Math.sqrt(side * side * 2);
@@ -1482,7 +1482,7 @@ suite('Node', function() {
name: 'groupName', name: 'groupName',
id: 'groupId', id: 'groupId',
rotation: 45, rotation: 45,
center: {x:side / 2, y:side / 2}, offset: {x:side / 2, y:side / 2},
x: diagonal / 2, x: diagonal / 2,
y: diagonal / 2 y: diagonal / 2
}); });
@@ -1533,7 +1533,7 @@ suite('Node', function() {
x: 2, x: 2,
y: 1 y: 1
}, },
center: { offset: {
x: 50, x: 50,
y: 25 y: 25
} }
@@ -2155,7 +2155,7 @@ suite('Node', function() {
x: 200, x: 200,
y: 60, y: 60,
image: imageObj, image: imageObj,
center: { offset: {
x: 50, x: 50,
y: imageObj.height / 2 y: imageObj.height / 2
}, },
@@ -2164,7 +2164,7 @@ suite('Node', function() {
layer.add(darth); layer.add(darth);
stage.add(layer); stage.add(layer);
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}'; var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
assert.equal(stage.toJSON(), json); assert.equal(stage.toJSON(), json);
@@ -2178,7 +2178,7 @@ suite('Node', function() {
var imageObj = new Image(); var imageObj = new Image();
var container = addContainer(); var container = addContainer();
imageObj.onload = function() { imageObj.onload = function() {
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}'; var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
var stage = Kinetic.Node.create(json, container); var stage = Kinetic.Node.create(json, container);
assert.equal(stage.toJSON(), json); assert.equal(stage.toJSON(), json);
@@ -2776,15 +2776,15 @@ suite('Node', function() {
circle.skewY(8); circle.skewY(8);
assert.equal(circle.skewY(), 8); assert.equal(circle.skewY(), 8);
circle.center({x: 2, y: 2}); circle.offset({x: 2, y: 2});
assert.equal(circle.center().x, 2); assert.equal(circle.offset().x, 2);
assert.equal(circle.center().y, 2); assert.equal(circle.offset().y, 2);
circle.centerX(5); circle.offsetX(5);
assert.equal(circle.centerX(), 5); assert.equal(circle.offsetX(), 5);
circle.centerY(8); circle.offsetY(8);
assert.equal(circle.centerY(), 8); assert.equal(circle.offsetY(), 8);
circle.width(23); circle.width(23);
assert.equal(circle.width(), 23); assert.equal(circle.width(), 23);
@@ -2832,7 +2832,7 @@ suite('Node', function() {
y: -74, y: -74,
width: 148, width: 148,
height: 148 height: 148
}).center({ }).offset({
x: 74, x: 74,
y: 74 y: 74
}); });
@@ -2885,7 +2885,7 @@ suite('Node', function() {
width: 148, width: 148,
height: 148, height: 148,
showBorder: true showBorder: true
}).center({ }).offset({
x: 74, x: 74,
y: 74 y: 74
}); });
@@ -3036,7 +3036,7 @@ suite('Node', function() {
height: 208 height: 208
}); });
group.centerX(104).centerY(104); group.offsetX(104).offsetY(104);
//console.log('--after cache'); //console.log('--after cache');
//console.log(group.getAbsoluteTransform().getTranslation()) //console.log(group.getAbsoluteTransform().getTranslation())

2
test/unit/filters/Blur-test.js
View File

@@ -95,7 +95,7 @@ suite('Blur', function() {
height: 300 height: 300
}); });
group.center({ group.offset({
x: 150, x: 150,
y: 150 y: 150
}); });

14
test/unit/shapes/Image-test.js
View File

@@ -13,7 +13,7 @@ suite('Image', function(){
image: imageObj, image: imageObj,
width: 100, width: 100,
height: 100, height: 100,
center: {x: 50, y: 30}, offset: {x: 50, y: 30},
crop: {x: 135, y: 7, width: 167, height: 134}, crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true draggable: true
}); });
@@ -31,8 +31,8 @@ suite('Image', function(){
assert.equal(darth.getY(), 60); assert.equal(darth.getY(), 60);
assert.equal(darth.getWidth(), 100); assert.equal(darth.getWidth(), 100);
assert.equal(darth.getHeight(), 100); assert.equal(darth.getHeight(), 100);
assert.equal(darth.center().x, 50); assert.equal(darth.offset().x, 50);
assert.equal(darth.center().y, 30); assert.equal(darth.offset().y, 30);
assert.equal(Kinetic.Util._isElement(darth.getImage()), true); assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
var crop = null; var crop = null;
@@ -89,8 +89,8 @@ suite('Image', function(){
image: imageObj, image: imageObj,
width: 100, width: 100,
height: 100, height: 100,
centerX: 50, offsetX: 50,
centerY: 30, offsetY: 30,
crop: {x: 135, y: 7, width: 167, height: 134}, crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true draggable: true
}); });
@@ -254,7 +254,7 @@ suite('Image', function(){
image: imageObj, image: imageObj,
width: 100, width: 100,
height: 100, height: 100,
center: {x: 50, y:30}, offset: {x: 50, y:30},
draggable: true, draggable: true,
opacity: 0.5, opacity: 0.5,
shadowColor: 'black', shadowColor: 'black',
@@ -289,7 +289,7 @@ suite('Image', function(){
image: imageObj, image: imageObj,
width: 100, width: 100,
height: 100, height: 100,
center: {x: 50, y: 30}, offset: {x: 50, y: 30},
draggable: true, draggable: true,
opacity: 0.5, opacity: 0.5,
shadowColor: 'black', shadowColor: 'black',

6
test/unit/shapes/Text-test.js
View File

@@ -44,8 +44,8 @@ suite('Text', function(){
}); });
// center text box // center text box
rect.center(text.getWidth() / 2, text.getHeight() / 2); rect.offset(text.getWidth() / 2, text.getHeight() / 2);
text.center(text.getWidth() / 2, text.getHeight() / 2); text.offset(text.getWidth() / 2, text.getHeight() / 2);
group.add(rect); group.add(rect);
group.add(text); group.add(text);
@@ -82,7 +82,7 @@ suite('Text', function(){
}); });
// center text box // center text box
text.center(text.getWidth() / 2, text.getHeight() / 2); text.offset(text.getWidth() / 2, text.getHeight() / 2);
layer.add(text); layer.add(text);
stage.add(layer); stage.add(layer);