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

combined Line, Spline, Blob, and Polygon into a single shape for more flexibility. converted allPoints property into cacheable getTensionPoints method

Browse Source
This commit is contained in:
Eric Rowell
2013-11-30 00:24:47 -08:00
parent 4fafde7451
commit 4b62ecea7c
10 changed files with 154 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
test/unit/Node-test.js
View File

@@ -912,12 +912,13 @@ suite('Node', function() {
y: 93
}];
var poly = new Kinetic.Polygon({
var poly = new Kinetic.Line({
points: points,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
draggable: true
draggable: true,
closed: true
});
group.add(poly);

19
test/unit/shapes/Blob-test.js
View File

@@ -4,7 +4,7 @@ suite('Blob', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var blob = new Kinetic.Blob({
var blob = new Kinetic.Line({
points: [{
x: 73,
y: 140
@@ -22,7 +22,8 @@ suite('Blob', function(){
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.8
tension: 0.8,
closed: true
});
layer.add(blob);
@@ -30,7 +31,7 @@ suite('Blob', function(){
assert.equal(blob.getTension(), 0.8);
assert.equal(blob.getClassName(), 'Blob');
assert.equal(blob.getClassName(), 'Line');
//console.log(blob1.getPoints())
@@ -48,7 +49,7 @@ suite('Blob', function(){
var layer = new Kinetic.Layer();
var blob = new Kinetic.Blob({
var blob = new Kinetic.Line({
tension: 0.8,
points: [{
x: 73,
@@ -66,14 +67,15 @@ suite('Blob', function(){
stroke: 'blue',
strokeWidth: 10,
draggable: true,
fill: '#aaf'
fill: '#aaf',
closed: true
});
layer.add(blob);
stage.add(layer);
assert.equal(stage.find('Blob')[0].getPoints().length, 4);
assert.equal(stage.find('Line')[0].getPoints().length, 4);
});
@@ -82,7 +84,7 @@ suite('Blob', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var blob = new Kinetic.Blob({
var blob = new Kinetic.Line({
points: [{
x: 73,
y: 140
@@ -100,7 +102,8 @@ suite('Blob', function(){
strokeWidth: 10,
draggable: true,
fill: '#aaf',
tension: 0.8
tension: 0.8,
closed: true
});
layer.add(blob);

3
test/unit/shapes/Line-test.js
View File

@@ -18,7 +18,8 @@ suite('Line', function() {
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
draggable: true,
tension: 0
});
layer.add(line);

7
test/unit/shapes/Polygon-test.js
View File

@@ -24,16 +24,17 @@ suite('Polygon', function() {
y: 93
}];
var poly = new Kinetic.Polygon({
var poly = new Kinetic.Line({
points: points,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
strokeWidth: 5,
closed: true
});
layer.add(poly);
stage.add(layer);
assert.equal(poly.getClassName(), 'Polygon');
assert.equal(poly.getClassName(), 'Line');
});
});

26
test/unit/shapes/Spline-test.js
View File

@@ -1,10 +1,10 @@
suite('Spline', function() {
// ======================================================
test('add spline', function() {
test('add splines', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line1 = new Kinetic.Spline({
var line1 = new Kinetic.Line({
points: [{
x: 73,
y: 160
@@ -26,7 +26,7 @@ suite('Spline', function() {
tension: 1
});
var line2 = new Kinetic.Spline({
var line2 = new Kinetic.Line({
points: [{
x: 73,
y: 160
@@ -45,7 +45,7 @@ suite('Spline', function() {
tension: 1
});
var line3 = new Kinetic.Spline({
var line3 = new Kinetic.Line({
points: [{
x: 73,
y: 160
@@ -66,14 +66,12 @@ suite('Spline', function() {
layer.add(line3);
stage.add(layer);
assert.equal(line1.getClassName(), 'Spline');
assert.equal(line1.getClassName(), 'Line');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore();');
});
// ======================================================
@@ -81,7 +79,7 @@ suite('Spline', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
var spline = new Kinetic.Line({
points: [{
x: 73,
y: 160
@@ -107,7 +105,7 @@ suite('Spline', function() {
layer.add(spline);
stage.add(layer);
assert.equal(spline.allPoints.length, 6);
assert.equal(spline.getTensionPoints().length, 6);
spline.setPoints([{
x: 73,
@@ -120,7 +118,7 @@ suite('Spline', function() {
y: 109
}]);
assert.equal(spline.allPoints.length, 3);
assert.equal(spline.getTensionPoints().length, 3);
layer.draw();
@@ -132,7 +130,7 @@ suite('Spline', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
var spline = new Kinetic.Line({
points: [{
x: 73,
y: 160
@@ -175,7 +173,7 @@ suite('Spline', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
var line = new Kinetic.Line({
points: [
73, 160,
340, 23,
@@ -201,7 +199,7 @@ suite('Spline', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
var line = new Kinetic.Line({
points: [{
x: 73,
y: 160
@@ -234,7 +232,7 @@ suite('Spline', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
var line = new Kinetic.Line({
points: [
[73, 160],
[340, 23],