From 43256d091631223d3f868ca85a4a291ee24b7f29 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Wed, 1 May 2013 10:56:01 -0700 Subject: [PATCH] added skew transform courtesy of danielkur #188 --- src/Node.js | 130 +++++++++++++++++++++---------------- src/util/Transform.js | 15 +++++ tests/js/unit/nodeTests.js | 35 ++++++++++ 3 files changed, 125 insertions(+), 55 deletions(-) diff --git a/src/Node.js b/src/Node.js index d6f999ff..f98a63c2 100644 --- a/src/Node.js +++ b/src/Node.js @@ -660,12 +660,12 @@ x = this.getX(), y = this.getY(), rotation = this.getRotation(), - scale = this.getScale(), - scaleX = scale.x, - scaleY = scale.y, - offset = this.getOffset(), - offsetX = offset.x, - offsetY = offset.y; + scaleX = this.getScaleX(), + scaleY = this.getScaleY(), + skewX = this.getSkewX(), + skewY = this.getSkewY(), + offsetX = this.getOffsetX(), + offsetY = this.getOffsetY(); if(x !== 0 || y !== 0) { m.translate(x, y); @@ -673,6 +673,9 @@ if(rotation !== 0) { m.rotate(rotation); } + if(skewX !== 0 || skewY !== 0) { + m.skew(skewX, skewY); + } if(scaleX !== 1 || scaleY !== 1) { m.scale(scaleX, scaleY); } @@ -859,33 +862,27 @@ } }, _clearTransform: function() { - var scale = this.getScale(), - offset = this.getOffset(), - trans = { - x: this.getX(), - y: this.getY(), - rotation: this.getRotation(), - scale: { - x: scale.x, - y: scale.y - }, - offset: { - x: offset.x, - y: offset.y - } - }; + var trans = { + x: this.getX(), + y: this.getY(), + rotation: this.getRotation(), + scaleX: this.getScaleX(), + scaleY: this.getScaleY(), + offsetX: this.getOffsetX(), + offsetY: this.getOffsetY(), + skewX: this.getSkewX(), + skewY: this.getSkewY() + }; this.attrs.x = 0; this.attrs.y = 0; this.attrs.rotation = 0; - this.attrs.scale = { - x: 1, - y: 1 - }; - this.attrs.offset = { - x: 0, - y: 0 - }; + this.attrs.scaleX = 1; + this.attrs.scaleY = 1; + this.attrs.offsetX = 1; + this.attrs.offsetY = 1; + this.attrs.skewX = 0; + this.attrs.skewY = 0; return trans; }, @@ -1210,8 +1207,6 @@ }; // add getters setters Kinetic.Node.addGetterSetter(Kinetic.Node, 'x', 0, true); - Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0, true); - Kinetic.Node.addGetterSetter(Kinetic.Node, 'opacity', 1); /** * set x position @@ -1220,6 +1215,14 @@ * @param {Number} x */ + /** + * get x position + * @name getX + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0, true); + /** * set y position * @name setY @@ -1227,6 +1230,14 @@ * @param {Number} y */ + /** + * get y position + * @name getY + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addGetterSetter(Kinetic.Node, 'opacity', 1); + /** * set opacity. Opacity values range from 0 to 1. * A node with an opacity of 0 is fully transparent, and a node @@ -1236,18 +1247,6 @@ * @param {Object} opacity */ - /** - * get x position - * @name getX - * @methodOf Kinetic.Node.prototype - */ - - /** - * get y position - * @name getY - * @methodOf Kinetic.Node.prototype - */ - /** * get opacity. * @name getOpacity @@ -1255,14 +1254,15 @@ */ Kinetic.Node.addGetter(Kinetic.Node, 'name'); - Kinetic.Node.addGetter(Kinetic.Node, 'id'); - /** + /** * get name * @name getName * @methodOf Kinetic.Node.prototype */ + Kinetic.Node.addGetter(Kinetic.Node, 'id'); + /** * get id * @name getId @@ -1298,7 +1298,6 @@ */ Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'scale', {x:1,y:1}, true); - Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', {x:0,y:0}, true); /** * set scale @@ -1308,6 +1307,30 @@ * @methodOf Kinetic.Node.prototype */ + /** + * get scale + * @name getScale + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'skew', {x:0,y:0}, true); + + /** + * set skew + * @name setSkew + * @param {Number} x + * @param {Number} y + * @methodOf Kinetic.Node.prototype + */ + + /** + * get skew + * @name getSkew + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', {x:0,y:0}, true); + /** * set offset. A node's offset defines the position and rotation point * @name setOffset @@ -1316,12 +1339,6 @@ * @param {Number} y */ - /** - * get scale - * @name getScale - * @methodOf Kinetic.Node.prototype - */ - /** * get offset * @name getOffset @@ -1329,9 +1346,6 @@ */ Kinetic.Node.addSetter(Kinetic.Node, 'width'); - Kinetic.Node.addSetter(Kinetic.Node, 'height'); - Kinetic.Node.addSetter(Kinetic.Node, 'listening'); - Kinetic.Node.addSetter(Kinetic.Node, 'visible'); /** * set width @@ -1340,6 +1354,8 @@ * @param {Number} width */ + Kinetic.Node.addSetter(Kinetic.Node, 'height'); + /** * set height * @name setHeight @@ -1347,6 +1363,8 @@ * @param {Number} height */ + Kinetic.Node.addSetter(Kinetic.Node, 'listening'); + /** * listen or don't listen to events * @name setListening @@ -1354,6 +1372,8 @@ * @param {Boolean} listening */ + Kinetic.Node.addSetter(Kinetic.Node, 'visible'); + /** * set visible * @name setVisible diff --git a/src/util/Transform.js b/src/util/Transform.js index 7189ba05..a888a917 100644 --- a/src/util/Transform.js +++ b/src/util/Transform.js @@ -70,6 +70,21 @@ y: this.m[5] }; }, + /** + * Apply skew + * @param {Number} sx + * @param {Number} sy + */ + skew: function(sx, sy) { + var m11 = this.m[0] + this.m[2] * sy; + var m12 = this.m[1] + this.m[3] * sy; + var m21 = this.m[2] + this.m[0] * sx; + var m22 = this.m[3] + this.m[1] * sx; + this.m[0] = m11; + this.m[1] = m12; + this.m[2] = m21; + this.m[3] = m22; + }, /** * Transform multiplication * @param {Kinetic.Transform} matrix diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js index b5665219..b0667f13 100644 --- a/tests/js/unit/nodeTests.js +++ b/tests/js/unit/nodeTests.js @@ -600,6 +600,41 @@ Test.Modules.NODE = { layer.add(rect); stage.add(layer); }, + 'skew': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + var rect = new Kinetic.Rect({ + x: 200, + y: 100, + width: 100, + height: 50, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + skewX: 1 + }); + + + layer.add(rect); + stage.add(layer); + + test(rect.getSkewX() === 1, 'rect skewX should be 1'); + test(rect.getSkewY() === 0, 'rect skewY should be 0'); + + /* + rect.transitionTo({ + duration: 4, + skewY: -2, + easing: 'ease-in-out' + + + }) + */ + }, 'init with position, scale, rotation, then change scale': function(containerId) { var stage = new Kinetic.Stage({ container: containerId,