lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

flattened fill attr, created new Node getter and setter generators that handle type conversions for points, sizes, and rotations

Browse Source
This commit is contained in:
Eric Rowell
2013-01-01 23:54:02 -08:00
parent 522607695f
commit a53db90d0a
7 changed files with 309 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/Canvas.js
View File

@@ -214,76 +214,75 @@
};
Kinetic.SceneCanvas.prototype = {
_fillColor: function(shape) {
var context = this.context, fill = shape.getFill();
context.fillStyle = fill;
context.fill(context);
},
_fillPattern: function(shape) {
var context = this.context, fillPatternImage = shape.getFillPatternImage(), fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScale = shape.getFillPatternScale(), fillPatternRotation = shape.getFillPatternRotation(), fillPatternOffset = shape.getFillPatternOffset(), fillPatternRepeat = shape.getFillPatternRepeat();
if(fillPatternX || fillPatternY) {
context.translate(fillPatternX || 0, fillPatternY || 0);
}
if(fillPatternRotation) {
context.rotate(fillPatternRotation);
}
if(fillPatternScale) {
context.scale(fillPatternScale.x, fillPatternScale.y);
}
if(fillPatternOffset) {
context.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
}
context.fillStyle = context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat');
context.fill(context);
},
_fillLinearGradient: function(shape) {
var context = this.context, start = shape.getFillLinearGradientStartPoint(), end = shape.getFillLinearGradientEndPoint(), colorStops = shape.getFillLinearGradientColorStops(), grd = context.createLinearGradient(start.x, start.y, end.x, end.y);
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
context.fillStyle = grd;
context.fill(context);
},
_fillRadialGradient: function(shape) {
var context = this.context, start = shape.getFillRadialGradientStartPoint(), end = shape.getFillRadialGradientEndPoint(), startRadius = shape.getFillRadialGradientStartRadius(), endRadius = shape.getFillRadialGradientEndRadius(), colorStops = shape.getFillRadialGradientColorStops(), grd = context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
context.fillStyle = grd;
context.fill(context);
},
_fill: function(shape, skipShadow) {
var context = this.context, fill = shape.getFill(), fillType = shape._getFillType(fill);
var context = this.context, fill = shape.getFill(), fillPatternImage = shape.getFillPatternImage(), fillLinearGradientStartPoint = shape.getFillLinearGradientStartPoint(), fillRadialGradientStartPoint = shape.getFillRadialGradientStartPoint();
context.save();
if(!skipShadow && shape.hasShadow()) {
this._applyShadow(shape);
}
if(fill) {
context.save();
this._fillColor(shape);
}
else if(fillPatternImage) {
this._fillPattern(shape);
}
else if(fillLinearGradientStartPoint) {
this._fillLinearGradient(shape);
}
else if(fillRadialGradientStartPoint) {
this._fillRadialGradient(shape);
}
context.restore();
if(!skipShadow && shape.hasShadow()) {
this._applyShadow(shape);
}
// color fill
switch(fillType) {
case 'COLOR':
context.fillStyle = fill;
context.fill(context);
break;
case 'PATTERN':
if(fill.x || fill.y) {
context.translate(fill.x || 0, fill.y || 0);
}
if(fill.rotation) {
context.rotate(fill.rotation);
}
if(fill.scale) {
context.scale(fill.scale.x, fill.scale.y);
}
if(fill.offset) {
context.translate(-1 * fill.offset.x, -1 * fill.offset.y);
}
context.fillStyle = context.createPattern(fill.image, fill.repeat || 'repeat');
context.fill(context);
break;
case 'LINEAR_GRADIENT':
var s = fill.start;
var e = fill.end;
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
var colorStops = fill.colorStops;
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
context.fillStyle = grd;
context.fill(context);
break;
case 'RADIAL_GRADIENT':
var s = fill.start;
var e = fill.end;
var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
var colorStops = fill.colorStops;
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
context.fillStyle = grd;
context.fill(context);
break;
default:
context.fillStyle = 'black';
context.fill(context);
break;
}
context.restore();
if(!skipShadow && shape.hasShadow()) {
this._fill(shape, true);
}
if(!skipShadow && shape.hasShadow()) {
this._fill(shape, true);
}
},
_stroke: function(shape, skipShadow) {

157
src/Node.js
View File

@@ -428,14 +428,6 @@
this.setPosition(x, y);
},
/**
* get rotation in degrees
* @name getRotationDeg
* @methodOf Kinetic.Node.prototype
*/
getRotationDeg: function() {
return Kinetic.Type._radToDeg(this.getRotation());
},
_eachAncestorReverse: function(func, includeSelf) {
var family = [], parent = this.getParent();
@@ -453,15 +445,6 @@
func(family[n]);
}
},
/**
* set rotation in degrees
* @name setRotationDeg
* @methodOf Kinetic.Node.prototype
* @param {Number} deg
*/
setRotationDeg: function(deg) {
this.setRotation(Kinetic.Type._degToRad(deg));
},
/**
* rotate node by an amount in radians relative to its current rotation
* @name rotate
@@ -798,42 +781,6 @@
config.callback(img);
});
},
/**
* set offset. A node's offset defines the position and rotation point
* @name setOffset
* @methodOf Kinetic.Node.prototype
* @param {Number} x
* @param {Number} y
*/
setOffset: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
if(pos.x === undefined) {
pos.x = this.getOffset().x;
}
if(pos.y === undefined) {
pos.y = this.getOffset().y;
}
this.setAttr('offset', pos);
},
/**
* set scale.
* @name setScale
* @param {Number} x
* @param {Number} y
* @methodOf Kinetic.Node.prototype
*/
setScale: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
if(pos.x === undefined) {
pos.x = this.getScale().x;
}
if(pos.y === undefined) {
pos.y = this.getScale().y;
}
this.setAttr('scale', pos);
},
/**
* set size
* @name setSize
@@ -992,6 +939,20 @@
this._addSetter(constructor, attr);
}
};
Kinetic.Node.addPointSetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addPointSetter(constructor, attr);
}
};
Kinetic.Node.addRotationSetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addRotationSetter(constructor, attr);
}
};
Kinetic.Node.addGetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
@@ -999,10 +960,25 @@
this._addGetter(constructor, attr);
}
};
Kinetic.Node.addRotationGetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addRotationGetter(constructor, attr);
}
};
Kinetic.Node.addGettersSetters = function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node.addPointGettersSetters = function(constructor, arr) {
this.addPointSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node.addRotationGettersSetters = function(constructor, arr) {
this.addRotationSetters(constructor, arr);
this.addRotationGetters(constructor, arr);
};
Kinetic.Node._addSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
@@ -1010,6 +986,32 @@
this.setAttr(attr, val);
};
};
Kinetic.Node._addPointSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
if(pos && pos.x === undefined) {
pos.x = this.attrs[attr].x;
}
if(pos && pos.y === undefined) {
pos.y = this.attrs[attr].y;
}
this.setAttr(attr, pos);
};
};
Kinetic.Node._addRotationSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
// radians
constructor.prototype[method] = function(val) {
this.setAttr(attr, val);
};
// degrees
constructor.prototype[method + 'Deg'] = function(deg) {
this.setAttr(attr, Kinetic.Type._degToRad(deg));
};
};
Kinetic.Node._addGetter = function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
@@ -1017,6 +1019,18 @@
return this.attrs[attr];
};
};
Kinetic.Node._addRotationGetter = function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
// radians
constructor.prototype[method] = function() {
return this.attrs[attr];
};
// degrees
constructor.prototype[method + 'Deg'] = function() {
return Kinetic.Type._radToDeg(this.attrs[attr])
};
};
/**
* create node with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the
@@ -1067,10 +1081,12 @@
return no;
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id']);
Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'opacity', 'name', 'id']);
Kinetic.Node.addRotationGettersSetters(Kinetic.Node, ['rotation']);
Kinetic.Node.addPointGettersSetters(Kinetic.Node, ['scale', 'offset']);
Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible']);
// aliases
/**
* Alias of getListening()
@@ -1218,4 +1234,33 @@
* @name getOffset
* @methodOf Kinetic.Node.prototype
*/
/**
* get rotation in degrees
* @name getRotationDeg
* @methodOf Kinetic.Node.prototype
*/
/**
* set rotation in degrees
* @name setRotationDeg
* @methodOf Kinetic.Node.prototype
* @param {Number} deg
*/
/**
* set scale.
* @name setScale
* @param {Number} x
* @param {Number} y
* @methodOf Kinetic.Node.prototype
*/
/**
* set offset. A node's offset defines the position and rotation point
* @name setOffset
* @methodOf Kinetic.Node.prototype
* @param {Number} x
* @param {Number} y
*/
})();

