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

added skew transform courtesy of danielkur #188

Browse Source
This commit is contained in:
Eric Rowell
2013-05-01 10:56:01 -07:00
parent ecbebeef5a
commit 43256d0916
3 changed files with 125 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/Node.js
View File

@@ -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

15
src/util/Transform.js
View File

@@ -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

35
tests/js/unit/nodeTests.js
View File

@@ -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,