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

added drawFunc property to layer so that layers can easily draw non-node background graphics

Browse Source
This commit is contained in:
Eric Rowell
2012-05-09 18:53:20 -07:00
parent a27741ce03
commit 16c251bb97
6 changed files with 103 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
tests/js/functionalTests.js
View File

@@ -1151,6 +1151,45 @@ Test.prototype.tests = {
layer.add(redCircle);
stage.add(layer);
},
'DRAG AND DROP - custom draw func and drag and drop layer': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
drawFunc: function() {
var context = this.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
context.fillStyle = 'blue';
context.fill();
},
draggable: true
});
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
var circle2 = new Kinetic.Circle({
x: 400,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green'
});
layer.add(circle);
layer.add(circle2);
stage.add(layer);
},
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -1187,12 +1226,12 @@ Test.prototype.tests = {
layer.draw();
var trans = null;
var trans = null;
star.on('dragstart', function() {
if (trans) {
trans.stop();
}
if(trans) {
trans.stop();
}
star.setAttrs({
shadowOffset: {
x: 15,

43
tests/js/unitTests.js
View File

@@ -113,6 +113,33 @@ Test.prototype.tests = {
stage.add(layer);
},
'STAGE - add shape with alpha': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 9999
});
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
group.add(circle);
layer.add(group);
stage.add(layer);
circle.setAlpha(0.5);
layer.draw();
circle.setAlpha(0.5);
layer.draw();
},
'STAGE - add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -1410,15 +1437,15 @@ Test.prototype.tests = {
star.setLineJoin('bevel');
test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
star.setLineJoin('round');
/*
stage.onFrame(function(frame) {
star.rotate(1 * frame.timeDiff / 1000);
layer.draw();
});
star.setLineJoin('round');
/*
stage.onFrame(function(frame) {
star.rotate(1 * frame.timeDiff / 1000);
layer.draw();
});
stage.start();
*/
stage.start();
*/
},
'SHAPES - add stroke rect': function(containerId) {
var stage = new Kinetic.Stage({