diff --git a/src/Node.js b/src/Node.js index 9d138d39..04f9d99d 100644 --- a/src/Node.js +++ b/src/Node.js @@ -748,6 +748,10 @@ Kinetic.Node = Kinetic.Class.extend({ if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) { m.scale(this.attrs.scale.x, this.attrs.scale.y); } + // center offset + if(this.attrs.offset.x !== 0 || this.attrs.offset.y !== 0) { + m.translate(-1 * this.attrs.offset.x, -1 * this.attrs.offset.y); + } return m; }, diff --git a/src/Shape.js b/src/Shape.js index f59828b7..39fc2d0c 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -362,11 +362,6 @@ Kinetic.Shape = Kinetic.Node.extend({ var node = family[n]; var t = node.getTransform(); - // center offset - if(node.attrs.offset.x !== 0 || node.attrs.offset.y !== 0) { - t.translate(-1 * node.attrs.offset.x, -1 * node.attrs.offset.y); - } - var m = t.getMatrix(); context.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } diff --git a/tests/js/unitTests.js b/tests/js/unitTests.js index 5e91fef2..dfebd856 100644 --- a/tests/js/unitTests.js +++ b/tests/js/unitTests.js @@ -3653,6 +3653,58 @@ Test.prototype.tests = { test(Math.round(rect.getAbsolutePosition().x) === 41, 'rect absolute position x should be about 41'); test(Math.round(rect.getAbsolutePosition().y) === 92, 'rect absolute position y should be about 92'); }, + 'NODE - test getPosition and getAbsolutePosition for transformed parent with center offset': function(containerId) { + var side = 100; + var diagonal = Math.sqrt(side*side*2); + + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200, + name: 'stageName', + id: 'stageId' + }); + var layer = new Kinetic.Layer({ + name: 'layerName', + id: 'layerId' + }); + var group = new Kinetic.Group({ + name: 'groupName', + id: 'groupId', + rotationDeg: 45, + offset: [side/2, side/2], + x: diagonal/2, + y: diagonal/2 + }); + var rect = new Kinetic.Rect({ + x: 0, + y: 0, + width: side, + height: side, + fill: 'red', + name: 'rectName', + id: 'rectId' + }); + var marker = new Kinetic.Rect({ + x: side, + y: 0, + width: 1, + height: 1, + fill: 'blue', + stroke: 'blue', + strokeWidth: 4, + name: 'markerName', + id: 'markerId' + }); + + group.add(rect); + group.add(marker); + layer.add(group); + stage.add(layer); + + test(Math.round(marker.getAbsolutePosition().x) === Math.round(diagonal), 'marker absolute position x should be about ' + Math.round(diagonal) + ' but is about ' + Math.round(marker.getAbsolutePosition().x)); + test(Math.round(marker.getAbsolutePosition().y) === Math.round(diagonal/2), 'marker absolute position y should be about ' + Math.round(diagonal/2) + ' but is about ' + Math.round(marker.getAbsolutePosition().y)); + }, 'NODE - test get() selector by adding shape, then group, then layer': function(containerId) { var stage = new Kinetic.Stage({ container: containerId,