lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added new addPoint method which allows you to add a single point to the points array without swapping the whole thing

Browse Source
This commit is contained in:
Eric Rowell 2013-06-27 23:28:57 -07:00
parent 812ea103f2
commit f85c6b1392
5 changed files with 172 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/Node.js
View File

@ -1,6 +1,7 @@
(function() {
// CONSTANTS
var SPACE = ' ',
var ADD = 'add',
SPACE = ' ',
EMPTY_STRING = '',
DOT = '.',
GET = 'get',
@ -1158,12 +1159,6 @@
}
});
// setter functions
Kinetic.Node.setPoints = function(val) {
var points = Kinetic.Util._getPoints(val);
this._setAttr('points', points);
};
// getter setter adders
Kinetic.Node.addGetterSetter = function(constructor, attr, def, isTransform) {
this.addGetter(constructor, attr, def);
@ -1182,6 +1177,7 @@
Kinetic.Node.addPointsGetterSetter = function(constructor, attr) {
this.addPointsGetter(constructor, attr);
this.addPointsSetter(constructor, attr);
this.addPointAdder(constructor, attr);
};
Kinetic.Node.addRotationGetterSetter = function(constructor, attr, def, isTransform) {
this.addRotationGetter(constructor, attr, def);
@ -1295,7 +1291,10 @@
};
Kinetic.Node.addPointsSetter = function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = Kinetic.Node.setPoints;
constructor.prototype[method] = function(val) {
var points = Kinetic.Util._getPoints(val);
this._setAttr('points', points);
};
};
Kinetic.Node.addSetter = function(constructor, attr, isTransform) {
var that = this,
@ -1353,6 +1352,23 @@
};
};
// add adders
Kinetic.Node.addPointAdder = function(constructor, attr) {
var that = this,
baseMethod = ADD + Kinetic.Util._removeLastLetter(Kinetic.Util._capitalize(attr));
constructor.prototype[baseMethod] = function() {
var pos = Kinetic.Util._getXY([].slice.call(arguments)),
oldVal = this.attrs[attr];
if (pos) {
this._fireBeforeChangeEvent(attr, oldVal, pos);
this.attrs[attr].push(pos);
this._fireChangeEvent(attr, oldVal, pos);
}
};
};
/**
* create node with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the

3
src/Util.js
View File

@ -705,6 +705,9 @@
}
return allPoints;
},
_removeLastLetter: function(str) {
return str.substring(0, str.length - 1);
}
};
})();

45
src/shapes/Blob.js
View File

@ -26,11 +26,18 @@
Kinetic.Blob.prototype = {
_initBlob: function(config) {
var that = this;
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Blob';
this._setDrawFuncs();
this.on('pointsChange tensionChange', function() {
that._setAllPoints();
});
this._setAllPoints();
},
drawFunc: function(canvas) {
var points = this.getPoints(),
@ -63,27 +70,6 @@
context.closePath();
canvas.fillStroke(this);
},
/**
* set tension
* @method
* @memberof Kinetic.Blob.prototype
* @param {Number} tension
*/
setTension: function(tension) {
this._setAttr('tension', tension);
this._setAllPoints();
},
/**
* set points array
* @method
* @memberof Kinetic.Blob.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(points) {
Kinetic.Node.setPoints.call(this, points);
this._setAllPoints();
},
_setAllPoints: function() {
var points = this.getPoints(),
length = points.length,
@ -116,10 +102,25 @@
* @memberof Kinetic.Blob.prototype
*/
Kinetic.Node.addPointsGetter(Kinetic.Blob, 'points');
/**
* set tension
* @method
* @memberof Kinetic.Blob.prototype
* @param {Number} tension
*/
Kinetic.Node.addPointsGetterSetter(Kinetic.Blob, 'points');
/**
* get points array
* @method
* @memberof Kinetic.Blob.prototype
*/
/**
* set points array
* @method
* @memberof Kinetic.Blob.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
})();

47
src/shapes/Spline.js
View File

@ -26,11 +26,18 @@
Kinetic.Spline.prototype = {
_initSpline: function(config) {
var that = this;
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Spline';
this._setDrawFuncs();
this.on('pointsChange tensionChange', function() {
that._setAllPoints();
});
this._setAllPoints();
},
drawFunc: function(canvas) {
var points = this.getPoints(),
@ -66,27 +73,6 @@
canvas.stroke(this);
},
/**
* set tension
* @method
* @memberof Kinetic.Spline.prototype
* @param {Number} tension
*/
setTension: function(tension) {
this._setAttr('tension', tension);
this._setAllPoints();
},
/**
* set points array
* @method
* @memberof Kinetic.Spline.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(points) {
Kinetic.Node.setPoints.call(this, points);
this._setAllPoints();
},
_setAllPoints: function() {
this.allPoints = Kinetic.Util._expandPoints(this.getPoints(), this.getTension());
}
@ -94,7 +80,7 @@
Kinetic.Util.extend(Kinetic.Spline, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGetter(Kinetic.Spline, 'tension', 1);
Kinetic.Node.addGetterSetter(Kinetic.Spline, 'tension', 1);
/**
* get tension
@ -103,10 +89,25 @@
* @memberof Kinetic.Spline.prototype
*/
Kinetic.Node.addPointsGetter(Kinetic.Spline, 'points');
/**
* set tension
* @method
* @memberof Kinetic.Spline.prototype
* @param {Number} tension
*/
Kinetic.Node.addPointsGetterSetter(Kinetic.Spline, 'points');
/**
* get points array
* @method
* @memberof Kinetic.Spline.prototype
*/
/**
* set points array
* @method
* @memberof Kinetic.Spline.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
})();

98
tests/js/unit/shapes/splineTests.js
View File

@ -72,6 +72,104 @@ Test.Modules.SPLINE = {
test(line1.getClassName() === 'Spline', 'getClassName should be Spline');
},
'update spline points': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
test(spline.allPoints.length === 6, 'spline all points should have 6 points');
spline.setPoints([{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}]);
test(spline.allPoints.length === 3, 'spline all points should have 3 points');
layer.draw();
},
'add point to spline points': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
test(spline.getPoints().length === 4, 'spline should have 4 points');
spline.addPoint({
x: 300,
y: 200
});
test(spline.getPoints().length === 5, 'spline should have 5 points');
layer.draw();
},
'create from points represented as a flat array': function(containerId) {
var stage = new Kinetic.Stage({