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

added support for image de-serialization and cleaned up some of the Shape attr default logic

Browse Source
This commit is contained in:
Eric Rowell 2012-04-07 19:08:16 -07:00
parent d3b025254a
commit 3243e5f8ff
5 changed files with 100 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
dist/kinetic-core.js vendored
View File

@ -1943,16 +1943,6 @@ Kinetic.Shape = function(config) {
this.data = []; this.data = [];
this.nodeType = 'Shape'; this.nodeType = 'Shape';
// defaults
if(config.stroke !== undefined || config.strokeWidth !== undefined) {
if(config.stroke === undefined) {
config.stroke = 'black';
}
else if(config.strokeWidth === undefined) {
config.strokeWidth = 2;
}
}
// call super constructor // call super constructor
Kinetic.Node.apply(this, [config]); Kinetic.Node.apply(this, [config]);
}; };
@ -1987,7 +1977,16 @@ Kinetic.Shape.prototype = {
context.fillStyle = this.attrs.fill; context.fillStyle = this.attrs.fill;
context.fill(); context.fill();
} }
if(this.attrs.stroke !== undefined) {
var stroke, strokeWidth;
if(this.attrs.stroke !== undefined || this.attrs.strokeWidth !== undefined) {
if(this.attrs.stroke === undefined) {
stroke = 'black';
}
else if(this.attrs.strokeWidth === undefined) {
strokeWidth = 2;
}
context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth; context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke; context.strokeStyle = this.attrs.stroke;
context.stroke(); context.stroke();
@ -2297,16 +2296,18 @@ Kinetic.Image = function(config) {
this.shapeType = "Image"; this.shapeType = "Image";
config.drawFunc = function() { config.drawFunc = function() {
var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width; if(this.image !== undefined) {
var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height; var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width;
var canvas = this.getCanvas(); var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height;
var context = this.getContext(); var canvas = this.getCanvas();
context.beginPath(); var context = this.getContext();
this.applyLineJoin(); context.beginPath();
context.rect(0, 0, width, height); this.applyLineJoin();
context.closePath(); context.rect(0, 0, width, height);
this.fillStroke(); context.closePath();
context.drawImage(this.image, 0, 0, width, height); this.fillStroke();
context.drawImage(this.image, 0, 0, width, height);
}
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

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

File diff suppressed because one or more lines are too long

21
src/Shape.js
View File

@ -32,16 +32,6 @@ Kinetic.Shape = function(config) {
this.data = []; this.data = [];
this.nodeType = 'Shape'; this.nodeType = 'Shape';
// defaults
if(config.stroke !== undefined || config.strokeWidth !== undefined) {
if(config.stroke === undefined) {
config.stroke = 'black';
}
else if(config.strokeWidth === undefined) {
config.strokeWidth = 2;
}
}
// call super constructor // call super constructor
Kinetic.Node.apply(this, [config]); Kinetic.Node.apply(this, [config]);
}; };
@ -76,7 +66,16 @@ Kinetic.Shape.prototype = {
context.fillStyle = this.attrs.fill; context.fillStyle = this.attrs.fill;
context.fill(); context.fill();
} }
if(this.attrs.stroke !== undefined) {
var stroke, strokeWidth;
if(this.attrs.stroke !== undefined || this.attrs.strokeWidth !== undefined) {
if(this.attrs.stroke === undefined) {
stroke = 'black';
}
else if(this.attrs.strokeWidth === undefined) {
strokeWidth = 2;
}
context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth; context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke; context.strokeStyle = this.attrs.stroke;
context.stroke(); context.stroke();

22
src/shapes/Image.js
View File

@ -18,16 +18,18 @@ Kinetic.Image = function(config) {
this.shapeType = "Image"; this.shapeType = "Image";
config.drawFunc = function() { config.drawFunc = function() {
var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width; if(this.image !== undefined) {
var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height; var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width;
var canvas = this.getCanvas(); var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height;
var context = this.getContext(); var canvas = this.getCanvas();
context.beginPath(); var context = this.getContext();
this.applyLineJoin(); context.beginPath();
context.rect(0, 0, width, height); this.applyLineJoin();
context.closePath(); context.rect(0, 0, width, height);
this.fillStroke(); context.closePath();
context.drawImage(this.image, 0, 0, width, height); this.fillStroke();
context.drawImage(this.image, 0, 0, width, height);
}
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);

60
tests/js/unitTests.js
View File

@ -693,6 +693,58 @@ Test.prototype.tests = {
}; };
imageObj.src = '../darth-vader.jpg'; imageObj.src = '../darth-vader.jpg';
}, },
'STAGE - serialize stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
centerOffset: {
x: 50,
y: imageObj.height / 2
}
});
layer.add(darth);
stage.add(layer);
var json = stage.toJSON();
//console.log(json);
test(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":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Shape","shapeType":"Image"}]}]}', 'problem serializing stage');
};
imageObj.src = '../darth-vader.jpg';
},
'STAGE - load stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Shape","shapeType":"Image"}]}]}';
stage.load(json);
var image = stage.getChildren()[0].getChildren()[0];
image.setImage(imageObj);
stage.draw();
};
imageObj.src = '../darth-vader.jpg';
},
'SHAPES - add polygon': function(containerId) { 'SHAPES - add polygon': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -907,7 +959,7 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
}, },
'SHAPES - use default stroke': function(containerId) { 'SHAPES - use default stroke (stroke color should be black)': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -924,10 +976,8 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
test(rect.getStroke() === 'black', 'stroke should be black');
}, },
'SHAPES - use default stroke width': function(containerId) { 'SHAPES - use default stroke width (stroke width should be 2)': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -944,8 +994,6 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
test(rect.getStrokeWidth() === 2, 'stroke width should be 2');
}, },
'SHAPES - set center offset after instantiation': function(containerId) { 'SHAPES - set center offset after instantiation': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({