diff --git a/Gruntfile.js b/Gruntfile.js
index b092380d..6ab0d6e3 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -8,8 +8,7 @@ module.exports = function(grunt) {
'src/Factory.js',
'src/Node.js',
- // filters
- 'src/filters/FilterWrapper.js',
+ // filters
'src/filters/Grayscale.js',
'src/filters/Brighten.js',
'src/filters/Invert.js',
@@ -22,13 +21,14 @@ module.exports = function(grunt) {
'src/filters/Posterize.js',
'src/filters/Noise.js',
'src/filters/Pixelate.js',
- 'src/filters/Polar.js',
'src/filters/Threshold.js',
'src/filters/Sepia.js',
'src/filters/Solarize.js',
'src/filters/Ripple.js',
'src/filters/Kalidescope.js',
-
+ //'src/filters/FilterWrapper.js',
+ //'src/filters/Polar.js',
+
// core
'src/Animation.js',
'src/Tween.js',
diff --git a/src/Container.js b/src/Container.js
index ec3b678f..55902f05 100644
--- a/src/Container.js
+++ b/src/Container.js
@@ -264,10 +264,7 @@
if (this.shouldDrawHit()) {
if (cachedHitCanvas) {
- context.save();
- context._applyTransform(this);
- context.drawImage(cachedHitCanvas._canvas, 0, 0);
- context.restore();
+ this._drawCachedHitCanvas(context);
}
else {
this._drawChildren(canvas, 'drawHit');
diff --git a/src/Node.js b/src/Node.js
index b0a7d6d1..1bf224bc 100644
--- a/src/Node.js
+++ b/src/Node.js
@@ -31,8 +31,8 @@
'skewXChange.kinetic',
'skewYChange.kinetic',
'rotationChange.kinetic',
- 'offsetXChange.kinetic',
- 'offsetYChange.kinetic',
+ 'centerXChange.kinetic',
+ 'centerYChange.kinetic',
'transformsEnabledChange.kinetic'
].join(SPACE);
@@ -104,9 +104,8 @@
delete this._cache.canvas;
},
/**
- * cache node to improve drawing performance.
- * NOTE: if you have filters applied to your node, your shape is already cached.
- * explicitly calling cache() will override your filters.
+ * cache node to improve drawing performance, apply filters, or create more accurate
+ * hit regions
* @method
* @memberof Kinetic.Node.prototype
* @returns {Kinetic.Node}
@@ -119,17 +118,17 @@
y = box.y || 0,
width = box.width || this.width(),
height = box.height || this.height(),
- sceneCanvasCache = new Kinetic.SceneCanvas({
+ cachedSceneCanvas = new Kinetic.SceneCanvas({
pixelRatio: 1,
width: width,
height: height
}),
- filterCanvasCache = new Kinetic.SceneCanvas({
+ cachedFilterCanvas = new Kinetic.SceneCanvas({
pixelRatio: 1,
width: width,
height: height
}),
- hitCanvasCache = new Kinetic.HitCanvas({
+ cachedHitCanvas = new Kinetic.HitCanvas({
width: width,
height: height
}),
@@ -141,24 +140,28 @@
this.x(x * -1);
this.y(y * -1);
- this.drawScene(sceneCanvasCache);
- this.drawHit(hitCanvasCache);
+ this.drawScene(cachedSceneCanvas);
+ this.drawHit(cachedHitCanvas);
this.x(origX);
this.y(origY);
this.transformsEnabled(origTransEnabled);
this._cache.canvas = {
- scene: sceneCanvasCache,
- filter: filterCanvasCache,
- hit: hitCanvasCache,
- x: x,
- y: y
+ scene: cachedSceneCanvas,
+ filter: cachedFilterCanvas,
+ hit: cachedHitCanvas
};
return this;
},
_drawCachedSceneCanvas: function(context) {
+ context.save();
+ context._applyTransform(this);
+ context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0);
+ context.restore();
+ },
+ _getCachedSceneCanvas: function() {
var filters = this.filters(),
cachedCanvas = this._cache.canvas,
sceneCanvas = cachedCanvas.scene,
@@ -166,9 +169,6 @@
filterContext = filterCanvas.getContext(),
len, imageData, n, filter;
- context.save();
- context._applyTransform(this);
-
if (filters) {
if (!this._filterUpToDate) {
try {
@@ -192,13 +192,20 @@
this._filterUpToDate = true;
}
- context.drawImage(filterCanvas._canvas, 0, 0);
+ return filterCanvas;
}
else {
- context.drawImage(sceneCanvas._canvas, 0, 0);
+ return sceneCanvas;
}
+ },
+ _drawCachedHitCanvas: function(context) {
+ var cachedCanvas = this._cache.canvas,
+ hitCanvas = cachedCanvas.hit;
- context.restore();
+ context.save();
+ context._applyTransform(this);
+ context.drawImage(hitCanvas._canvas, 0, 0);
+ context.restore();
},
/*
* the default isDraggable method returns false.
@@ -654,11 +661,11 @@
getAbsolutePosition: function() {
var absoluteMatrix = this.getAbsoluteTransform().getMatrix(),
absoluteTransform = new Kinetic.Transform(),
- offset = this.offset();
+ center = this.center();
// clone the matrix array
absoluteTransform.m = absoluteMatrix.slice();
- absoluteTransform.translate(offset.x, offset.y);
+ absoluteTransform.translate(center.x, center.y);
return absoluteTransform.getTranslation();
},
@@ -713,8 +720,8 @@
rotation: this.getRotation(),
scaleX: this.getScaleX(),
scaleY: this.getScaleY(),
- offsetX: this.getOffsetX(),
- offsetY: this.getOffsetY(),
+ centerX: this.getCenterX(),
+ centerY: this.getCenterY(),
skewX: this.getSkewX(),
skewY: this.getSkewY()
};
@@ -724,8 +731,8 @@
this.attrs.rotation = 0;
this.attrs.scaleX = 1;
this.attrs.scaleY = 1;
- this.attrs.offsetX = 0;
- this.attrs.offsetY = 0;
+ this.attrs.centerX = 0;
+ this.attrs.centerY = 0;
this.attrs.skewX = 0;
this.attrs.skewY = 0;
@@ -1071,8 +1078,8 @@
scaleY = this.getScaleY(),
skewX = this.getSkewX(),
skewY = this.getSkewY(),
- offsetX = this.getOffsetX(),
- offsetY = this.getOffsetY();
+ centerX = this.getCenterX(),
+ centerY = this.getCenterY();
if(x !== 0 || y !== 0) {
m.translate(x, y);
@@ -1086,8 +1093,8 @@
if(scaleX !== 1 || scaleY !== 1) {
m.scale(scaleX, scaleY);
}
- if(offsetX !== 0 || offsetY !== 0) {
- m.translate(-1 * offsetX, -1 * offsetY);
+ if(centerX !== 0 || centerY !== 0) {
+ m.translate(-1 * centerX, -1 * centerY);
}
return m;
@@ -1726,35 +1733,35 @@
* @returns {Number}
*/
- Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'offset', 0);
+ Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'center', 0);
/**
- * get/set offset. A node's offset defines the position and rotation point
+ * get/set center. A node's center defines the position and rotation point
* @method
* @memberof Kinetic.Node.prototype
- * @param {Object} offset
- * @param {Number} offset.x
- * @param {Number} offset.y
+ * @param {Object} center
+ * @param {Number} center.x
+ * @param {Number} center.y
* @returns {Object}
* @example
* // set x and y
- * shape.offset({
+ * shape.center({
* x: 20
* y: 10
* });
*/
/**
- * get/set offset x
- * @name offsetX
+ * get/set center x
+ * @name centerX
* @memberof Kinetic.Node.prototype
* @param {Number} x
* @returns {Integer}
*/
/**
- * get/set offset y
- * @name offsetY
+ * get/set center y
+ * @name centerY
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} y
diff --git a/src/Shape.js b/src/Shape.js
index ef243016..fd4c52c2 100644
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -236,7 +236,7 @@
var canvas = can || this.getLayer().getCanvas(),
context = canvas.getContext(),
cachedCanvas = this._cache.canvas,
- drawFunc = this.getDrawFunc(),
+ drawFunc = this.sceneFunc(),
hasShadow = this.hasShadow(),
stage, bufferCanvas, bufferContext;
@@ -293,17 +293,14 @@
drawHit: function(can) {
var canvas = can || this.getLayer().hitCanvas,
context = canvas.getContext(),
- drawFunc = this.getDrawHitFunc() || this.getDrawFunc(),
+ drawFunc = this.hitFunc() || this.sceneFunc(),
cachedCanvas = this._cache.canvas,
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if(this.shouldDrawHit()) {
if (cachedHitCanvas) {
- context.save();
- context._applyTransform(this);
- context.drawImage(cachedHitCanvas._canvas, 0, 0);
- context.restore();
+ this._drawCachedHitCanvas(context);
}
else if (drawFunc) {
context.save();
@@ -317,7 +314,59 @@
}
return this;
- }
+ },
+ /**
+ * draw hit graph using the cached scene canvas
+ * @method
+ * @memberof Kinetic.Shape.prototype
+ * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not
+ * a pixel should be drawn onto the hit graph. Must be a value between 0 and 255.
+ * The default is 0
+ * @returns {Kinetic.Shape}
+ * @example
+ * shape.cache();
+ * shape.drawHitFromCache();
+ */
+ drawHitFromCache: function(alphaThreshold) {
+ var threshold = alphaThreshold || 0,
+ cachedCanvas = this._cache.canvas,
+ sceneCanvas = this._getCachedSceneCanvas(),
+ sceneContext = sceneCanvas.getContext(),
+ hitCanvas = cachedCanvas.hit,
+ hitContext = hitCanvas.getContext(),
+ width = sceneCanvas.getWidth(),
+ height = sceneCanvas.getHeight(),
+ sceneImageData, sceneData, hitImageData, hitData, len, rgbColorKey, i, alpha;
+
+ hitContext.clear();
+
+ //try {
+ sceneImageData = sceneContext.getImageData(0, 0, width, height);
+ sceneData = sceneImageData.data;
+ hitImageData = hitContext.getImageData(0, 0, width, height);
+ hitData = hitImageData.data;
+ len = sceneData.length;
+ rgbColorKey = Kinetic.Util._hexToRgb(this.colorKey);
+
+ // replace non transparent pixels with color key
+ for(i = 0; i < len; i += 4) {
+ alpha = sceneData[i + 3];
+ if (alpha > threshold) {
+ hitData[i] = rgbColorKey.r;
+ hitData[i + 1] = rgbColorKey.g;
+ hitData[i + 2] = rgbColorKey.b;
+ hitData[i + 3] = 255;
+ }
+ }
+
+ hitContext.putImageData(hitImageData, 0, 0);
+ // }
+ // catch(e) {
+ // Kinetic.Util.warn('Unable to draw hit graph from cached scene canvas. ' + e.message);
+ // }
+
+ return this;
+ },
});
Kinetic.Util.extend(Kinetic.Shape, Kinetic.Node);
@@ -475,7 +524,7 @@
* @returns {Number}
*/
- Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'drawFunc');
+ Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'sceneFunc');
/**
* set draw function
@@ -494,7 +543,7 @@
* @returns {Function}
*/
- Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'drawHitFunc');
+ Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'hitFunc');
/**
* set draw hit function used for hit detection
diff --git a/src/plugins/Label.js b/src/plugins/Label.js
index beed63a9..2a528d8e 100644
--- a/src/plugins/Label.js
+++ b/src/plugins/Label.js
@@ -174,9 +174,9 @@
___init: function(config) {
Kinetic.Shape.call(this, config);
this.className = 'Tag';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
pointerDirection = this.getPointerDirection(),
diff --git a/src/plugins/Path.js b/src/plugins/Path.js
index efdf9208..4ebfdddb 100644
--- a/src/plugins/Path.js
+++ b/src/plugins/Path.js
@@ -36,9 +36,9 @@
that.dataArray = Kinetic.Path.parsePathData(this.getData());
});
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function (context) {
+ _sceneFunc: function(context) {
var ca = this.dataArray,
closedPath = false;
diff --git a/src/plugins/RegularPolygon.js b/src/plugins/RegularPolygon.js
index 0bf11987..c8b59d8a 100644
--- a/src/plugins/RegularPolygon.js
+++ b/src/plugins/RegularPolygon.js
@@ -29,9 +29,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'RegularPolygon';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var sides = this.attrs.sides,
radius = this.attrs.radius,
n, x, y;
diff --git a/src/plugins/Star.js b/src/plugins/Star.js
index 849a37c5..d9e5a0a9 100644
--- a/src/plugins/Star.js
+++ b/src/plugins/Star.js
@@ -31,9 +31,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Star';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var innerRadius = this.innerRadius(),
outerRadius = this.outerRadius(),
numPoints = this.numPoints();
diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js
index 3cfccfe4..fa302788 100644
--- a/src/plugins/TextPath.js
+++ b/src/plugins/TextPath.js
@@ -65,9 +65,9 @@
// update text data for certain attr changes
this.on('textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic', that._setTextData);
that._setTextData();
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', 'middle');
context.setAttr('textAlign', 'left');
diff --git a/src/shapes/Arc.js b/src/shapes/Arc.js
index a817f979..bae4d6f4 100644
--- a/src/shapes/Arc.js
+++ b/src/shapes/Arc.js
@@ -32,9 +32,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Arc';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getOuterRadius(), 0, this.getAngle(), this.getClockwise());
context.arc(0, 0, this.getInnerRadius(), this.getAngle(), 0, !this.getClockwise());
diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js
index b1a41bd8..197261e3 100644
--- a/src/shapes/Circle.js
+++ b/src/shapes/Circle.js
@@ -40,9 +40,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = CIRCLE;
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, PIx2, false);
context.closePath();
diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js
index c9c0ed51..b3b6c852 100644
--- a/src/shapes/Ellipse.js
+++ b/src/shapes/Ellipse.js
@@ -21,9 +21,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = ELLIPSE;
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var r = this.getRadius();
context.beginPath();
diff --git a/src/shapes/Image.js b/src/shapes/Image.js
index 12cbdced..2ac61a3f 100644
--- a/src/shapes/Image.js
+++ b/src/shapes/Image.js
@@ -36,13 +36,13 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = IMAGE;
- this.setDrawFunc(this._drawFunc);
- this.setDrawHitFunc(this._drawHitFunc);
+ this.sceneFunc(this._sceneFunc);
+ this.hitFunc(this._hitFunc);
},
_useBufferCanvas: function() {
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke();
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
image = this.getImage(),
@@ -69,85 +69,14 @@
context.drawImage.apply(context, params);
}
},
- _drawHitFunc: function(context) {
+ _hitFunc: function(context) {
var width = this.getWidth(),
- height = this.getHeight(),
- imageHitRegion = this.imageHitRegion;
+ height = this.getHeight();
- if(imageHitRegion) {
- context.drawImage(imageHitRegion, 0, 0);
- context.beginPath();
- context.rect(0, 0, width, height);
- context.closePath();
- context.strokeShape(this);
- }
- else {
- context.beginPath();
- context.rect(0, 0, width, height);
- context.closePath();
- context.fillStrokeShape(this);
- }
- },
- /**
- * create image hit region which enables more accurate hit detection mapping of the image
- * by avoiding event detections for transparent pixels
- * @method
- * @memberof Kinetic.Image.prototype
- * @param {Function} [callback] callback function to be called once
- * the image hit region has been created
- * @example
- * image.createImageHitRegion(function() {
- * layer.drawHit();
- * });
- */
- createImageHitRegion: function(callback) {
- var that = this,
- width = this.getWidth(),
- height = this.getHeight(),
- canvas = new Kinetic.SceneCanvas({
- width: width,
- height: height,
- pixelRatio: 1
- }),
- _context = canvas.getContext()._context,
- image = this.getImage(),
- imageData, data, rgbColorKey, i, len;
-
- _context.drawImage(image, 0, 0);
-
- try {
- imageData = _context.getImageData(0, 0, width, height);
- data = imageData.data;
- len = data.length;
- rgbColorKey = Kinetic.Util._hexToRgb(this.colorKey);
-
- // replace non transparent pixels with color key
- for(i = 0; i < len; i += 4) {
- if (data[i + 3] > 0) {
- data[i] = rgbColorKey.r;
- data[i + 1] = rgbColorKey.g;
- data[i + 2] = rgbColorKey.b;
- }
- }
-
- Kinetic.Util._getImage(imageData, function(imageObj) {
- that.imageHitRegion = imageObj;
- if(callback) {
- callback();
- }
- });
- }
- catch(e) {
- Kinetic.Util.warn('Unable to create image hit region. ' + e.message);
- }
- },
- /**
- * clear image hit region
- * @method
- * @memberof Kinetic.Image.prototype
- */
- clearImageHitRegion: function() {
- delete this.imageHitRegion;
+ context.beginPath();
+ context.rect(0, 0, width, height);
+ context.closePath();
+ context.fillStrokeShape(this);
},
getWidth: function() {
var image = this.getImage();
diff --git a/src/shapes/Line.js b/src/shapes/Line.js
index 915e833d..a79e4694 100644
--- a/src/shapes/Line.js
+++ b/src/shapes/Line.js
@@ -35,9 +35,9 @@
this._clearCache('tensionPoints');
});
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),
diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js
index 27015fc8..f64d0518 100644
--- a/src/shapes/Rect.js
+++ b/src/shapes/Rect.js
@@ -25,9 +25,9 @@
___init: function(config) {
Kinetic.Shape.call(this, config);
this.className = 'Rect';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var cornerRadius = this.getCornerRadius(),
width = this.getWidth(),
height = this.getHeight();
diff --git a/src/shapes/Ring.js b/src/shapes/Ring.js
index 35f196b4..164490fc 100644
--- a/src/shapes/Ring.js
+++ b/src/shapes/Ring.js
@@ -32,9 +32,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Ring';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getInnerRadius(), 0, PIx2, false);
context.moveTo(this.getOuterRadius(), 0);
diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js
index 832ab0a5..10edc0d1 100644
--- a/src/shapes/Sprite.js
+++ b/src/shapes/Sprite.js
@@ -82,10 +82,10 @@
this.setIndex(0);
});
- this.setDrawFunc(this._drawFunc);
- this.setDrawHitFunc(this._drawHitFunc);
+ this.sceneFunc(this._sceneFunc);
+ this.hitFunc(this._hitFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var anim = this.getAnimation(),
index = this.getIndex(),
f = this.getAnimations()[anim][index],
@@ -95,7 +95,7 @@
context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
}
},
- _drawHitFunc: function(context) {
+ _hitFunc: function(context) {
var anim = this.getAnimation(),
index = this.getIndex(),
f = this.getAnimations()[anim][index];
diff --git a/src/shapes/Text.js b/src/shapes/Text.js
index 1d317be2..e181f19b 100644
--- a/src/shapes/Text.js
+++ b/src/shapes/Text.js
@@ -86,10 +86,10 @@
}
this._setTextData();
- this.setDrawFunc(this._drawFunc);
- this.setDrawHitFunc(this._drawHitFunc);
+ this.sceneFunc(this._sceneFunc);
+ this.hitFunc(this._hitFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
var p = this.getPadding(),
textHeight = this.getTextHeight(),
lineHeightPx = this.getLineHeight() * textHeight,
@@ -127,7 +127,7 @@
}
context.restore();
},
- _drawHitFunc: function(context) {
+ _hitFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight();
diff --git a/src/shapes/Wedge.js b/src/shapes/Wedge.js
index 943736dc..ccf98d4b 100644
--- a/src/shapes/Wedge.js
+++ b/src/shapes/Wedge.js
@@ -30,9 +30,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Wedge';
- this.setDrawFunc(this._drawFunc);
+ this.sceneFunc(this._sceneFunc);
},
- _drawFunc: function(context) {
+ _sceneFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
context.lineTo(0, 0);
diff --git a/test/functional/MouseEvents-test.js b/test/functional/MouseEvents-test.js
index 64f07dc2..1347ecea 100644
--- a/test/functional/MouseEvents-test.js
+++ b/test/functional/MouseEvents-test.js
@@ -933,7 +933,7 @@ suite('MouseEvents', function() {
strokeWidth: 4,
fill: 'red',
stroke: 'black',
- drawHitFunc: function(context) {
+ hitFunc: function(context) {
var _context = context._context;
_context.beginPath();
@@ -990,7 +990,7 @@ suite('MouseEvents', function() {
// set drawBufferFunc with setter
- circle.setDrawHitFunc(function(context) {
+ circle.hitFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
diff --git a/test/runner.js b/test/runner.js
index e4479e0a..46ce3505 100644
--- a/test/runner.js
+++ b/test/runner.js
@@ -102,6 +102,11 @@ function addContainer() {
return container;
}
+function showCanvas(canvas) {
+ canvas.style.position = 'relative';
+
+ kineticContainer.appendChild(canvas);
+}
function showHit(layer) {
var canvas = layer.hitCanvas._canvas;
canvas.style.position = 'relative';
diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js
index d490676b..b13b6391 100644
--- a/test/unit/Node-test.js
+++ b/test/unit/Node-test.js
@@ -340,11 +340,11 @@ suite('Node', function() {
});
// ======================================================
- test('test offset attr change', function() {
+ test('test center attr change', function() {
/*
* the premise of this test to make sure that only
* root level attributes trigger an attr change event.
- * for this test, we have two offset properties. one
+ * for this test, we have two center properties. one
* is in the root level, and the other is inside the shadow
* object
*/
@@ -356,7 +356,7 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'blue',
- offset: {x:10, y:10},
+ center: {x:10, y:10},
shadowColor: 'black',
shadowOffset: {x:20, y:20}
});
@@ -364,16 +364,16 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
- var offsetChange = false;
+ var centerChange = false;
var shadowOffsetChange = false;
- rect.on('offsetChange', function(val) {
- offsetChange = true;
+ rect.on('centerChange', function(val) {
+ centerChange = true;
});
- rect.setOffset({x:1, y:2});
+ rect.center({x:1, y:2});
- assert.equal(offsetChange, true);
+ assert.equal(centerChange, true);
});
// ======================================================
@@ -410,9 +410,11 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'blue',
- offset: [10, 10],
+ centerX: 10,
+ centerY: 10,
shadowColor: 'black',
- shadowOffset: [20, 20],
+ shadowOffsetX: 20,
+ shadowOffsetY: 20,
draggable: true,
name: 'myRect'
});
@@ -478,7 +480,8 @@ suite('Node', function() {
width: 200,
height: 50,
fill: 'red',
- offset: [10, 10],
+ centerX: 10,
+ centerY: 10,
shadowColor: 'black',
shadowOffset: [20, 20],
name: 'myRect',
@@ -1045,7 +1048,7 @@ suite('Node', function() {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
- offset: {
+ center: {
x: 0,
y: 0
},
@@ -1120,7 +1123,7 @@ suite('Node', function() {
width: 100,
height: 50,
stroke: 'blue',
- offset: {
+ center: {
x: 40,
y: 20
}
@@ -1129,19 +1132,19 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
- assert.equal(rect.getOffsetX(), 40);
- assert.equal(rect.getOffsetY(), 20);
+ assert.equal(rect.centerX(), 40);
+ assert.equal(rect.centerY(), 20);
- assert.equal(rect.getOffset().x, 40);
- assert.equal(rect.getOffset().y, 20);
+ assert.equal(rect.center().x, 40);
+ assert.equal(rect.center().y, 20);
- rect.setOffset({x:80, y:40});
+ rect.center({x:80, y:40});
- assert.equal(rect.getOffsetX(), 80);
- assert.equal(rect.getOffsetY(), 40);
+ assert.equal(rect.centerX(), 80);
+ assert.equal(rect.centerY(), 40);
- assert.equal(rect.getOffset().x, 80);
- assert.equal(rect.getOffset().y, 40);
+ assert.equal(rect.center().x, 80);
+ assert.equal(rect.center().y, 40);
});
@@ -1234,7 +1237,7 @@ suite('Node', function() {
});
// ======================================================
- test('test setOffset', function() {
+ test('test center', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
@@ -1248,28 +1251,28 @@ suite('Node', function() {
layer.add(rect);
stage.add(layer);
- rect.setOffset({x:1, y: 2});
- assert.equal(rect.getOffset().x, 1);
- assert.equal(rect.getOffset().y, 2);
+ rect.center({x:1, y: 2});
+ assert.equal(rect.center().x, 1);
+ assert.equal(rect.center().y, 2);
- rect.setOffset({x:3, y:4});
- assert.equal(rect.getOffset().x, 3);
- assert.equal(rect.getOffset().y, 4);
+ rect.center({x:3, y:4});
+ assert.equal(rect.center().x, 3);
+ assert.equal(rect.center().y, 4);
- rect.setOffset({
+ rect.center({
x: 5,
y: 6
});
- assert.equal(rect.getOffset().x, 5);
- assert.equal(rect.getOffset().y, 6);
+ assert.equal(rect.center().x, 5);
+ assert.equal(rect.center().y, 6);
- rect.setOffsetX(7);
- assert.equal(rect.getOffset().x, 7);
- assert.equal(rect.getOffset().y, 6);
+ rect.centerX(7);
+ assert.equal(rect.center().x, 7);
+ assert.equal(rect.center().y, 6);
- rect.setOffsetY(8);
- assert.equal(rect.getOffset().x, 7);
- assert.equal(rect.getOffset().y, 8);
+ rect.centerY(8);
+ assert.equal(rect.center().x, 7);
+ assert.equal(rect.center().y, 8);
});
@@ -1535,8 +1538,8 @@ suite('Node', function() {
stroke: 'black',
strokeWidth: 4,
draggable: true,
- offsetX: 30,
- offsetY: 30
+ centerX: 30,
+ centerY: 30
//rotationDeg: 60
//rotationDeg: Math.PI / 3
});
@@ -1566,7 +1569,7 @@ suite('Node', function() {
name: 'groupName',
id: 'groupId',
rotationDeg: 45,
- offset: {x:side / 2, y:side / 2},
+ center: {x:side / 2, y:side / 2},
x: diagonal / 2,
y: diagonal / 2
});
@@ -1617,7 +1620,7 @@ suite('Node', function() {
x: 2,
y: 1
},
- offset: {
+ center: {
x: 50,
y: 25
}
@@ -2221,7 +2224,7 @@ suite('Node', function() {
var stage = Kinetic.Node.create(json, container);
stage.find('#myTriangle').each(function(node) {
- node.setDrawFunc(drawTriangle);
+ node.sceneFunc(drawTriangle);
});
stage.draw();
@@ -2239,7 +2242,7 @@ suite('Node', function() {
x: 200,
y: 60,
image: imageObj,
- offset: {
+ center: {
x: 50,
y: imageObj.height / 2
},
@@ -2248,7 +2251,7 @@ suite('Node', function() {
layer.add(darth);
stage.add(layer);
- var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
+ var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}';
assert.equal(stage.toJSON(), json);
@@ -2262,7 +2265,7 @@ suite('Node', function() {
var imageObj = new Image();
var container = addContainer();
imageObj.onload = function() {
- var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
+ var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}';
var stage = Kinetic.Node.create(json, container);
assert.equal(stage.toJSON(), json);
@@ -2863,15 +2866,15 @@ suite('Node', function() {
circle.skewY(8);
assert.equal(circle.skewY(), 8);
- circle.offset({x: 2, y: 2});
- assert.equal(circle.offset().x, 2);
- assert.equal(circle.offset().y, 2);
+ circle.center({x: 2, y: 2});
+ assert.equal(circle.center().x, 2);
+ assert.equal(circle.center().y, 2);
- circle.offsetX(5);
- assert.equal(circle.offsetX(), 5);
+ circle.centerX(5);
+ assert.equal(circle.centerX(), 5);
- circle.offsetY(8);
- assert.equal(circle.offsetY(), 8);
+ circle.centerY(8);
+ assert.equal(circle.centerY(), 8);
circle.width(23);
assert.equal(circle.width(), 23);
@@ -2919,18 +2922,14 @@ suite('Node', function() {
y: -74,
width: 148,
height: 148
- }).offset({
+ }).center({
x: 74,
y: 74
});
assert.notEqual(circle._cache.canvas.scene, undefined);
assert.notEqual(circle._cache.canvas.hit, undefined);
- assert.equal(circle._cache.canvas.x, -74);
- assert.equal(circle._cache.canvas.y, -74);
-
-
layer.draw();
@@ -3080,7 +3079,7 @@ suite('Node', function() {
height: 208
});
- group.offsetX(104).offsetY(104);
+ group.centerX(104).centerY(104);
//console.log('--after cache');
//console.log(group.getAbsoluteTransform().getTranslation())
diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js
index ecb7bba5..2edec006 100644
--- a/test/unit/Shape-test.js
+++ b/test/unit/Shape-test.js
@@ -530,11 +530,11 @@ suite('Shape', function() {
rect.strokeWidth(8);
assert.equal(rect.strokeWidth(), 8);
- rect.drawFunc('function');
- assert.equal(rect.drawFunc(), 'function');
+ rect.sceneFunc('function');
+ assert.equal(rect.sceneFunc(), 'function');
- rect.drawHitFunc('function');
- assert.equal(rect.drawHitFunc(), 'function');
+ rect.hitFunc('function');
+ assert.equal(rect.hitFunc(), 'function');
rect.dashArray([1]);
assert.equal(rect.dashArray()[0], 1);
@@ -544,4 +544,56 @@ suite('Shape', function() {
});
+
+ // ======================================================
+ test('create image hit region', function(done) {
+ var imageObj = new Image();
+
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ imageObj.onload = function() {
+
+ var lion = new Kinetic.Image({
+ x: 200,
+ y: 40,
+ image: imageObj,
+ draggable: true,
+ shadowColor: 'black',
+ shadowBlur: 10,
+ shadowOffset: 20,
+ shadowOpacity: 0.2
+ });
+
+ // override color key with black
+ lion.colorKey = '#000000';
+ Kinetic.shapes['#000000'] = lion;
+
+ layer.add(lion);
+
+ stage.add(layer);
+
+ lion.cache();
+
+
+ //document.body.appendChild(lion._cache.canvas.hit._canvas);
+
+
+ lion.drawHitFromCache();
+
+
+ layer.draw();
+
+
+ done();
+
+
+ };
+ imageObj.src = 'assets/lion.png';
+
+ showHit(layer);
+
+ layer.hitCanvas._canvas.style.border='2px solid black';
+ });
+
});
\ No newline at end of file
diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js
index 68199b40..2a04051f 100644
--- a/test/unit/filters/Blur-test.js
+++ b/test/unit/filters/Blur-test.js
@@ -95,7 +95,7 @@ suite('Blur', function() {
height: 300
});
- group.offset({
+ group.center({
x: 150,
y: 150
});
@@ -105,14 +105,14 @@ suite('Blur', function() {
layer.draw();
- //document.body.appendChild(group._cache.canvas.scene._canvas);
+ //document.body.appendChild(group._cache.canvas.hit._canvas);
- showHit(layer);
+ //showHit(layer);
});
// ======================================================
@@ -277,4 +277,43 @@ suite('Blur', function() {
};
imageObj.src = 'assets/lion.png';
});
+
+ // ======================================================
+ test('blur hit region', function(done) {
+ var stage = addStage();
+
+ var imageObj = new Image();
+ imageObj.onload = function() {
+
+ var layer = new Kinetic.Layer();
+ darth = new Kinetic.Image({
+ x: 10,
+ y: 10,
+ image: imageObj,
+ draggable: true
+ });
+
+ layer.add(darth);
+ stage.add(layer);
+
+ darth.cache();
+ darth.filters([Kinetic.Filters.Blur]);
+ darth.blurRadius(20);
+ darth.drawHitFromCache(100);
+ layer.draw();
+
+ showCanvas(darth._cache.canvas.hit._canvas);
+
+ //console.log(darth._cache.canvas.hit.getContext().getTrace(true));
+
+ assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');
+
+
+
+ done();
+
+ };
+ imageObj.src = 'assets/lion.png';
+ });
+
});
\ No newline at end of file
diff --git a/test/unit/plugins/RegularPolygon-test.js b/test/unit/plugins/RegularPolygon-test.js
index 7a8143cd..46cb9003 100644
--- a/test/unit/plugins/RegularPolygon-test.js
+++ b/test/unit/plugins/RegularPolygon-test.js
@@ -14,7 +14,7 @@ suite('RegularPolygon', function() {
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
- offset: {
+ center: {
x: 0,
y: -50
}
diff --git a/test/unit/plugins/Star-test.js b/test/unit/plugins/Star-test.js
index 17b46030..3f5fe4e5 100644
--- a/test/unit/plugins/Star-test.js
+++ b/test/unit/plugins/Star-test.js
@@ -15,7 +15,7 @@ suite('Star', function() {
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
- offset: {
+ center: {
x: 0,
y: -70
},
diff --git a/test/unit/shapes/Image-test.js b/test/unit/shapes/Image-test.js
index a71acef9..d346aa63 100644
--- a/test/unit/shapes/Image-test.js
+++ b/test/unit/shapes/Image-test.js
@@ -13,7 +13,7 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: {x: 50, y: 30},
+ center: {x: 50, y: 30},
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -31,8 +31,8 @@ suite('Image', function(){
assert.equal(darth.getY(), 60);
assert.equal(darth.getWidth(), 100);
assert.equal(darth.getHeight(), 100);
- assert.equal(darth.getOffset().x, 50);
- assert.equal(darth.getOffset().y, 30);
+ assert.equal(darth.center().x, 50);
+ assert.equal(darth.center().y, 30);
assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
var crop = null;
@@ -88,7 +88,8 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: [50, 30],
+ centerX: 50,
+ centerY: 30,
crop: {x: 135, y: 7, width: 167, height: 134},
draggable: true
});
@@ -172,55 +173,6 @@ suite('Image', function(){
imageObj.src = 'assets/darth-vader.jpg';
});
- // ======================================================
- test('create image hit region', function(done) {
- var imageObj = new Image();
-
- var stage = addStage();
- var layer = new Kinetic.Layer();
-
- imageObj.onload = function() {
-
- var lion = new Kinetic.Image({
- x: 200,
- y: 40,
- image: imageObj,
- draggable: true,
- shadowColor: 'black',
- shadowBlur: 10,
- shadowOffset: 20,
- shadowOpacity: 0.2
- });
-
- // override color key with black
- lion.colorKey = '#000000';
- Kinetic.shapes['#000000'] = lion;
-
- layer.add(lion);
-
- lion.createImageHitRegion(function() {
- stage.add(layer);
- layer.drawHit();
-
- var trace = layer.hitCanvas.getContext().getTrace();
- //console.log(trace);
- //assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();');
-
- var hitTrace = layer.hitCanvas.getContext().getTrace();
- //console.log(hitTrace);
- //assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();');
-
- done();
-
- });
- };
- imageObj.src = 'assets/lion.png';
-
- showHit(layer);
-
- layer.hitCanvas._canvas.style.border='2px solid black';
- });
-
// ======================================================
test('image with svg source', function(done) {
var imageObj = new Image();
@@ -301,7 +253,7 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: {x: 50, y:30},
+ center: {x: 50, y:30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
@@ -336,7 +288,7 @@ suite('Image', function(){
image: imageObj,
width: 100,
height: 100,
- offset: {x: 50, y: 30},
+ center: {x: 50, y: 30},
draggable: true,
opacity: 0.5,
shadowColor: 'black',
diff --git a/test/unit/shapes/Rect-test.js b/test/unit/shapes/Rect-test.js
index 1b5ae67f..5ef7dd7f 100644
--- a/test/unit/shapes/Rect-test.js
+++ b/test/unit/shapes/Rect-test.js
@@ -82,7 +82,7 @@ suite('Rect', function(){
fill: 'green',
stroke: 'black',
strokeWidth: 4,
- offset: {x: 50, y: 0},
+ center: {x: 50, y: 0},
scale: {x: 2, y: 2},
cornerRadius: 15,
draggable: true
diff --git a/test/unit/shapes/Text-test.js b/test/unit/shapes/Text-test.js
index cec0bac1..a530e629 100644
--- a/test/unit/shapes/Text-test.js
+++ b/test/unit/shapes/Text-test.js
@@ -44,8 +44,8 @@ suite('Text', function(){
});
// center text box
- rect.setOffset(text.getWidth() / 2, text.getHeight() / 2);
- text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
+ rect.center(text.getWidth() / 2, text.getHeight() / 2);
+ text.center(text.getWidth() / 2, text.getHeight() / 2);
group.add(rect);
group.add(text);
@@ -82,7 +82,7 @@ suite('Text', function(){
});
// center text box
- text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
+ text.center(text.getWidth() / 2, text.getHeight() / 2);
layer.add(text);
stage.add(layer);