125
src/Shape.js
View File

@@ -5,22 +5,27 @@
* @constructor
* @augments Kinetic.Node
* @param {Object} config
* @param {String|Object} [config.fill] can be a string color, a linear gradient object, a radial
* gradient object, or a pattern object.
* @param {Image} [config.fill.image] image object if filling the shape with a pattern
* @param {Object} [config.fill.offset] pattern offset if filling the shape with a pattern
* @param {Number} [config.fill.offset.x]
* @param {Number} [config.fill.offset.y]
* @param {Object} [config.fill.start] start point if using a linear gradient or
* radial gradient fill
* @param {Number} [config.fill.start.x]
* @param {Number} [config.fill.start.y]
* @param {Number} [config.fill.start.radius] start radius if using a radial gradient fill
* @param {Object} [config.fill.end] end point if using a linear gradient or
* radial gradient fill
* @param {Number} [config.fill.end.x]
* @param {Number} [config.fill.end.y]
* @param {Number} [config.fill.end.radius] end radius if using a radial gradient fill
* -------------------------------------------------
* @param {String} [config.fill] fill color
* -------------------------------------------------
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
* -------------------------------------------------
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
* -------------------------------------------------
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
* -------------------------------------------------
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] line join can be miter, round, or bevel. The default
@@ -85,80 +90,6 @@
hasShadow: function() {
return !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffset());
},
_getFillType: function(fill) {
var type = Kinetic.Type;
if(!fill) {
return undefined;
}
else if(type._isString(fill)) {
return 'COLOR';
}
else if(fill.image) {
return 'PATTERN';
}
else if(fill.start && fill.end && !fill.start.radius && !fill.end.radius) {
return 'LINEAR_GRADIENT';
}
else if(fill.start && fill.end && type._isNumber(fill.start.radius) && type._isNumber(fill.end.radius)) {
return 'RADIAL_GRADIENT';
}
else {
return 'UNKNOWN';
}
},
/**
* set shadow offset
* @name setShadowOffset
* @methodOf Kinetic.Shape.prototype
* @param {Number|Array|Object} offset
*/
setShadowOffset: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
if(pos.x === undefined) {
pos.x = this.getShadowOffset().x;
}
if(pos.y === undefined) {
pos.y = this.getShadowOffset().y;
}
this.setAttr('shadowOffset', pos);
},
/**
* set fill which can be a color, linear gradient object,
* radial gradient object, or pattern object
* @name setFill
* @methodOf Kinetic.Shape.prototype
* @param {Object} fill
*/
setFill: function(fill) {
var type = Kinetic.Type;
var oldFill = this.getFill();
var fillType = this._getFillType(fill);
var oldFillType = this._getFillType(oldFill);
var newOrOldFillIsColor = fillType === 'COLOR' || oldFillType === 'COLOR';
var changedFillType = fillType === oldFillType || fillType === 'UNKNOWN';
// normalize properties
if(fill.offset !== undefined) {
fill.offset = type._getXY(fill.offset);
}
if(fill.scale !== undefined) {
fill.scale = type._getXY(fill.scale);
}
if(fill.rotationDeg !== undefined) {
fill.rotation = type._degToRad(fill.rotationDeg);
}
/*
* merge fill objects if neither the new or old fill
* is type is COLOR, and if if the fill type has not changed. Otherwise,
* overwrite the fill entirely
*/
if(!newOrOldFillIsColor && changedFillType) {
fill = type._merge(fill, oldFill);
}
this.setAttr('fill', fill);
},
/**
* set width and height
* @name setSize
@@ -245,8 +176,11 @@
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity']);
Kinetic.Node.addGetters(Kinetic.Shape, ['shadowOffset', 'fill']);
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat']);
Kinetic.Node.addPointGettersSetters(Kinetic.Shape, ['fillPatternOffset', 'fillPatternScale', 'fillLinearGradientStartPoint', 'fillLinearGradientEndPoint', 'fillRadialGradientStartPoint', 'fillRadialGradientEndPoint', 'shadowOffset']);
Kinetic.Node.addRotationGettersSetters(Kinetic.Shape, ['fillPatternRotation']);
/**
* set stroke color
@@ -325,6 +259,13 @@
* @param {Number} opacity must be a value between 0 and 1
*/
/**
* set shadow offset
* @name setShadowOffset
* @methodOf Kinetic.Shape.prototype
* @param {Number|Array|Object} offset
*/
/**
* get stroke color
* @name getStroke

10
src/util/Type.js
View File

@@ -89,10 +89,7 @@
}
// default
return {
x: 0,
y: 0
};
return null;
},
/*
* The argument can be:
@@ -171,10 +168,7 @@
}
// default
return {
width: 0,
height: 0
};
return null;
},
/*
* arg will be an array of numbers or

125
tests/js/unit/shapeTests.js
View File

@@ -54,7 +54,7 @@ Test.Modules.SHAPE = {
var layer = new Kinetic.Layer();
var drawTriangle = function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
@@ -100,7 +100,7 @@ Test.Modules.SHAPE = {
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
@@ -128,7 +128,7 @@ Test.Modules.SHAPE = {
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
@@ -145,7 +145,7 @@ Test.Modules.SHAPE = {
});
shape.setDrawFunc(function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
@@ -166,7 +166,7 @@ Test.Modules.SHAPE = {
});
rect.setDrawFunc(function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
@@ -200,21 +200,15 @@ Test.Modules.SHAPE = {
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: {
image: imageObj,
x: -20,
y: -30,
scale: {
x: 0.5,
y: 0.5
},
offset: {
x: 219,
y: 150
},
rotation: Math.PI * 0.5,
repeat: 'no-repeat'
},
fillPatternImage: imageObj,
fillPatternX: -20,
fillPatternY: -30,
fillPatternScale: 0.5,
fillPatternOffset: [219, 150],
fillPatternRotation: Math.PI * 0.5,
fillPatternRepeat: 'no-repeat',
stroke: 'blue',
strokeWidth: 5,
draggable: true
@@ -230,33 +224,27 @@ Test.Modules.SHAPE = {
anim.start();
*/
test(star.getFill().x === -20, 'star fill x should be -20');
test(star.getFill().y === -30, 'star fill y should be -30');
test(star.getFill().scale.x === 0.5, 'star fill scale x should be 0.5');
test(star.getFill().scale.y === 0.5, 'star fill scale y should be 0.5');
test(star.getFill().offset.x === 219, 'star fill offset x should be 219');
test(star.getFill().offset.y === 150, 'star fill offset y should be 150');
test(star.getFill().rotation === Math.PI * 0.5, 'star fill rotation should be Math.PI * 0.5');
test(star.getFillPatternX() === -20, 'star fill x should be -20');
test(star.getFillPatternY() === -30, 'star fill y should be -30');
test(star.getFillPatternScale().x === 0.5, 'star fill scale x should be 0.5');
test(star.getFillPatternScale().y === 0.5, 'star fill scale y should be 0.5');
test(star.getFillPatternOffset().x === 219, 'star fill offset x should be 219');
test(star.getFillPatternOffset().y === 150, 'star fill offset y should be 150');
test(star.getFillPatternRotation() === Math.PI * 0.5, 'star fill rotation should be Math.PI * 0.5');
star.setFill({
rotationDeg: 180
});
test(star.getFill().rotation === Math.PI, 'star fill rotation should be Math.PI');
star.setFill({
scale: 1
});
test(star.getFill().scale.x === 1, 'star fill scale x should be 1');
test(star.getFill().scale.y === 1, 'star fill scale y should be 1');
star.setFill({
offset: [100, 120]
});
test(star.getFill().offset.x === 100, 'star fill offset x should be 100');
test(star.getFill().offset.y === 120, 'star fill offset y should be 120');
star.setFillPatternRotationDeg(180);
test(star.getFillPatternRotation() === Math.PI, 'star fill rotation should be Math.PI');
star.setFillPatternScale(1);
test(star.getFillPatternScale().x === 1, 'star fill scale x should be 1');
test(star.getFillPatternScale().y === 1, 'star fill scale y should be 1');
star.setFillPatternOffset([100, 120]);
test(star.getFillPatternOffset().x === 100, 'star fill offset x should be 100');
test(star.getFillPatternOffset().y === 120, 'star fill offset y should be 120');
};
imageObj.src = '../assets/darth-vader.jpg';
@@ -328,5 +316,50 @@ Test.Modules.SHAPE = {
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
},
'set image fill to color then image then linear gradient then back to 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();
var circle = new Kinetic.Circle({
x: 200,
y: 60,
radius: 50,
fill: 'blue'
});
layer.add(circle);
stage.add(layer);
test(circle.getFill() === 'blue', 'circle fill should be blue');
circle.setFill(null);
circle.setFillPatternImage(imageObj);
circle.setFillPatternRepeat('no-repeat');
circle.setFillPatternOffset([-200, -70]);
test(circle.getFillPatternImage() !== undefined, 'circle fill image should be defined');
test(circle.getFillPatternRepeat() === 'no-repeat', 'circle fill repeat should be no-repeat');
test(circle.getFillPatternOffset().x === -200, 'circle fill offset x should be -200');
test(circle.getFillPatternOffset().y === -70, 'circle fill offset y should be -70');
circle.setFillPatternImage(null);
circle.setFillLinearGradientStartPoint(-35);
circle.setFillLinearGradientEndPoint(35);
circle.setFillLinearGradientColorStops([0, 'red', 1, 'blue']);
circle.setFillLinearGradientStartPoint(null);
circle.setFillPatternImage(imageObj);
circle.setFillPatternRepeat('repeat');
circle.setFillPatternOffset(0);
layer.draw();
};
imageObj.src = '../assets/darth-vader.jpg';
}
};

