mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
factor methods now also build overloaded attr functions. i.e. instead of setScaleX(5), you can use scaleX(5). Instead of getScaleX(), you can use scaleX()
This commit is contained in:
parent
c7d7fef80a
commit
fe7b4daebc
@ -46,20 +46,26 @@
|
||||
addGetterSetter: function(constructor, attr, def) {
|
||||
this.addGetter(constructor, attr, def);
|
||||
this.addSetter(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
addPointGetterSetter: function(constructor, attr, def) {
|
||||
this.addPointGetter(constructor, attr, def);
|
||||
this.addPointSetter(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
|
||||
// add invdividual component getters and setters
|
||||
this.addGetter(constructor, attr + UPPER_X, def);
|
||||
this.addGetter(constructor, attr + UPPER_Y, def);
|
||||
this.addSetter(constructor, attr + UPPER_X);
|
||||
this.addSetter(constructor, attr + UPPER_Y);
|
||||
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_X);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_Y);
|
||||
},
|
||||
addBoxGetterSetter: function(constructor, attr, def) {
|
||||
this.addBoxGetter(constructor, attr, def);
|
||||
this.addBoxSetter(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
|
||||
// add invdividual component getters and setters
|
||||
this.addGetter(constructor, attr + UPPER_X, def);
|
||||
@ -71,19 +77,27 @@
|
||||
this.addSetter(constructor, attr + UPPER_Y);
|
||||
this.addSetter(constructor, attr + UPPER_WIDTH);
|
||||
this.addSetter(constructor, attr + UPPER_HEIGHT);
|
||||
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_X);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_Y);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_WIDTH);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_HEIGHT);
|
||||
},
|
||||
addPointsGetterSetter: function(constructor, attr) {
|
||||
this.addPointsGetter(constructor, attr);
|
||||
this.addPointsSetter(constructor, attr);
|
||||
this.addPointAdder(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
addRotationGetterSetter: function(constructor, attr, def) {
|
||||
this.addRotationGetter(constructor, attr, def);
|
||||
this.addRotationSetter(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr + DEG);
|
||||
},
|
||||
addColorGetterSetter: function(constructor, attr) {
|
||||
this.addGetter(constructor, attr);
|
||||
this.addSetter(constructor, attr);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
|
||||
// component getters
|
||||
this.addColorRGBGetter(constructor, attr);
|
||||
@ -96,6 +110,11 @@
|
||||
this.addColorComponentSetter(constructor, attr, R);
|
||||
this.addColorComponentSetter(constructor, attr, G);
|
||||
this.addColorComponentSetter(constructor, attr, B);
|
||||
|
||||
this.addOverloadedGetterSetter(constructor, attr + RGB);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_R);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_G);
|
||||
this.addOverloadedGetterSetter(constructor, attr + UPPER_B);
|
||||
},
|
||||
|
||||
// getter adders
|
||||
@ -276,8 +295,7 @@
|
||||
};
|
||||
},
|
||||
addRotationSetter: function(constructor, attr) {
|
||||
var that = this,
|
||||
method = SET + Kinetic.Util._capitalize(attr);
|
||||
var method = SET + Kinetic.Util._capitalize(attr);
|
||||
|
||||
// radians
|
||||
constructor.prototype[method] = function(val) {
|
||||
@ -289,6 +307,24 @@
|
||||
this._setAttr(attr, Kinetic.Util._degToRad(deg));
|
||||
return this;
|
||||
};
|
||||
},
|
||||
addOverloadedGetterSetter: function(constructor, attr) {
|
||||
var that = this,
|
||||
capitalizedAttr = Kinetic.Util._capitalize(attr),
|
||||
setter = SET + capitalizedAttr,
|
||||
getter = GET + capitalizedAttr;
|
||||
|
||||
constructor.prototype[attr] = function() {
|
||||
// setting
|
||||
if (arguments.length) {
|
||||
this[setter](arguments[0]);
|
||||
return this;
|
||||
}
|
||||
// getting
|
||||
else {
|
||||
return this[getter]();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
@ -1488,6 +1488,7 @@
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetter(Kinetic.Node, 'name');
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'name');
|
||||
|
||||
/**
|
||||
* get name
|
||||
@ -1498,6 +1499,7 @@
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetter(Kinetic.Node, 'id');
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'id');
|
||||
|
||||
/**
|
||||
* get id
|
||||
@ -1726,6 +1728,7 @@
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0);
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'width');
|
||||
|
||||
/**
|
||||
* set width
|
||||
@ -1737,6 +1740,7 @@
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addSetter(Kinetic.Node, 'height', 0);
|
||||
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'height');
|
||||
|
||||
/**
|
||||
* set height
|
||||
|
10
src/Shape.js
10
src/Shape.js
@ -43,8 +43,6 @@
|
||||
// call super constructor
|
||||
Kinetic.Node.call(this, config);
|
||||
|
||||
this._setDrawFuncs();
|
||||
|
||||
this.on('shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChanged.kinetic', _clearHasShadowCache);
|
||||
},
|
||||
hasChildren: function() {
|
||||
@ -301,14 +299,6 @@
|
||||
context.restore();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
_setDrawFuncs: function() {
|
||||
if(!this.attrs.drawFunc && this.drawFunc) {
|
||||
this.setDrawFunc(this.drawFunc);
|
||||
}
|
||||
if(!this.attrs.drawHitFunc && this.drawHitFunc) {
|
||||
this.setDrawHitFunc(this.drawHitFunc);
|
||||
}
|
||||
}
|
||||
});
|
||||
Kinetic.Util.extend(Kinetic.Shape, Kinetic.Node);
|
||||
|
@ -174,8 +174,9 @@
|
||||
___init: function(config) {
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'Tag';
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var width = this.getWidth(),
|
||||
height = this.getHeight(),
|
||||
pointerDirection = this.getPointerDirection(),
|
||||
|
@ -35,8 +35,10 @@
|
||||
this.on('dataChange.kinetic', function () {
|
||||
that.dataArray = Kinetic.Path.parsePathData(this.getData());
|
||||
});
|
||||
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function (context) {
|
||||
_drawFunc: function (context) {
|
||||
var ca = this.dataArray,
|
||||
closedPath = false;
|
||||
|
||||
|
@ -29,8 +29,9 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'RegularPolygon';
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var sides = this.attrs.sides,
|
||||
radius = this.attrs.radius,
|
||||
n, x, y;
|
||||
|
@ -31,8 +31,9 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'Star';
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var _context = context._context,
|
||||
innerRadius = this.attrs.innerRadius,
|
||||
outerRadius = this.attrs.outerRadius,
|
||||
|
@ -65,8 +65,9 @@
|
||||
// update text data for certain attr changes
|
||||
this.on('textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic', that._setTextData);
|
||||
that._setTextData();
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
context.setAttr('font', this._getContextFont());
|
||||
context.setAttr('textBaseline', 'middle');
|
||||
context.setAttr('textAlign', 'left');
|
||||
|
@ -32,8 +32,9 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'Arc';
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, this.getOuterRadius(), 0, this.getAngle(), this.getClockwise());
|
||||
context.arc(0, 0, this.getInnerRadius(), this.getAngle(), 0, !this.getClockwise());
|
||||
|
@ -40,8 +40,9 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = CIRCLE;
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, this.getRadius(), 0, PIx2, false);
|
||||
context.closePath();
|
||||
|
@ -21,8 +21,9 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = ELLIPSE;
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var r = this.getRadius();
|
||||
|
||||
context.beginPath();
|
||||
|
@ -36,11 +36,13 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = IMAGE;
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
this.setDrawHitFunc(this._drawHitFunc);
|
||||
},
|
||||
_useBufferCanvas: function() {
|
||||
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke();
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var width = this.getWidth(),
|
||||
height = this.getHeight(),
|
||||
crop, cropWidth, cropHeight,
|
||||
@ -85,7 +87,7 @@
|
||||
context.drawImage.apply(context, params);
|
||||
}
|
||||
},
|
||||
drawHitFunc: function(context) {
|
||||
_drawHitFunc: function(context) {
|
||||
var width = this.getWidth(),
|
||||
height = this.getHeight(),
|
||||
imageHitRegion = this.imageHitRegion;
|
||||
|
@ -34,8 +34,10 @@
|
||||
this.on('pointsChange.kinetic tensionChange.kinetic closedChange.kinetic', function() {
|
||||
this._clearCache('tensionPoints');
|
||||
});
|
||||
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var points = this.getPoints(),
|
||||
length = points.length,
|
||||
tension = this.getTension(),
|
||||
|
@ -25,8 +25,9 @@
|
||||
___init: function(config) {
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'Rect';
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var cornerRadius = this.getCornerRadius(),
|
||||
width = this.getWidth(),
|
||||
height = this.getHeight();
|
||||
|
@ -77,13 +77,15 @@
|
||||
this.className = 'Sprite';
|
||||
|
||||
this.anim = new Kinetic.Animation();
|
||||
var that = this;
|
||||
this.on('animationChange.kinetic', function() {
|
||||
// reset index when animation changes
|
||||
that.setIndex(0);
|
||||
this.setIndex(0);
|
||||
});
|
||||
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
this.setDrawHitFunc(this._drawHitFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var anim = this.getAnimation(),
|
||||
index = this.getIndex(),
|
||||
f = this.getAnimations()[anim][index],
|
||||
@ -93,7 +95,7 @@
|
||||
context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
|
||||
}
|
||||
},
|
||||
drawHitFunc: function(context) {
|
||||
_drawHitFunc: function(context) {
|
||||
var anim = this.getAnimation(),
|
||||
index = this.getIndex(),
|
||||
f = this.getAnimations()[anim][index];
|
||||
|
@ -86,8 +86,10 @@
|
||||
}
|
||||
|
||||
this._setTextData();
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
this.setDrawHitFunc(this._drawHitFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
var p = this.getPadding(),
|
||||
textHeight = this.getTextHeight(),
|
||||
lineHeightPx = this.getLineHeight() * textHeight,
|
||||
@ -125,7 +127,7 @@
|
||||
}
|
||||
context.restore();
|
||||
},
|
||||
drawHitFunc: function(context) {
|
||||
_drawHitFunc: function(context) {
|
||||
var width = this.getWidth(),
|
||||
height = this.getHeight();
|
||||
|
||||
|
@ -30,8 +30,9 @@
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'Wedge';
|
||||
this.setDrawFunc(this._drawFunc);
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
_drawFunc: function(context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
|
||||
context.lineTo(0, 0);
|
||||
|
@ -2805,4 +2805,90 @@ suite('Node', function() {
|
||||
assert.equal(circle.isVisible(), true);
|
||||
|
||||
});
|
||||
|
||||
test('overloaders', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
group.add(circle);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
circle.x(1);
|
||||
assert.equal(circle.x(), 1);
|
||||
|
||||
circle.y(2);
|
||||
assert.equal(circle.y(), 2);
|
||||
|
||||
circle.opacity(0.5);
|
||||
assert.equal(circle.opacity(), 0.5);
|
||||
|
||||
circle.name('foo');
|
||||
assert.equal(circle.name(), 'foo');
|
||||
|
||||
circle.id('bar');
|
||||
assert.equal(circle.id(), 'bar');
|
||||
|
||||
circle.rotation(2);
|
||||
assert.equal(circle.rotation(), 2);
|
||||
|
||||
circle.rotationDeg(3);
|
||||
assert.equal(Math.round(circle.rotationDeg()), 3);
|
||||
|
||||
circle.scale({x: 2, y: 2});
|
||||
assert.equal(circle.scale().x, 2);
|
||||
assert.equal(circle.scale().y, 2);
|
||||
|
||||
circle.scaleX(5);
|
||||
assert.equal(circle.scaleX(), 5);
|
||||
|
||||
circle.scaleY(8);
|
||||
assert.equal(circle.scaleY(), 8);
|
||||
|
||||
circle.skew({x: 2, y: 2});
|
||||
assert.equal(circle.skew().x, 2);
|
||||
assert.equal(circle.skew().y, 2);
|
||||
|
||||
circle.skewX(5);
|
||||
assert.equal(circle.skewX(), 5);
|
||||
|
||||
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.offsetX(5);
|
||||
assert.equal(circle.offsetX(), 5);
|
||||
|
||||
circle.offsetY(8);
|
||||
assert.equal(circle.offsetY(), 8);
|
||||
|
||||
circle.width(23);
|
||||
assert.equal(circle.width(), 23);
|
||||
|
||||
circle.height(11);
|
||||
assert.equal(circle.height(), 11);
|
||||
|
||||
circle.listening(false);
|
||||
assert.equal(circle.listening(), false);
|
||||
|
||||
circle.visible(false);
|
||||
assert.equal(circle.visible(), false);
|
||||
|
||||
circle.transformsEnabled(false);
|
||||
assert.equal(circle.transformsEnabled(), false);
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue
Block a user