lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 09:50:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

added new Blob shape. removed double quotes from all shapes. made it easier for shapes to extend other shapes

Browse Source
This commit is contained in:
Eric Rowell
2013-01-01 00:41:13 -08:00
parent e44f369bf1
commit e9d56dafba
18 changed files with 148 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Thorfile
View File

@@ -7,7 +7,7 @@ class Build < Thor
"src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
"src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js",
"src/Animation.js", "src/Node.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"
]
UNIT_TESTS = [
@@ -28,6 +28,7 @@ class Build < Thor
"tests/js/unit/shapes/polygonTests.js",
"tests/js/unit/shapes/lineTests.js",
"tests/js/unit/shapes/splineTests.js",
"tests/js/unit/shapes/blobTests.js",
"tests/js/unit/shapes/regularPolygonTests.js",
"tests/js/unit/shapes/starTests.js",
"tests/js/unit/shapes/textTests.js",

60
src/shapes/Blob.js Normal file
View File

@@ -0,0 +1,60 @@
(function() {
/**
* Blob constructor.&nbsp; Blobs are defined by an array of points and
* a tension
* @constructor
* @augments Kinetic.Spline
*/
Kinetic.Blob = function(config) {
this._initBlob(config);
};
Kinetic.Blob.prototype = {
_initBlob: function(config) {
// call super constructor
Kinetic.Spline.call(this, config);
this.shapeType = 'Blob';
},
drawFunc: function(canvas) {
var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
context.beginPath();
context.moveTo(points[0].x, points[0].y);
// tension
if(tension !== 0 && length > 2) {
var ap = this.allPoints, len = ap.length;
var n = 0;
while(n < len-1) {
context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
}
}
// no tension
else {
for(var n = 1; n < length; n++) {
var point = points[n];
context.lineTo(point.x, point.y);
}
}
context.closePath();
canvas.fillStroke(this);
},
_setAllPoints: function() {
var points = this.getPoints(), length = points.length, tension = this.getTension(), firstControlPoints = Kinetic.Spline._getControlPoints(points[length - 1], points[0], points[1], tension), lastControlPoints = Kinetic.Spline._getControlPoints(points[length - 2], points[length - 1], points[0], tension);
Kinetic.Spline.prototype._setAllPoints.call(this);
// prepend control point
this.allPoints.unshift(firstControlPoints[1]);
// append cp, point, cp, cp, first point
this.allPoints.push(lastControlPoints[0]);
this.allPoints.push(points[length - 1]);
this.allPoints.push(lastControlPoints[1]);
this.allPoints.push(firstControlPoints[0]);
this.allPoints.push(points[0]);
}
};
Kinetic.Global.extend(Kinetic.Blob, Kinetic.Spline);
})();

3
src/shapes/Circle.js
View File

@@ -16,10 +16,9 @@
radius: 0
});
this.shapeType = 'Circle';
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Circle';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

3
src/shapes/Ellipse.js
View File

@@ -19,10 +19,9 @@
}
});
this.shapeType = "Ellipse";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Ellipse';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

3
src/shapes/Image.js
View File

@@ -13,10 +13,9 @@
Kinetic.Image.prototype = {
_initImage: function(config) {
this.shapeType = "Image";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Image';
this._setDrawFuncs();
var that = this;

3
src/shapes/Line.js
View File

@@ -18,10 +18,9 @@
lineCap: 'butt'
});
this.shapeType = 'Line';
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Line';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

2
src/shapes/Path.js
View File

@@ -13,12 +13,12 @@
Kinetic.Path.prototype = {
_initPath: function(config) {
this.shapeType = "Path";
this.dataArray = [];
var that = this;
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Path';
this._setDrawFuncs();
this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);

3
src/shapes/Polygon.js
View File

@@ -17,10 +17,9 @@
points: []
});
this.shapeType = "Polygon";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Polygon';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

2
src/shapes/Rect.js
View File

@@ -17,9 +17,9 @@
height: 0,
cornerRadius: 0
});
this.shapeType = "Rect";
Kinetic.Shape.call(this, config);
this.shapeType = 'Rect';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

3
src/shapes/RegularPolygon.js
View File

@@ -18,10 +18,9 @@
sides: 0
});
this.shapeType = "RegularPolygon";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'RegularPolygon';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

65
src/shapes/Spline.js
View File

