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

decided that the developer should be responsible for setting custom drawing functions, images, and event handlers via selectors rather than a hash map passed into the load() method

Browse Source
This commit is contained in:
Eric Rowell 2012-04-07 18:40:44 -07:00
parent 1a40e50622
commit 0a94c75e22
5 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/kinetic-core.js vendored
View File

@ -1142,13 +1142,8 @@ Kinetic.Stage.prototype = {
/** /**
* load stage with JSON string * load stage with JSON string
*/ */
load: function(json, drawFuncs) { load: function(json) {
function loadNode(node, obj) { function loadNode(node, obj) {
// if custom shape then set draw function
if(obj.nodeType === 'Shape' && obj.shapeType === undefined) {
node.drawFunc = drawFuncs[obj.attrs.drawFuncName];
}
var children = obj.children; var children = obj.children;
if(children !== undefined) { if(children !== undefined) {
for(var n = 0; n < children.length; n++) { for(var n = 0; n < children.length; n++) {
@ -1932,7 +1927,7 @@ Kinetic.Shape = function(config) {
// special // special
this.drawFunc = config.drawFunc; this.drawFunc = config.drawFunc;
this.data = []; this.data = [];
this.nodeType = 'Shape'; this.nodeType = 'Shape';
@ -2079,7 +2074,7 @@ Kinetic.Shape.prototype = {
* @param {Layer} layer Layer that the shape will be drawn on * @param {Layer} layer Layer that the shape will be drawn on
*/ */
_draw: function(layer) { _draw: function(layer) {
if(this.attrs.visible) { if(this.attrs.visible && this.drawFunc !== undefined) {
var stage = layer.getStage(); var stage = layer.getStage();
var context = layer.getContext(); var context = layer.getContext();
var family = []; var family = [];

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

File diff suppressed because one or more lines are too long

4
src/Shape.js
View File

@ -28,7 +28,7 @@ Kinetic.Shape = function(config) {
// special // special
this.drawFunc = config.drawFunc; this.drawFunc = config.drawFunc;
this.data = []; this.data = [];
this.nodeType = 'Shape'; this.nodeType = 'Shape';
@ -175,7 +175,7 @@ Kinetic.Shape.prototype = {
* @param {Layer} layer Layer that the shape will be drawn on * @param {Layer} layer Layer that the shape will be drawn on
*/ */
_draw: function(layer) { _draw: function(layer) {
if(this.attrs.visible) { if(this.attrs.visible && this.drawFunc !== undefined) {
var stage = layer.getStage(); var stage = layer.getStage();
var context = layer.getContext(); var context = layer.getContext();
var family = []; var family = [];

7
src/Stage.js
View File

@ -212,13 +212,8 @@ Kinetic.Stage.prototype = {
/** /**
* load stage with JSON string * load stage with JSON string
*/ */
load: function(json, drawFuncs) { load: function(json) {
function loadNode(node, obj) { function loadNode(node, obj) {
// if custom shape then set draw function
if(obj.nodeType === 'Shape' && obj.shapeType === undefined) {
node.drawFunc = drawFuncs[obj.attrs.drawFuncName];
}
var children = obj.children; var children = obj.children;
if(children !== undefined) { if(children !== undefined) {
for(var n = 0; n < children.length; n++) { for(var n = 0; n < children.length; n++) {

17
tests/js/unitTests.js
View File

@ -126,7 +126,6 @@ Test.prototype.tests = {
}; };
var triangle = new Kinetic.Shape({ var triangle = new Kinetic.Shape({
drawFunc: drawTriangle, drawFunc: drawTriangle,
drawFuncName: 'drawTriangle',
fill: "#00D2FF", fill: "#00D2FF",
stroke: "black", stroke: "black",
strokeWidth: 4 strokeWidth: 4
@ -139,7 +138,7 @@ Test.prototype.tests = {
//console.log(stage.toJSON()); //console.log(stage.toJSON());
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"drawFuncName":"drawTriangle"},"nodeType":"Shape"}]}]}]}'; var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Shape"}]}]}]}';
test(stage.toJSON() === expectedJson, "problem with serialization"); test(stage.toJSON() === expectedJson, "problem with serialization");
}, },
@ -159,10 +158,15 @@ Test.prototype.tests = {
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
}; };
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"drawFuncName":"drawTriangle"},"nodeType":"Shape"}]}]}]}';
stage.load(json, { var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Shape"}]}]}]}';
drawTriangle: drawTriangle stage.load(json);
});
var customShape = stage.getChildren()[0].getChildren()[0].getChildren()[0];
customShape.setDrawFunc(drawTriangle);
stage.draw();
//console.log(stage.toJSON()); //console.log(stage.toJSON());
@ -1160,6 +1164,7 @@ Test.prototype.tests = {
test(text.getTextSize().height > 0, 'text height should have a value'); test(text.getTextSize().height > 0, 'text height should have a value');
test(text.getTextWidth() > 0, 'text width should have a value'); test(text.getTextWidth() > 0, 'text width should have a value');
test(text.getTextHeight() > 0, 'text height should have a value'); test(text.getTextHeight() > 0, 'text height should have a value');
}, },
'SHAPES - get shape name': function(containerId) { 'SHAPES - get shape name': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({