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

point properties can now be set with an array of points or an array of numbers for convenience

Browse Source
This commit is contained in:
Eric Rowell 2012-05-08 22:11:37 -07:00
parent 40ebb21033
commit 622278a510
9 changed files with 160 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
dist/kinetic-core.js vendored
View File

@ -156,8 +156,13 @@ Kinetic.GlobalObject = {
_isFunction: function(obj) { _isFunction: function(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply); return !!(obj && obj.constructor && obj.call && obj.apply);
}, },
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isObject: function(obj) {
return obj === Object(obj);
},
_getPoint: function(arg) { _getPoint: function(arg) {
if(arg.length === 1) { if(arg.length === 1) {
return arg[0]; return arg[0];
} }
@ -349,28 +354,36 @@ Kinetic.Node.prototype = {
* config objects * config objects
*/ */
case 'centerOffset': case 'centerOffset':
if(val.x !== undefined) { this._setPointAttr(key, val);
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
break; break;
case 'scale': case 'scale':
if(val.x !== undefined) { this._setPointAttr(key, val);
this.attrs[key].x = val.x; break;
case 'points':
/*
* if points contains an array of object, just set
* the attr normally
*/
if(Kinetic.GlobalObject._isObject(val[0])) {
this.attrs[key] = config[key];
} }
if(val.y !== undefined) { else {
this.attrs[key].y = val.y; /*
* convert array of numbers into an array
* of objects containing x, y
*/
var arr = [];
for(var n = 0; n < val.length; n += 2) {
arr.push({
x: val[n],
y: val[n + 1]
});
}
this.attrs[key] = arr;
} }
break; break;
case 'crop': case 'crop':
if(val.x !== undefined) { this._setPointAttr(key, val);
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
if(val.width !== undefined) { if(val.width !== undefined) {
this.attrs[key].width = val.width; this.attrs[key].width = val.width;
} }
@ -1038,6 +1051,25 @@ Kinetic.Node.prototype = {
if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') { if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') {
this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt); this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt);
} }
},
/**
* set point attr
*/
_setPointAttr: function(key, val) {
if(Kinetic.GlobalObject._isArray(val)) {
// val is an array
this.attrs[key].x = val[0];
this.attrs[key].y = val[1];
}
else {
// val is an object
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
}
} }
}; };
@ -3044,7 +3076,7 @@ Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
*/ */
Kinetic.Polygon = function(config) { Kinetic.Polygon = function(config) {
this.setDefaultAttrs({ this.setDefaultAttrs({
points: {} points: []
}); });
this.shapeType = "Polygon"; this.shapeType = "Polygon";
@ -3163,7 +3195,7 @@ Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
*/ */
Kinetic.Star = function(config) { Kinetic.Star = function(config) {
this.setDefaultAttrs({ this.setDefaultAttrs({
points: [], numPoints: 0,
innerRadius: 0, innerRadius: 0,
outerRadius: 0 outerRadius: 0
}); });
@ -3175,10 +3207,10 @@ Kinetic.Star = function(config) {
this.applyLineJoin(); this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.outerRadius); context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.attrs.points * 2; n++) { for(var n = 1; n < this.attrs.numPoints * 2; n++) {
var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius; var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
var x = radius * Math.sin(n * Math.PI / this.attrs.points); var x = radius * Math.sin(n * Math.PI / this.attrs.numPoints);
var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.points); var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.numPoints);
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
@ -3192,17 +3224,17 @@ Kinetic.Star = function(config) {
*/ */
Kinetic.Star.prototype = { Kinetic.Star.prototype = {
/** /**
* set points array * set number of points
* @param {Array} points * @param {Integer} points
*/ */
setPoints: function(points) { setNumPoints: function(numPoints) {
this.attrs.points = points; this.attrs.numPoints = numPoints;
}, },
/** /**
* get points array * get number of points
*/ */
getPoints: function() { getNumPoints: function() {
return this.attrs.points; return this.attrs.numPoints;
}, },
/** /**
* set outer radius * set outer radius
@ -3495,7 +3527,7 @@ Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
*/ */
Kinetic.Line = function(config) { Kinetic.Line = function(config) {
this.setDefaultAttrs({ this.setDefaultAttrs({
points: {}, points: [],
lineCap: 'butt', lineCap: 'butt',
dashArray: [] dashArray: []
}); });

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
src/GlobalObject.js
View File

@ -128,8 +128,13 @@ Kinetic.GlobalObject = {
_isFunction: function(obj) { _isFunction: function(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply); return !!(obj && obj.constructor && obj.call && obj.apply);
}, },
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isObject: function(obj) {
return obj === Object(obj);
},
_getPoint: function(arg) { _getPoint: function(arg) {
if(arg.length === 1) { if(arg.length === 1) {
return arg[0]; return arg[0];
} }

59
src/Node.js
View File

@ -170,28 +170,36 @@ Kinetic.Node.prototype = {
* config objects * config objects
*/ */
case 'centerOffset': case 'centerOffset':
if(val.x !== undefined) { this._setPointAttr(key, val);
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
break; break;
case 'scale': case 'scale':
if(val.x !== undefined) { this._setPointAttr(key, val);
this.attrs[key].x = val.x; break;
case 'points':
/*
* if points contains an array of object, just set
* the attr normally
*/
if(Kinetic.GlobalObject._isObject(val[0])) {
this.attrs[key] = config[key];
} }
if(val.y !== undefined) { else {
this.attrs[key].y = val.y; /*
* convert array of numbers into an array
* of objects containing x, y
*/
var arr = [];
for(var n = 0; n < val.length; n += 2) {
arr.push({
x: val[n],
y: val[n + 1]
});
}
this.attrs[key] = arr;
} }
break; break;
case 'crop': case 'crop':
if(val.x !== undefined) { this._setPointAttr(key, val);
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
if(val.width !== undefined) { if(val.width !== undefined) {
this.attrs[key].width = val.width; this.attrs[key].width = val.width;
} }
@ -859,5 +867,24 @@ Kinetic.Node.prototype = {
if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') { if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') {
this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt); this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt);
} }
},
/**
* set point attr
*/
_setPointAttr: function(key, val) {
if(Kinetic.GlobalObject._isArray(val)) {
// val is an array
this.attrs[key].x = val[0];
this.attrs[key].y = val[1];
}
else {
// val is an object
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
}
} }
}; };

2
src/shapes/Line.js
View File

@ -9,7 +9,7 @@
*/ */
Kinetic.Line = function(config) { Kinetic.Line = function(config) {
this.setDefaultAttrs({ this.setDefaultAttrs({
points: {}, points: [],
lineCap: 'butt', lineCap: 'butt',
dashArray: [] dashArray: []
}); });

2
src/shapes/Polygon.js
View File

@ -9,7 +9,7 @@
*/ */
Kinetic.Polygon = function(config) { Kinetic.Polygon = function(config) {
this.setDefaultAttrs({ this.setDefaultAttrs({
points: {} points: []
}); });
this.shapeType = "Polygon"; this.shapeType = "Polygon";

22
src/shapes/Star.js
View File

@ -9,7 +9,7 @@
*/ */
Kinetic.Star = function(config) { Kinetic.Star = function(config) {
this.setDefaultAttrs({ this.setDefaultAttrs({
points: [], numPoints: 0,
innerRadius: 0, innerRadius: 0,
outerRadius: 0 outerRadius: 0
}); });
@ -21,10 +21,10 @@ Kinetic.Star = function(config) {
this.applyLineJoin(); this.applyLineJoin();
context.moveTo(0, 0 - this.attrs.outerRadius); context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.attrs.points * 2; n++) { for(var n = 1; n < this.attrs.numPoints * 2; n++) {
var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius; var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
var x = radius * Math.sin(n * Math.PI / this.attrs.points); var x = radius * Math.sin(n * Math.PI / this.attrs.numPoints);
var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.points); var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.numPoints);
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
@ -38,17 +38,17 @@ Kinetic.Star = function(config) {
*/ */
Kinetic.Star.prototype = { Kinetic.Star.prototype = {
/** /**
* set points array * set number of points
* @param {Array} points * @param {Integer} points
*/ */
setPoints: function(points) { setNumPoints: function(numPoints) {
this.attrs.points = points; this.attrs.numPoints = numPoints;
}, },
/** /**
* get points array * get number of points
*/ */
getPoints: function() { getNumPoints: function() {
return this.attrs.points; return this.attrs.numPoints;
}, },
/** /**
* set outer radius * set outer radius

4
tests/js/functionalTests.js
View File

@ -589,7 +589,7 @@ Test.prototype.tests = {
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
points: 10, numPoints: 10,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: 'green', fill: 'green',
@ -700,7 +700,7 @@ Test.prototype.tests = {
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
points: 10, numPoints: 10,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: 'green', fill: 'green',

60
tests/js/unitTests.js
View File

@ -838,7 +838,7 @@ Test.prototype.tests = {
// SHAPES tests // SHAPES tests
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
'SHAPES - add rect': function(containerId) { 'SHAPES - add rect with rounded corner and scale from array': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -856,10 +856,7 @@ Test.prototype.tests = {
centerOffset: { centerOffset: {
x: 50 x: 50
}, },
scale: { scale: [2, 2],
x: 2,
y: 2
},
cornerRadius: 15, cornerRadius: 15,
draggable: true draggable: true
}); });
@ -1221,22 +1218,24 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var points = [{ /*
x: 73, var points = [{
y: 160 x: 73,
}, { y: 160
x: 340, }, {
y: 23 x: 340,
}, { y: 23
x: 500, }, {
y: 109 x: 500,
}, { y: 109
x: 500, }, {
y: 180 x: 500,
}]; y: 180
}];
*/
var line = new Kinetic.Line({ var line = new Kinetic.Line({
points: points, points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue', stroke: 'blue',
strokeWidth: 5, strokeWidth: 5,
lineCap: 'round', lineCap: 'round',
@ -1252,6 +1251,8 @@ Test.prototype.tests = {
line.setDashArray([10, 10]); line.setDashArray([10, 10]);
test(line.getDashArray().length === 2, 'dashArray should have 2 elements'); test(line.getDashArray().length === 2, 'dashArray should have 2 elements');
test(line.getPoints().length === 4, 'line should have 4 points');
}, },
'SHAPES - add regular polygon triangle': function(containerId) { 'SHAPES - add regular polygon triangle': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -1356,7 +1357,7 @@ Test.prototype.tests = {
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
points: 5, numPoints: 5,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: 'green', fill: 'green',
@ -1386,7 +1387,7 @@ Test.prototype.tests = {
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
points: 5, numPoints: 5,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: 'green', fill: 'green',
@ -1630,7 +1631,7 @@ Test.prototype.tests = {
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
points: 10, numPoints: 10,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: 'green', fill: 'green',
@ -1840,13 +1841,9 @@ Test.prototype.tests = {
}); });
layer.add(text); layer.add(text);
stage.add(layer);
stage.onFrame(function() {
text.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
/* /*
* test getters and setters * test getters and setters
@ -1858,7 +1855,7 @@ Test.prototype.tests = {
text.setPadding(20); text.setPadding(20);
test(text.getPadding() === 20, 'padding should be 20'); test(text.getPadding() === 20, 'padding should be 20');
layer.draw(); stage.add(layer);
text.setFontFamily('Arial'); text.setFontFamily('Arial');
text.setFontSize(30); text.setFontSize(30);
@ -1869,6 +1866,8 @@ Test.prototype.tests = {
text.setTextStroke('red'); text.setTextStroke('red');
text.setTextStrokeWidth(10); text.setTextStrokeWidth(10);
test(text.getFontFamily() === 'Arial', 'font family should be Arial'); test(text.getFontFamily() === 'Arial', 'font family should be Arial');
test(text.getFontSize() === 30, 'text size should be 30'); test(text.getFontSize() === 30, 'text size should be 30');
test(text.getFontStyle() == 'italic', 'font style should be italic'); test(text.getFontStyle() == 'italic', 'font style should be italic');
@ -1877,6 +1876,9 @@ Test.prototype.tests = {
test(text.getTextFill() === 'blue', 'text fill should be blue'); test(text.getTextFill() === 'blue', 'text fill should be blue');
test(text.getTextStroke() === 'red', 'text stroke should be red'); test(text.getTextStroke() === 'red', 'text stroke should be red');
test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10'); test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10');
}, },
'Text - get metrics': function(containerId) { 'Text - get metrics': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({