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

all attrs that have x and y components now have individual component setters. i.e. you can use setScale() and pass in an object, or setScaleX() and setScaleY() individually

Browse Source
This commit is contained in:
Eric Rowell
2013-04-27 20:50:42 -07:00
parent 5fca6b6e53
commit 1dc323305b
4 changed files with 121 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/Canvas.js
View File

@@ -265,7 +265,14 @@
shape._fillFunc(context); shape._fillFunc(context);
}, },
_fillPattern: function(shape) { _fillPattern: function(shape) {
var context = this.context, fillPatternImage = shape.getFillPatternImage(), fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScale = shape.getFillPatternScale(), fillPatternRotation = shape.getFillPatternRotation(), fillPatternOffset = shape.getFillPatternOffset(), fillPatternRepeat = shape.getFillPatternRepeat(); var context = this.context,
fillPatternImage = shape.getFillPatternImage(),
fillPatternX = shape.getFillPatternX(),
fillPatternY = shape.getFillPatternY(),
fillPatternScale = shape.getFillPatternScale(),
fillPatternRotation = shape.getFillPatternRotation(),
fillPatternOffset = shape.getFillPatternOffset(),
fillPatternRepeat = shape.getFillPatternRepeat();
if(fillPatternX || fillPatternY) { if(fillPatternX || fillPatternY) {
context.translate(fillPatternX || 0, fillPatternY || 0); context.translate(fillPatternX || 0, fillPatternY || 0);
@@ -284,17 +291,29 @@
context.fill(); context.fill();
}, },
_fillLinearGradient: function(shape) { _fillLinearGradient: function(shape) {
var context = this.context, start = shape.getFillLinearGradientStartPoint(), end = shape.getFillLinearGradientEndPoint(), colorStops = shape.getFillLinearGradientColorStops(), grd = context.createLinearGradient(start.x, start.y, end.x, end.y); var context = this.context,
start = shape.getFillLinearGradientStartPoint(),
end = shape.getFillLinearGradientEndPoint(),
colorStops = shape.getFillLinearGradientColorStops(),
grd = context.createLinearGradient(start.x, start.y, end.x, end.y);
// build color stops if (colorStops) {
for(var n = 0; n < colorStops.length; n += 2) { // build color stops
grd.addColorStop(colorStops[n], colorStops[n + 1]); for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
context.fillStyle = grd;
context.fill();
} }
context.fillStyle = grd;
context.fill();
}, },
_fillRadialGradient: function(shape) { _fillRadialGradient: function(shape) {
var context = this.context, start = shape.getFillRadialGradientStartPoint(), end = shape.getFillRadialGradientEndPoint(), startRadius = shape.getFillRadialGradientStartRadius(), endRadius = shape.getFillRadialGradientEndRadius(), colorStops = shape.getFillRadialGradientColorStops(), grd = context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius); var context = this.context,
start = shape.getFillRadialGradientStartPoint(),
end = shape.getFillRadialGradientEndPoint(),
startRadius = shape.getFillRadialGradientStartRadius(),
endRadius = shape.getFillRadialGradientEndRadius(),
colorStops = shape.getFillRadialGradientColorStops(),
grd = context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
// build color stops // build color stops
for(var n = 0; n < colorStops.length; n += 2) { for(var n = 0; n < colorStops.length; n += 2) {
@@ -304,7 +323,12 @@
context.fill(); context.fill();
}, },
_fill: function(shape, skipShadow) { _fill: function(shape, skipShadow) {
var context = this.context, fill = shape.getFill(), fillPatternImage = shape.getFillPatternImage(), fillLinearGradientStartPoint = shape.getFillLinearGradientStartPoint(), fillRadialGradientStartPoint = shape.getFillRadialGradientStartPoint(), fillPriority = shape.getFillPriority(); var context = this.context,
fill = shape.getFill(),
fillPatternImage = shape.getFillPatternImage(),
fillLinearGradientStartPoint = shape.getFillLinearGradientStartPoint(),
fillRadialGradientStartPoint = shape.getFillRadialGradientStartPoint(),
fillPriority = shape.getFillPriority();
context.save(); context.save();
@@ -345,7 +369,11 @@
} }
}, },
_stroke: function(shape, skipShadow) { _stroke: function(shape, skipShadow) {
var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth(), dashArray = shape.getDashArray(); var context = this.context,
stroke = shape.getStroke(),
strokeWidth = shape.getStrokeWidth(),
dashArray = shape.getDashArray();
if(stroke || strokeWidth) { if(stroke || strokeWidth) {
context.save(); context.save();
if (!shape.getStrokeScaleEnabled()) { if (!shape.getStrokeScaleEnabled()) {
@@ -414,7 +442,10 @@
context.restore(); context.restore();
}, },
_stroke: function(shape) { _stroke: function(shape) {
var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth(); var context = this.context,
stroke = shape.getStroke(),
strokeWidth = shape.getStrokeWidth();
if(stroke || strokeWidth) { if(stroke || strokeWidth) {
this._applyLineCap(shape); this._applyLineCap(shape);
context.save(); context.save();

89
src/Node.js
View File

@@ -9,6 +9,8 @@
STAGE = 'Stage', STAGE = 'Stage',
X = 'x', X = 'x',
Y = 'y', Y = 'y',
UPPER_X = 'X',
UPPER_Y = 'Y',
KINETIC = 'kinetic', KINETIC = 'kinetic',
BEFORE = 'before', BEFORE = 'before',
CHANGE = 'Change', CHANGE = 'Change',
@@ -168,13 +170,13 @@
*/ */
getAttr: function(attr) { getAttr: function(attr) {
var method = GET + Kinetic.Type._capitalize(attr); var method = GET + Kinetic.Type._capitalize(attr);
if(Kinetic.Type._isFunction(this[method])) { if(Kinetic.Type._isFunction(this[method])) {
return this[method](); return this[method]();
} }
// otherwise get directly // otherwise get directly
else { else {
return this.attrs[attr]; return this.attrs[attr];
} }
}, },
/** /**
* get attrs * get attrs
@@ -1013,17 +1015,23 @@
}; };
// add getter and setter methods // add getter and setter methods
Kinetic.Node.addGetterSetter = function(constructor, arr, def, isTransform) { Kinetic.Node.addGetterSetter = function(constructor, attr, def, isTransform) {
this.addGetter(constructor, arr, def); this.addGetter(constructor, attr, def);
this.addSetter(constructor, arr, isTransform); this.addSetter(constructor, attr, isTransform);
}; };
Kinetic.Node.addPointGetterSetter = function(constructor, arr, def, isTransform) { Kinetic.Node.addPointGetterSetter = function(constructor, attr, def, isTransform) {
this.addGetter(constructor, arr, def); this.addPointGetter(constructor, attr);
this.addPointSetter(constructor, arr, isTransform); this.addPointSetter(constructor, attr);
// add invdividual component getters and setters
this.addGetter(constructor, attr + UPPER_X, def.x);
this.addGetter(constructor, attr + UPPER_Y, def.y);
this.addSetter(constructor, attr + UPPER_X, isTransform);
this.addSetter(constructor, attr + UPPER_Y, isTransform);
}; };
Kinetic.Node.addRotationGetterSetter = function(constructor, arr, def, isTransform) { Kinetic.Node.addRotationGetterSetter = function(constructor, attr, def, isTransform) {
this.addRotationGetter(constructor, arr, def); this.addRotationGetter(constructor, attr, def);
this.addRotationSetter(constructor, arr, isTransform); this.addRotationSetter(constructor, attr, isTransform);
}; };
Kinetic.Node.addSetter = function(constructor, attr, isTransform) { Kinetic.Node.addSetter = function(constructor, attr, isTransform) {
var that = this, var that = this,
@@ -1036,28 +1044,28 @@
} }
}; };
}; };
Kinetic.Node.addPointSetter = function(constructor, attr, isTransform) { Kinetic.Node.addPointSetter = function(constructor, attr) {
var that = this, var that = this,
method = SET + Kinetic.Type._capitalize(attr); baseMethod = SET + Kinetic.Type._capitalize(attr);
constructor.prototype[method] = function() { constructor.prototype[baseMethod] = function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments)),
oldVal = this.attrs[attr];
x = 0,
y = 0;
// default if (pos) {
if (!this.attrs[attr]) { x = pos.x;
this.attrs[attr] = {x:1,y:1}; y = pos.y;
}
if(pos && pos.x === undefined) { this._fireBeforeChangeEvent(attr, oldVal, pos);
pos.x = this.attrs[attr].x; if (x !== undefined) {
} this[baseMethod + UPPER_X](x);
if(pos && pos.y === undefined) { }
pos.y = this.attrs[attr].y; if (y !== undefined) {
} this[baseMethod + UPPER_Y](y);
this.setAttr(attr, pos); }
this._fireChangeEvent(attr, oldVal, pos);
if (isTransform) {
this.cachedTransform = null;
} }
}; };
}; };
@@ -1089,9 +1097,22 @@
if (val === undefined) { if (val === undefined) {
val = def; val = def;
} }
return val; return val;
}; };
}; };
Kinetic.Node.addPointGetter = function(constructor, attr) {
var that = this,
baseMethod = GET + Kinetic.Type._capitalize(attr);
constructor.prototype[baseMethod] = function(arg) {
var that = this;
return {
x: that[baseMethod + UPPER_X](),
y: that[baseMethod + UPPER_Y]()
};
};
};
Kinetic.Node.addRotationGetter = function(constructor, attr, def) { Kinetic.Node.addRotationGetter = function(constructor, attr, def) {
var that = this, var that = this,
method = GET + Kinetic.Type._capitalize(attr); method = GET + Kinetic.Type._capitalize(attr);

16
src/Shape.js
View File

@@ -72,7 +72,7 @@
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
hasShadow: function() { hasShadow: function() {
return !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffset()); return !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffsetX() || this.getShadowOffsetY());
}, },
/** /**
* returns whether or not a fill will be rendered * returns whether or not a fill will be rendered
@@ -513,13 +513,13 @@
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternOffset'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternOffset', {x:0,y:0});
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternScale'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternScale', {x:1,y:1});
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint', {x:0,y:0});
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint', {x:0,y:0});
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint', {x:0,y:0});
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint', {x:0,y:0});
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'shadowOffset'); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', {x:0,y:0});
/** /**
* set fill pattern offset * set fill pattern offset

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

@@ -234,10 +234,7 @@ Test.Modules.NODE = {
rect.setOffset(1, 2); rect.setOffset(1, 2);
rect.setShadowOffset([3, 4]);
test(offsetChange, 'offsetChange should have been triggered with setOffset()'); test(offsetChange, 'offsetChange should have been triggered with setOffset()');
test(!shadowOffsetChange, 'offsetChange should not have been triggered with setShadow()');
}, },
'simple clone': function(containerId) { 'simple clone': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -261,6 +258,9 @@ Test.Modules.NODE = {
layer.add(clone); layer.add(clone);
stage.add(layer); stage.add(layer);
test(rect.getStroke() === 'red', 'rect should have red stroke');
test(clone.getStroke() === 'green', 'cloned rect should have green stroke');
}, },
'complex clone': function(containerId) { 'complex clone': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -1064,7 +1064,7 @@ Test.Modules.NODE = {
height: 50, height: 50,
stroke: 'blue', stroke: 'blue',
offset: { offset: {
x: 20, x: 40,
y: 20 y: 20
} }
}); });
@@ -1072,12 +1072,18 @@ Test.Modules.NODE = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
test(rect.getOffset().x === 20, 'center offset x should be 20'); test(rect.getOffsetX() === 40, 'center offset x should be 20');
test(rect.getOffsetY() === 20, 'center offset y should be 20');
test(rect.getOffset().x === 40, 'center offset x should be 20');
test(rect.getOffset().y === 20, 'center offset y should be 20'); test(rect.getOffset().y === 20, 'center offset y should be 20');
rect.setOffset(40, 40); rect.setOffset(80, 40);
test(rect.getOffset().x === 40, 'center offset x should be 40'); test(rect.getOffsetX() === 80, 'center offset x should be 40');
test(rect.getOffsetY() === 40, 'center offset y should be 40');
test(rect.getOffset().x === 80, 'center offset x should be 40');
test(rect.getOffset().y === 40, 'center offset y should be 40'); test(rect.getOffset().y === 40, 'center offset y should be 40');
}, },