lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-27 21:30:35 +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) {
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) {
if(arg.length === 1) {
return arg[0];
}
@ -349,28 +354,36 @@ Kinetic.Node.prototype = {
* config objects
*/
case 'centerOffset':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
this._setPointAttr(key, val);
break;
case 'scale':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
this._setPointAttr(key, val);
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) {
this.attrs[key].y = val.y;
else {
/*
* 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;
case 'crop':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
this._setPointAttr(key, val);
if(val.width !== undefined) {
this.attrs[key].width = val.width;
}
@ -1038,6 +1051,25 @@ Kinetic.Node.prototype = {
if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') {
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) {
this.setDefaultAttrs({
points: {}
points: []
});
this.shapeType = "Polygon";
@ -3163,7 +3195,7 @@ Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
*/
Kinetic.Star = function(config) {
this.setDefaultAttrs({
points: [],
numPoints: 0,
innerRadius: 0,
outerRadius: 0
});
@ -3175,10 +3207,10 @@ Kinetic.Star = function(config) {
this.applyLineJoin();
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 x = radius * Math.sin(n * Math.PI / this.attrs.points);
var y = -1 * radius * Math.cos(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.numPoints);
context.lineTo(x, y);
}
context.closePath();
@ -3192,17 +3224,17 @@ Kinetic.Star = function(config) {
*/
Kinetic.Star.prototype = {
/**
* set points array
* @param {Array} points
* set number of points
* @param {Integer} points
*/
setPoints: function(points) {
this.attrs.points = points;
setNumPoints: function(numPoints) {
this.attrs.numPoints = numPoints;
},
/**
* get points array
* get number of points
*/
getPoints: function() {
return this.attrs.points;
getNumPoints: function() {
return this.attrs.numPoints;
},
/**
* set outer radius
@ -3495,7 +3527,7 @@ Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
*/
Kinetic.Line = function(config) {
this.setDefaultAttrs({
points: {},
points: [],
lineCap: 'butt',
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) {
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) {
if(arg.length === 1) {
return arg[0];
}

59
src/Node.js
View File

@ -170,28 +170,36 @@ Kinetic.Node.prototype = {
* config objects
*/
case 'centerOffset':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
this._setPointAttr(key, val);
break;
case 'scale':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
this._setPointAttr(key, val);
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) {
this.attrs[key].y = val.y;
else {
/*
* 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;
case 'crop':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
this._setPointAttr(key, val);
if(val.width !== undefined) {
this.attrs[key].width = val.width;
}
@ -859,5 +867,24 @@ Kinetic.Node.prototype = {
if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') {
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) {
this.setDefaultAttrs({
points: {},
points: [],
lineCap: 'butt',
dashArray: []
});

2
src/shapes/Polygon.js
View File

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

22
src/shapes/Star.js
View File

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

4
tests/js/functionalTests.js
View File

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

60
tests/js/unitTests.js
View File

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