106
tests/js/unit/shapes/circleTests.js
View File

@@ -48,12 +48,9 @@ Test.Modules.CIRCLE = {
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70],
scale: 0.7
},
fillPatternImage: imageObj,
fillPatternOffset: -5,
fillPatternScale: 0.7,
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
@@ -64,48 +61,22 @@ Test.Modules.CIRCLE = {
layer.add(group);
stage.add(layer);
test(circle.getFill().repeat === 'no-repeat', 'repeat option should be no-repeat');
test(circle.getFill().offset.x === -200, 'fill offset x should be -200');
test(circle.getFill().offset.y === -70, 'fill offset y should be -70');
test(circle.getFillPatternOffset().x === -5, 'fill offset x should be -5');
test(circle.getFillPatternOffset().y === -5, 'fill offset y should be -5');
/*
* test offset setting
*/
circle.setFill({
offset: [1, 2]
});
test(circle.getFill().offset.x === 1, 'fill offset x should be 1');
test(circle.getFill().offset.y === 2, 'fill offset y should be 2');
circle.setFillPatternOffset(1, 2);
test(circle.getFillPatternOffset().x === 1, 'fill offset x should be 1');
test(circle.getFillPatternOffset().y === 2, 'fill offset y should be 2');
circle.setFill({
offset: {
x: 3,
y: 4
}
circle.setFillPatternOffset({
x: 3,
y: 4
});
test(circle.getFill().offset.x === 3, 'fill offset x should be 3');
test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
circle.setFill({
offset: {
x: 5
}
});
test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
circle.setFill({
offset: {
y: 6
}
});
test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
test(circle.getFill().offset.y === 6, 'fill offset y should be 6');
circle.setFill({
offset: [-200, -70]
});
test(circle.getFillPatternOffset().x === 3, 'fill offset x should be 3');
test(circle.getFillPatternOffset().y === 4, 'fill offset y should be 4');
};
imageObj.src = '../assets/darth-vader.jpg';
@@ -122,19 +93,11 @@ Test.Modules.CIRCLE = {
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
start: {
x: -20,
y: -20,
radius: 0
},
end: {
x: -60,
y: -60,
radius: 130
},
colorStops: [0, 'red', 0.2, 'yellow', 1, 'blue']
},
fillRadialGradientStartPoint: -20,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: -60,
fillRadialGradientEndRadius: 130,
fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
name: 'myCircle',
draggable: true,
scale: {
@@ -147,19 +110,15 @@ Test.Modules.CIRCLE = {
layer.add(group);
stage.add(layer);
var fill = circle.getFill();
test(circle.getFillRadialGradientStartPoint().x === -20, 'fill start x should be 20');
test(circle.getFillRadialGradientStartPoint().y === -20, 'fill start y should be 20');
test(circle.getFillRadialGradientStartRadius() === 0, 'fill start radius should be 0');
test(fill.start.x === -20, 'fill start x should be 20');
test(fill.start.y === -20, 'fill start y should be 20');
test(fill.start.radius === 0, 'fill start radius should be 0');
test(circle.getFillRadialGradientEndPoint().x === -60, 'fill end x should be 60');
test(circle.getFillRadialGradientEndPoint().y === -60, 'fill end y should be 60');
test(circle.getFillRadialGradientEndRadius() === 130, 'fill end radius should be 130');
test(fill.end.x === -60, 'fill end x should be 60');
test(fill.end.y === -60, 'fill end y should be 60');
test(fill.end.radius === 130, 'fill end radius should be 130');
test(fill.colorStops.length === 6, 'fill colorStops length should be 6');
test(circle.getFillRadialGradientColorStops().length === 6, 'fill colorStops length should be 6');
},
'add circle': function(containerId) {
@@ -192,17 +151,9 @@ Test.Modules.CIRCLE = {
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
start: {
x: -35,
y: -35
},
end: {
x: 35,
y: 35
},
colorStops: [0, 'red', 1, 'blue']
},
fillLinearGradientStartPoint: -35,
fillLinearGradientEndPoint: 35,
fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
@@ -215,7 +166,6 @@ Test.Modules.CIRCLE = {
test(circle.getName() === 'myCircle', 'circle name should be myCircle');
},
'add circle with opacity': function(containerId) {
var stage = new Kinetic.Stage({

56
tests/js/unit/shapes/imageTests.js
View File

@@ -335,62 +335,6 @@ Test.Modules.IMAGE = {
};
imageObj.src = '../assets/darth-vader.jpg';
},
'set image fill to color then image then linear gradient then back to 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();
var circle = new Kinetic.Circle({
x: 200,
y: 60,
radius: 50,
fill: 'blue'
});
layer.add(circle);
stage.add(layer);
test(circle.getFill() === 'blue', 'circle fill should be blue');
circle.setFill({
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70]
});
test(circle.getFill().image !== undefined, 'circle fill image should be defined');
test(circle.getFill().repeat === 'no-repeat', 'circle fill repeat should be no-repeat');
test(circle.getFill().offset.x === -200, 'circle fill offset x should be -200');
test(circle.getFill().offset.y === -70, 'circle fill offset y should be -70');
circle.setFill({
start: {
x: -35,
y: -35
},
end: {
x: 35,
y: 35
},
colorStops: [0, 'red', 1, 'blue']
});
test(circle.getFill().image === undefined, 'circle fill image should be undefined');
circle.setFill({
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70]
});
layer.draw();
};
imageObj.src = '../assets/darth-vader.jpg';
},
'apply shadow to transparent image': function(containerId) {
var imageObj = new Image();