@@ -1,19 +1,23 @@
(function() {
/**
* Spline constructor.&nbsp; Splines are defined by an array of points and
* Spline constructor.&nbsp; Splines are defined by an array of points and
* a tension
* @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 {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 {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.
* @augments Kinetic.Line
*/
Kinetic.Spline = function(config) {
this._initSpline(config);
};
// function written by Rob Spencer
function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
Kinetic.Spline._getControlPoints = function(p0, p1, p2, t) {
var x0 = p0.x;
var y0 = p0.y;
var x1 = p1.x;
var y1 = p1.y;
var x2 = p2.x;
var y2 = p2.y;
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
var fa = t * d01 / (d01 + d12);
@@ -22,22 +26,24 @@
var p1y = y1 - fa * (y2 - y0);
var p2x = x1 + fb * (x2 - x0);
var p2y = y1 + fb * (y2 - y0);
return [p1x, p1y, p2x, p2y];
}
return [{
x: p1x,
y: p1y
}, {
x: p2x,
y: p2y
}];
};
Kinetic.Spline.prototype = {
_initSpline: function(config) {
this.setDefaultAttrs({
points: [],
lineCap: 'butt',
tension: 1
});
this.shapeType = 'Spline';
// call super constructor
Kinetic.Shape.call(this, config);
this._setDrawFuncs();
Kinetic.Line.call(this, config);
this.shapeType = 'Spline';
},
drawFunc: function(canvas) {
var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
@@ -67,15 +73,8 @@
canvas.stroke(this);
},
/**
* set points array
* @name setPoints
* @methodOf 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(val) {
this.setAttr('points', Kinetic.Type._getPoints(val));
Kinetic.Line.prototype.setPoints.call(this, val);
this._setAllPoints();
},
/**
@@ -92,29 +91,23 @@
var points = this.getPoints(), length = points.length, tension = this.getTension(), allPoints = [];
for(var n = 1; n < length - 1; n++) {
var p0 = points[n - 1], p1 = points[n], p2 = points[n + 1], cp = getControlPoints(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, tension);
allPoints.push({
x: cp[0],
y: cp[1]
});
allPoints.push(p1);
allPoints.push({
x: cp[2],
y: cp[3]
});
var cp = Kinetic.Spline._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
allPoints.push(cp[0]);
allPoints.push(points[n]);
allPoints.push(cp[1]);
}
this.allPoints = allPoints;
}
};
Kinetic.Global.extend(Kinetic.Spline, Kinetic.Shape);
Kinetic.Global.extend(Kinetic.Spline, Kinetic.Line);
// add getters setters
Kinetic.Node.addGetters(Kinetic.Spline, ['points', 'tension']);
Kinetic.Node.addGetters(Kinetic.Spline, ['tension']);
/**
* get points array
* @name getPoints
* get tension
* @name getTension
* @methodOf Kinetic.Spline.prototype
*/
})();

4
src/shapes/Sprite.js
View File

@@ -18,10 +18,10 @@
index: 0,
frameRate: 17
});
this.shapeType = "Sprite";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Sprite';
this._setDrawFuncs();
this.anim = new Kinetic.Animation();

3
src/shapes/Star.js
View File

@@ -20,10 +20,9 @@
outerRadius: 0
});
this.shapeType = "Star";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Star';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

6
src/shapes/Text.js
View File

@@ -38,10 +38,10 @@
});
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "Text";
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Text';
this._setDrawFuncs();
// update text data for certain attr changes
@@ -284,7 +284,7 @@
*/
/**
* set font style. Can be "normal", "italic", or "bold". "normal" is the default.
* set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.
* @name setFontStyle
* @methodOf Kinetic.Text.prototype
* @param {String} fontStyle

4
src/shapes/TextPath.js
View File

@@ -24,12 +24,12 @@
});
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "TextPath";
this.dataArray = [];
var that = this;
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'TextPath';
this._setDrawFuncs();
this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
@@ -318,7 +318,7 @@
*/
/**
* set font style. Can be "normal", "italic", or "bold". "normal" is the default.
* set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.
* @name setFontStyle
* @methodOf Kinetic.TextPath.prototype
* @param {String} fontStyle

3
src/shapes/Wedge.js
View File

@@ -20,10 +20,9 @@
clickwise: true
});
this.shapeType = 'Wedge';
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Wedge';
this._setDrawFuncs();
},
drawFunc: function(canvas) {

39
tests/js/unit/shapes/blobTests.js Normal file
View File

@@ -0,0 +1,39 @@
Test.Modules.BLOB = {
'add blob': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Blob({
points: [{
x: 73,
y: 140
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 170
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
fill: '#aaf',
tension: 0.8
});
layer.add(line);
stage.add(layer);
}
};

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

@@ -68,7 +68,7 @@ Test.Modules.SPLINE = {
layer.add(line2);
layer.add(line3);
stage.add(layer);
/*
line.transitionTo({
spline: 3,