added data url support for Kinetic.Image, and added unit tests

This commit is contained in:
Eric Rowell 2012-07-14 18:32:00 -07:00
parent 4692c51c74
commit 864938ed33
4 changed files with 76 additions and 10 deletions

18
dist/kinetic-core.js vendored
View File

@ -80,15 +80,18 @@ Kinetic.Type = {
_isFunction: function(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isObject: function(obj) {
return (!!obj && obj.constructor == Object);
},
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isNumber: function(obj) {
return Object.prototype.toString.call(obj) == '[object Number]';
},
_isString: function(obj) {
return Object.prototype.toString.call(obj) == '[object String]';
},
/*
* other utils
*/
@ -280,7 +283,14 @@ Kinetic.Type = {
return arg;
}
//if arg is image data, then convert it
// if arg is a string, then it's a data url
if(this._isString(arg)) {
var imageObj = new Image();
imageObj.src = arg;
return imageObj;
}
//if arg is an object that contains the data property, it's an image object
if(arg.data) {
var canvas = document.createElement('canvas');
canvas.width = arg.width;

File diff suppressed because one or more lines are too long

View File

@ -15,15 +15,18 @@ Kinetic.Type = {
_isFunction: function(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isObject: function(obj) {
return (!!obj && obj.constructor == Object);
},
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isNumber: function(obj) {
return Object.prototype.toString.call(obj) == '[object Number]';
},
_isString: function(obj) {
return Object.prototype.toString.call(obj) == '[object String]';
},
/*
* other utils
*/
@ -215,7 +218,14 @@ Kinetic.Type = {
return arg;
}
//if arg is image data, then convert it
// if arg is a string, then it's a data url
if(this._isString(arg)) {
var imageObj = new Image();
imageObj.src = arg;
return imageObj;
}
//if arg is an object that contains the data property, it's an image object
if(arg.data) {
var canvas = document.createElement('canvas');
canvas.width = arg.width;

View File

@ -2032,6 +2032,52 @@ Test.prototype.tests = {
layer.add(image);
layer.draw();
test(Kinetic.Type._isElement(image.getImage()), 'image property should have been converted to an image element');
},
'SHAPE - add image with data url': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Ellipse({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
var circle2 = new Kinetic.Ellipse({
x: 150,
y: stage.getHeight() / 2,
radius: 70,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
group.add(circle);
group.add(circle2);
layer.add(group);
stage.add(layer);
var image = new Kinetic.Image({
image: layer.toDataURL(),
x: 200,
y: 0,
draggable: true
});
layer.add(image);
layer.draw();
test(Kinetic.Type._isElement(image.getImage()), 'image property should have been converted to an image element');
},
'SHAPE - set image fill to color then image': function(containerId) {
var imageObj = new Image();