lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:21:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

preparation work for new Renderer inheritance pattern

Browse Source
This commit is contained in:
Eric Rowell
2012-11-20 23:03:24 -08:00
parent c121e4b941
commit 144e95ad42
20 changed files with 323 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tests/dataUrls/cloneGroup.js Normal file
View File

File diff suppressed because one or more lines are too long

1
tests/dataUrls/customShapeTwoFills.js Normal file
View File

File diff suppressed because one or more lines are too long

2
tests/html/unitTests.html
View File

@@ -10,6 +10,8 @@
<!-- data urls -->
<script src="../dataUrls/groupToImage.js"></script>
<script src="../dataUrls/customShapeTwoFills.js"></script>
<script src="../dataUrls/cloneGroup.js"></script>
<script src="../js/Test.js"></script>

91
tests/js/unit/customShapeTests.js
View File

@@ -1,91 +0,0 @@
Test.Modules['CUSTOM SHAPE'] = {
'custom shape with fill, stroke, and strokeWidth': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
},
x: 200,
y: 100,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
layer.add(shape);
stage.add(layer);
},
'change custom shape draw func': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
},
x: 200,
y: 100,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
shape.setDrawFunc(function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.fill(context);
this.stroke(context);
});
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
rect.setDrawFunc(function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.fill(context);
this.stroke(context);
});
layer.add(shape);
layer.add(rect);
stage.add(layer);
var dataUrl = layer.toDataURL();
test(dataUrls['SHAPE - change custom shape draw func'] === dataUrl, 'problem with setDrawFunc');
}
};

2
tests/js/unit/nodeTests.js
View File

@@ -388,6 +388,8 @@ Test.Modules.NODE = {
stage.draw();
warn(layer.toDataURL() === cloneGroup, 'problem cloning group');
},
'test on attr change': function(containerId) {

143
tests/js/unit/shapeTests.js
View File

@@ -1,5 +1,5 @@
Test.Modules.SHAPE = {
'SHAPE - test intersects()': function(containerId) {
'test intersects()': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -44,5 +44,146 @@ Test.Modules.SHAPE = {
y: 153
}) === false, '(303, 153) should not intersect the shape');
},
'custom shape with two fills and two strokes': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var drawTriangle = function(context) {
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fill(context, 'red');
this.stroke(context, 'black', this.getStrokeWidth(), {
color: 'black',
offset: {
x: 20,
y: 20
},
opacity: 0.5
});
context.beginPath();
context.moveTo(300, 150);
context.lineTo(520, 180);
context.quadraticCurveTo(400, 200, 360, 270);
context.closePath();
this.fill(context, 'green', {
color: 'black',
offset: {
x: 20,
y: 20
},
opacity: 0.5
});
this.stroke(context, 'yellow', this.getStrokeWidth());
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
id: 'myTriangle',
draggable: true
});
stage.add(layer.add(triangle));
warn(layer.toDataURL() === customShapeTwoFills, 'problem with custom shape with two fills');
},
'custom shape with fill, stroke, and strokeWidth': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
},
x: 200,
y: 100,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
layer.add(shape);
stage.add(layer);
},
'change custom shape draw func': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.render(context);
},
x: 200,
y: 100,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
shape.setDrawFunc(function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.render(context);
});
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
rect.setDrawFunc(function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.render(context);
});
layer.add(shape);
layer.add(rect);
stage.add(layer);
var dataUrl = layer.toDataURL();
test(dataUrls['SHAPE - change custom shape draw func'] === dataUrl, 'problem with setDrawFunc');
}
};