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

changed offset to center

Browse Source
This commit is contained in:
Eric Rowell
2014-01-04 23:56:33 -08:00
parent 7e2c6c97f8
commit fae1c538f3
8 changed files with 93 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/Node.js
View File

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

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

@@ -340,11 +340,11 @@ suite('Node', function() {
});
// ======================================================
test('test offset attr change', function() {
test('test center 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 offset properties. one
* for this test, we have two center 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',
offset: {x:10, y:10},
center: {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 offsetChange = false;
var centerChange = false;
var shadowOffsetChange = false;
rect.on('offsetChange', function(val) {
offsetChange = true;
rect.on('centerChange', function(val) {
centerChange = true;
});
rect.setOffset({x:1, y:2});
rect.center({x:1, y:2});
assert.equal(offsetChange, true);
assert.equal(centerChange, true);
});
// ======================================================
@@ -410,9 +410,11 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'blue',
offset: [10, 10],
centerX: 10,
centerY: 10,
shadowColor: 'black',
shadowOffset: [20, 20],
shadowOffsetX: 20,
shadowOffsetY: 20,
draggable: true,
name: 'myRect'
});
@@ -478,7 +480,8 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'red',
offset: [10, 10],
centerX: 10,
centerY: 10,
shadowColor: 'black',
shadowOffset: [20, 20],
name: 'myRect',
@@ -1045,7 +1048,7 @@ suite('Node', function() {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
center: {
x: 0,
y: 0
},
@@ -1120,7 +1123,7 @@ suite('Node', function() {
width: 100,
height: 50,
stroke: 'blue',
offset: {
center: {
x: 40,
y: 20
}
@@ -1129,19 +1132,19 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
assert.equal(rect.getOffsetX(), 40);
assert.equal(rect.getOffsetY(), 20);
assert.equal(rect.centerX(), 40);
assert.equal(rect.centerY(), 20);
assert.equal(rect.getOffset().x, 40);
assert.equal(rect.getOffset().y, 20);
assert.equal(rect.center().x, 40);
assert.equal(rect.center().y, 20);
rect.setOffset({x:80, y:40});
rect.center({x:80, y:40});
assert.equal(rect.getOffsetX(), 80);
assert.equal(rect.getOffsetY(), 40);
assert.equal(rect.centerX(), 80);
assert.equal(rect.centerY(), 40);
assert.equal(rect.getOffset().x, 80);
assert.equal(rect.getOffset().y, 40);
assert.equal(rect.center().x, 80);
assert.equal(rect.center().y, 40);
});
@@ -1234,7 +1237,7 @@ suite('Node', function() {
});
// ======================================================
test('test setOffset', function() {
test('test center', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
@@ -1248,28 +1251,28 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
rect.setOffset({x:1, y: 2});
assert.equal(rect.getOffset().x, 1);
assert.equal(rect.getOffset().y, 2);
rect.center({x:1, y: 2});
assert.equal(rect.center().x, 1);
assert.equal(rect.center().y, 2);
rect.setOffset({x:3, y:4});
assert.equal(rect.getOffset().x, 3);
assert.equal(rect.getOffset().y, 4);
rect.center({x:3, y:4});
assert.equal(rect.center().x, 3);
assert.equal(rect.center().y, 4);
rect.setOffset({
rect.center({
x: 5,
y: 6
});
assert.equal(rect.getOffset().x, 5);
assert.equal(rect.getOffset().y, 6);
assert.equal(rect.center().x, 5);
assert.equal(rect.center().y, 6);
rect.setOffsetX(7);
assert.equal(rect.getOffset().x, 7);
assert.equal(rect.getOffset().y, 6);
rect.centerX(7);
assert.equal(rect.center().x, 7);
assert.equal(rect.center().y, 6);
rect.setOffsetY(8);
assert.equal(rect.getOffset().x, 7);
assert.equal(rect.getOffset().y, 8);
rect.centerY(8);
assert.equal(rect.center().x, 7);
assert.equal(rect.center().y, 8);
});
@@ -1535,8 +1538,8 @@ suite('Node', function() {
stroke: 'black',
strokeWidth: 4,
draggable: true,
offsetX: 30,
offsetY: 30
centerX: 30,
centerY: 30
//rotationDeg: 60
//rotationDeg: Math.PI / 3
});
@@ -1566,7 +1569,7 @@ suite('Node', function() {
name: 'groupName',
id: 'groupId',
rotationDeg: 45,
offset: {x:side / 2, y:side / 2},
center: {x:side / 2, y:side / 2},
x: diagonal / 2,
y: diagonal / 2
});
@@ -1617,7 +1620,7 @@ suite('Node', function() {
x: 2,
y: 1
},
offset: {
center: {
x: 50,
y: 25
}
@@ -2239,7 +2242,7 @@ suite('Node', function() {
x: 200,
y: 60,
image: imageObj,
offset: {
center: {
x: 50,
y: imageObj.height / 2
},
@@ -2248,7 +2251,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,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
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"}]}]}';
assert.equal(stage.toJSON(), json);
@@ -2262,7 +2265,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,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
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 stage = Kinetic.Node.create(json, container);
assert.equal(stage.toJSON(), json);
@@ -2863,15 +2866,15 @@ suite('Node', function() {
circle.skewY(8);
assert.equal(circle.skewY(), 8);
circle.offset({x: 2, y: 2});
assert.equal(circle.offset().x, 2);
assert.equal(circle.offset().y, 2);
circle.center({x: 2, y: 2});
assert.equal(circle.center().x, 2);
assert.equal(circle.center().y, 2);
circle.offsetX(5);
assert.equal(circle.offsetX(), 5);
circle.centerX(5);
assert.equal(circle.centerX(), 5);
circle.offsetY(8);
assert.equal(circle.offsetY(), 8);
circle.centerY(8);
assert.equal(circle.centerY(), 8);
circle.width(23);
assert.equal(circle.width(), 23);
@@ -2919,7 +2922,7 @@ suite('Node', function() {
y: -74,
width: 148,
height: 148
}).offset({
}).center({
x: 74,
y: 74
});
@@ -3080,7 +3083,7 @@ suite('Node', function() {
height: 208
});
group.offsetX(104).offsetY(104);
group.centerX(104).centerY(104);
//console.log('--after cache');
//console.log(group.getAbsoluteTransform().getTranslation())

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

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

2
test/unit/plugins/RegularPolygon-test.js
View File

@@ -14,7 +14,7 @@ suite('RegularPolygon', function() {
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
offset: {
center: {
x: 0,
y: -50
}

2
test/unit/plugins/Star-test.js
View File

@@ -15,7 +15,7 @@ suite('Star', function() {
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
offset: {
center: {
x: 0,
y: -70
},

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

@@ -13,7 +13,7 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: {x: 50, y: 30},
center: {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.getOffset().x, 50);
assert.equal(darth.getOffset().y, 30);
assert.equal(darth.center().x, 50);
assert.equal(darth.center().y, 30);
assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
var crop = null;
@@ -88,7 +88,8 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
centerX: 50,
centerY: 30,
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -301,7 +302,7 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: {x: 50, y:30},
center: {x: 50, y:30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
@@ -336,7 +337,7 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
offset: {x: 50, y: 30},
center: {x: 50, y: 30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',

2
test/unit/shapes/Rect-test.js
View File

@@ -82,7 +82,7 @@ suite('Rect', function(){
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {x: 50, y: 0},
center: {x: 50, y: 0},
scale: {x: 2, y: 2},
cornerRadius: 15,
draggable: true

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

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