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

Merge pull request #218 from Arthaey/master

Browse Source 
Support creating shapes with points like [[x1,y1],[x2,y2]].
This commit is contained in:
Eric Rowell 2013-01-09 07:09:24 -08:00
commit eef3d58a1c
6 changed files with 116 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/shapes/Blob.js
View File

@ -5,8 +5,8 @@
* @constructor
* @augments Kinetic.Spline
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
* @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
* e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
* @param {Number} [config.tension] default value is 1. Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image

4
src/shapes/Line.js
View File

@ -4,8 +4,8 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
* @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
* e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
*
*
* @param {String} [config.fill] fill color

4
src/shapes/Polygon.js
View File

@ -4,8 +4,8 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
* @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
* e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
*
*
* @param {String} [config.fill] fill color

4
src/shapes/Spline.js
View File

@ -5,8 +5,8 @@
* @constructor
* @augments Kinetic.Line
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
* @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
* e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
* @param {Number} [config.tension] default value is 1. Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
*
*

17
src/util/Type.js
View File

@ -172,6 +172,7 @@
},
/*
* arg will be an array of numbers or
* an array of point arrays or
* an array of point objects
*/
_getPoints: function(arg) {
@ -179,6 +180,22 @@
return [];
}
// an array of arrays
if(this._isArray(arg[0])) {
/*
* convert array of arrays into an array
* of objects containing x, y
*/
var arr = [];
for(var n = 0; n < arg.length; n++) {
arr.push({
x: arg[n][0],
y: arg[n][1]
});
}
return arr;
}
// an array of objects
if(this._isObject(arg[0])) {
return arg;

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

@ -79,5 +79,96 @@ Test.Modules.SPLINE = {
//console.log(layer.toDataURL());
warn(layer.toDataURL() === dataUrls['curvy lines'], 'problem with curvy lines');
},
'create from points represented as a flat array': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
points: [
73, 160,
340, 23,
500, 109,
300, 109
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
},
'create from points represented as an array of objects': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = 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(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
},
'create from points represented as an array of arrays': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
points: [
[73, 160],
[340, 23],
[500, 109],
[300, 109]
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
}
};