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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: May 08 2012
* Date: May 09 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -2220,6 +2220,7 @@ Kinetic.Layer = function(config) {
this.lastDrawTime = 0;
this.beforeDrawFunc = undefined;
this.afterDrawFunc = undefined;
this.drawFunc = undefined;
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
@ -2344,6 +2345,12 @@ Kinetic.Layer.prototype = {
this.clear();
if(this.attrs.visible) {
// draw custom func
if (this.drawFunc !== undefined) {
this.drawFunc();
}
// draw children
this._drawChildren();
}
@ -2432,7 +2439,7 @@ Kinetic.Shape = function(config) {
lineJoin: undefined,
detectionType: 'path',
shadowColor: undefined,
shadowBlur: undefined,
shadowBlur: 5,
shadowOffset: {
x: 0,
y: 0
@ -2548,7 +2555,8 @@ Kinetic.Shape.prototype = {
}
},
/**
* apply shadow helper method
* apply shadow based on shadowColor, shadowBlur,
* and shadowOffset properties
*/
applyShadow: function() {
var context = this.getContext();

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
src/Layer.js
View File

@ -18,6 +18,7 @@ Kinetic.Layer = function(config) {
this.lastDrawTime = 0;
this.beforeDrawFunc = undefined;
this.afterDrawFunc = undefined;
this.drawFunc = undefined;
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
@ -142,6 +143,12 @@ Kinetic.Layer.prototype = {
this.clear();
if(this.attrs.visible) {
// draw custom func
if (this.drawFunc !== undefined) {
this.drawFunc();
}
// draw children
this._drawChildren();
}

5
src/Shape.js
View File

@ -23,7 +23,7 @@ Kinetic.Shape = function(config) {
lineJoin: undefined,
detectionType: 'path',
shadowColor: undefined,
shadowBlur: undefined,
shadowBlur: 5,
shadowOffset: {
x: 0,
y: 0
@ -139,7 +139,8 @@ Kinetic.Shape.prototype = {
}
},
/**
* apply shadow helper method
* apply shadow based on shadowColor, shadowBlur,
* and shadowOffset properties
*/
applyShadow: function() {
var context = this.getContext();

47
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({