mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
reverted center attr back to offset. I think it's more confusing
This commit is contained in:
Eric Rowell
parent
9e574fd241
commit
79701fcca0
70
src/Node.js
70
src/Node.js
@ -31,8 +31,8 @@
|
||||
'skewXChange.kinetic',
|
||||
'skewYChange.kinetic',
|
||||
'rotationChange.kinetic',
|
||||
'centerXChange.kinetic',
|
||||
'centerYChange.kinetic',
|
||||
'offsetXChange.kinetic',
|
||||
'offsetYChange.kinetic',
|
||||
'transformsEnabledChange.kinetic'
|
||||
].join(SPACE);
|
||||
|
||||
@ -702,11 +702,11 @@
|
||||
getAbsolutePosition: function() {
|
||||
var absoluteMatrix = this.getAbsoluteTransform().getMatrix(),
|
||||
absoluteTransform = new Kinetic.Transform(),
|
||||
center = this.center();
|
||||
offset = this.offset();
|
||||
|
||||
// clone the matrix array
|
||||
absoluteTransform.m = absoluteMatrix.slice();
|
||||
absoluteTransform.translate(center.x, center.y);
|
||||
absoluteTransform.translate(offset.x, offset.y);
|
||||
|
||||
return absoluteTransform.getTranslation();
|
||||
},
|
||||
@ -761,8 +761,8 @@
|
||||
rotation: this.getRotation(),
|
||||
scaleX: this.getScaleX(),
|
||||
scaleY: this.getScaleY(),
|
||||
centerX: this.getCenterX(),
|
||||
centerY: this.getCenterY(),
|
||||
offsetX: this.getOffsetX(),
|
||||
offsetY: this.getOffsetY(),
|
||||
skewX: this.getSkewX(),
|
||||
skewY: this.getSkewY()
|
||||
};
|
||||
@ -772,8 +772,8 @@
|
||||
this.attrs.rotation = 0;
|
||||
this.attrs.scaleX = 1;
|
||||
this.attrs.scaleY = 1;
|
||||
this.attrs.centerX = 0;
|
||||
this.attrs.centerY = 0;
|
||||
this.attrs.offsetX = 0;
|
||||
this.attrs.offsetY = 0;
|
||||
this.attrs.skewX = 0;
|
||||
this.attrs.skewY = 0;
|
||||
|
||||
@ -1108,8 +1108,8 @@
|
||||
scaleY = this.getScaleY(),
|
||||
skewX = this.getSkewX(),
|
||||
skewY = this.getSkewY(),
|
||||
centerX = this.getCenterX(),
|
||||
centerY = this.getCenterY();
|
||||
offsetX = this.getOffsetX(),
|
||||
offsetY = this.getOffsetY();
|
||||
|
||||
if(x !== 0 || y !== 0) {
|
||||
m.translate(x, y);
|
||||
@ -1123,8 +1123,8 @@
|
||||
if(scaleX !== 1 || scaleY !== 1) {
|
||||
m.scale(scaleX, scaleY);
|
||||
}
|
||||
if(centerX !== 0 || centerY !== 0) {
|
||||
m.translate(-1 * centerX, -1 * centerY);
|
||||
if(offsetX !== 0 || offsetY !== 0) {
|
||||
m.translate(-1 * offsetX, -1 * offsetY);
|
||||
}
|
||||
|
||||
return m;
|
||||
@ -1750,58 +1750,58 @@
|
||||
* 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
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Object} center
|
||||
* @param {Number} center.x
|
||||
* @param {Number} center.y
|
||||
* @param {Object} offset
|
||||
* @param {Number} offset.x
|
||||
* @param {Number} offset.y
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get center<br>
|
||||
* var center = node.center();<br><br>
|
||||
* // get offset<br>
|
||||
* var offset = node.offset();<br><br>
|
||||
*
|
||||
* // set center<br>
|
||||
* node.center({<br>
|
||||
* // set offset<br>
|
||||
* node.offset({<br>
|
||||
* x: 20<br>
|
||||
* y: 10<br>
|
||||
* });
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerX', 0);
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetX', 0);
|
||||
|
||||
/**
|
||||
* get/set center x
|
||||
* @name centerX
|
||||
* get/set offset x
|
||||
* @name offsetX
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} x
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get center x<br>
|
||||
* var centerX = node.centerX();<br><br>
|
||||
* // get offset x<br>
|
||||
* var offsetX = node.offsetX();<br><br>
|
||||
*
|
||||
* // set center x<br>
|
||||
* node.centerX(3);
|
||||
* // set offset x<br>
|
||||
* node.offsetX(3);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerY', 0);
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0);
|
||||
|
||||
/**
|
||||
* get/set center y
|
||||
* @name centerY
|
||||
* get/set offset y
|
||||
* @name offsetY
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} y
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get center y<br>
|
||||
* var centerY = node.centerY();<br><br>
|
||||
* // get offset y<br>
|
||||
* var offsetY = node.offsetY();<br><br>
|
||||
*
|
||||
* // set center y<br>
|
||||
* node.centerY(3);
|
||||
* // set offset y<br>
|
||||
* node.offsetY(3);
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0);
|
||||
|
||||
@ -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
|
||||
* 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
|
||||
* object
|
||||
*/
|
||||
@ -356,7 +356,7 @@ suite('Node', function() {
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: 'blue',
|
||||
center: {x:10, y:10},
|
||||
offset: {x:10, y:10},
|
||||
shadowColor: 'black',
|
||||
shadowOffset: {x:20, y:20}
|
||||
});
|
||||
@ -364,16 +364,16 @@ suite('Node', function() {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var centerChange = false;
|
||||
var offsetChange = false;
|
||||
var shadowOffsetChange = false;
|
||||
|
||||
rect.on('centerChange', function(val) {
|
||||
centerChange = true;
|
||||
rect.on('offsetChange', function(val) {
|
||||
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,
|
||||
height: 50,
|
||||
fill: 'blue',
|
||||
centerX: 10,
|
||||
centerY: 10,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
shadowColor: 'black',
|
||||
shadowOffsetX: 20,
|
||||
shadowOffsetY: 20,
|
||||
@ -480,8 +480,8 @@ suite('Node', function() {
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
centerX: 10,
|
||||
centerY: 10,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
shadowColor: 'black',
|
||||
shadowOffset: [20, 20],
|
||||
name: 'myRect',
|
||||
@ -961,7 +961,7 @@ suite('Node', function() {
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
center: {
|
||||
offset: {
|
||||
x: 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 layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
@ -1036,7 +1036,7 @@ suite('Node', function() {
|
||||
width: 100,
|
||||
height: 50,
|
||||
stroke: 'blue',
|
||||
center: {
|
||||
offset: {
|
||||
x: 40,
|
||||
y: 20
|
||||
}
|
||||
@ -1045,19 +1045,19 @@ suite('Node', function() {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(rect.centerX(), 40);
|
||||
assert.equal(rect.centerY(), 20);
|
||||
assert.equal(rect.offsetX(), 40);
|
||||
assert.equal(rect.offsetY(), 20);
|
||||
|
||||
assert.equal(rect.center().x, 40);
|
||||
assert.equal(rect.center().y, 20);
|
||||
assert.equal(rect.offset().x, 40);
|
||||
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.centerY(), 40);
|
||||
assert.equal(rect.offsetX(), 80);
|
||||
assert.equal(rect.offsetY(), 40);
|
||||
|
||||
assert.equal(rect.center().x, 80);
|
||||
assert.equal(rect.center().y, 40);
|
||||
assert.equal(rect.offset().x, 80);
|
||||
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 layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
@ -1164,28 +1164,28 @@ suite('Node', function() {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
rect.center({x:1, y: 2});
|
||||
assert.equal(rect.center().x, 1);
|
||||
assert.equal(rect.center().y, 2);
|
||||
rect.offset({x:1, y: 2});
|
||||
assert.equal(rect.offset().x, 1);
|
||||
assert.equal(rect.offset().y, 2);
|
||||
|
||||
rect.center({x:3, y:4});
|
||||
assert.equal(rect.center().x, 3);
|
||||
assert.equal(rect.center().y, 4);
|
||||
rect.offset({x:3, y:4});
|
||||
assert.equal(rect.offset().x, 3);
|
||||
assert.equal(rect.offset().y, 4);
|
||||
|
||||
rect.center({
|
||||
rect.offset({
|
||||
x: 5,
|
||||
y: 6
|
||||
});
|
||||
assert.equal(rect.center().x, 5);
|
||||
assert.equal(rect.center().y, 6);
|
||||
assert.equal(rect.offset().x, 5);
|
||||
assert.equal(rect.offset().y, 6);
|
||||
|
||||
rect.centerX(7);
|
||||
assert.equal(rect.center().x, 7);
|
||||
assert.equal(rect.center().y, 6);
|
||||
rect.offsetX(7);
|
||||
assert.equal(rect.offset().x, 7);
|
||||
assert.equal(rect.offset().y, 6);
|
||||
|
||||
rect.centerY(8);
|
||||
assert.equal(rect.center().x, 7);
|
||||
assert.equal(rect.center().y, 8);
|
||||
rect.offsetY(8);
|
||||
assert.equal(rect.offset().x, 7);
|
||||
assert.equal(rect.offset().y, 8);
|
||||
|
||||
});
|
||||
|
||||
@ -1451,8 +1451,8 @@ suite('Node', function() {
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
centerX: 30,
|
||||
centerY: 30
|
||||
offsetX: 30,
|
||||
offsetY: 30
|
||||
//rotationDeg: 60
|
||||
//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 diagonal = Math.sqrt(side * side * 2);
|
||||
|
||||
@ -1482,7 +1482,7 @@ suite('Node', function() {
|
||||
name: 'groupName',
|
||||
id: 'groupId',
|
||||
rotation: 45,
|
||||
center: {x:side / 2, y:side / 2},
|
||||
offset: {x:side / 2, y:side / 2},
|
||||
x: diagonal / 2,
|
||||
y: diagonal / 2
|
||||
});
|
||||
@ -1533,7 +1533,7 @@ suite('Node', function() {
|
||||
x: 2,
|
||||
y: 1
|
||||
},
|
||||
center: {
|
||||
offset: {
|
||||
x: 50,
|
||||
y: 25
|
||||
}
|
||||
@ -2155,7 +2155,7 @@ suite('Node', function() {
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
center: {
|
||||
offset: {
|
||||
x: 50,
|
||||
y: imageObj.height / 2
|
||||
},
|
||||
@ -2164,7 +2164,7 @@ suite('Node', function() {
|
||||
|
||||
layer.add(darth);
|
||||
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);
|
||||
|
||||
@ -2178,7 +2178,7 @@ suite('Node', function() {
|
||||
var imageObj = new Image();
|
||||
var container = addContainer();
|
||||
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);
|
||||
|
||||
assert.equal(stage.toJSON(), json);
|
||||
@ -2776,15 +2776,15 @@ suite('Node', function() {
|
||||
circle.skewY(8);
|
||||
assert.equal(circle.skewY(), 8);
|
||||
|
||||
circle.center({x: 2, y: 2});
|
||||
assert.equal(circle.center().x, 2);
|
||||
assert.equal(circle.center().y, 2);
|
||||
circle.offset({x: 2, y: 2});
|
||||
assert.equal(circle.offset().x, 2);
|
||||
assert.equal(circle.offset().y, 2);
|
||||
|
||||
circle.centerX(5);
|
||||
assert.equal(circle.centerX(), 5);
|
||||
circle.offsetX(5);
|
||||
assert.equal(circle.offsetX(), 5);
|
||||
|
||||
circle.centerY(8);
|
||||
assert.equal(circle.centerY(), 8);
|
||||
circle.offsetY(8);
|
||||
assert.equal(circle.offsetY(), 8);
|
||||
|
||||
circle.width(23);
|
||||
assert.equal(circle.width(), 23);
|
||||
@ -2832,7 +2832,7 @@ suite('Node', function() {
|
||||
y: -74,
|
||||
width: 148,
|
||||
height: 148
|
||||
}).center({
|
||||
}).offset({
|
||||
x: 74,
|
||||
y: 74
|
||||
});
|
||||
@ -2885,7 +2885,7 @@ suite('Node', function() {
|
||||
width: 148,
|
||||
height: 148,
|
||||
showBorder: true
|
||||
}).center({
|
||||
}).offset({
|
||||
x: 74,
|
||||
y: 74
|
||||
});
|
||||
@ -3036,7 +3036,7 @@ suite('Node', function() {
|
||||
height: 208
|
||||
});
|
||||
|
||||
group.centerX(104).centerY(104);
|
||||
group.offsetX(104).offsetY(104);
|
||||
|
||||
//console.log('--after cache');
|
||||
//console.log(group.getAbsoluteTransform().getTranslation())
|
||||
|
||||
@ -95,7 +95,7 @@ suite('Blur', function() {
|
||||
height: 300
|
||||
});
|
||||
|
||||
group.center({
|
||||
group.offset({
|
||||
x: 150,
|
||||
y: 150
|
||||
});
|
||||
|
||||
@ -13,7 +13,7 @@ suite('Image', function(){
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
center: {x: 50, y: 30},
|
||||
offset: {x: 50, y: 30},
|
||||
crop: {x: 135, y: 7, width: 167, height: 134},
|
||||
draggable: true
|
||||
});
|
||||
@ -31,8 +31,8 @@ suite('Image', function(){
|
||||
assert.equal(darth.getY(), 60);
|
||||
assert.equal(darth.getWidth(), 100);
|
||||
assert.equal(darth.getHeight(), 100);
|
||||
assert.equal(darth.center().x, 50);
|
||||
assert.equal(darth.center().y, 30);
|
||||
assert.equal(darth.offset().x, 50);
|
||||
assert.equal(darth.offset().y, 30);
|
||||
assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
|
||||
|
||||
var crop = null;
|
||||
@ -89,8 +89,8 @@ suite('Image', function(){
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
centerX: 50,
|
||||
centerY: 30,
|
||||
offsetX: 50,
|
||||
offsetY: 30,
|
||||
crop: {x: 135, y: 7, width: 167, height: 134},
|
||||
draggable: true
|
||||
});
|
||||
@ -254,7 +254,7 @@ suite('Image', function(){
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
center: {x: 50, y:30},
|
||||
offset: {x: 50, y:30},
|
||||
draggable: true,
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
@ -289,7 +289,7 @@ suite('Image', function(){
|
||||
image: imageObj,
|
||||
width: 100,
|
||||
height: 100,
|
||||
center: {x: 50, y: 30},
|
||||
offset: {x: 50, y: 30},
|
||||
draggable: true,
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
|
||||
@ -44,8 +44,8 @@ suite('Text', function(){
|
||||
});
|
||||
|
||||
// center text box
|
||||
rect.center(text.getWidth() / 2, text.getHeight() / 2);
|
||||
text.center(text.getWidth() / 2, text.getHeight() / 2);
|
||||
rect.offset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
text.offset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
|
||||
group.add(rect);
|
||||
group.add(text);
|
||||
@ -82,7 +82,7 @@ suite('Text', function(){
|
||||
});
|
||||
|
||||
// center text box
|
||||
text.center(text.getWidth() / 2, text.getHeight() / 2);
|
||||
text.offset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user