From 7e2c6c97f84c413fb53507ced3f3237fbdce9d03 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 4 Jan 2014 23:34:01 -0800 Subject: [PATCH 1/4] changed drawFunc to sceneFunc and drawHitFunc to hitFunc --- Gruntfile.js | 8 ++++---- src/Shape.js | 8 ++++---- src/plugins/Label.js | 4 ++-- src/plugins/Path.js | 4 ++-- src/plugins/RegularPolygon.js | 4 ++-- src/plugins/Star.js | 4 ++-- src/plugins/TextPath.js | 4 ++-- src/shapes/Arc.js | 4 ++-- src/shapes/Circle.js | 4 ++-- src/shapes/Ellipse.js | 4 ++-- src/shapes/Image.js | 8 ++++---- src/shapes/Line.js | 4 ++-- src/shapes/Rect.js | 4 ++-- src/shapes/Ring.js | 4 ++-- src/shapes/Sprite.js | 8 ++++---- src/shapes/Text.js | 8 ++++---- src/shapes/Wedge.js | 4 ++-- test/functional/MouseEvents-test.js | 4 ++-- test/unit/Node-test.js | 2 +- test/unit/Shape-test.js | 8 ++++---- 20 files changed, 51 insertions(+), 51 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index ba373ac5..7e5729c0 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,12 +21,13 @@ 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/FilterWrapper.js', + //'src/filters/Polar.js', + // core 'src/Animation.js', 'src/Tween.js', diff --git a/src/Shape.js b/src/Shape.js index ef243016..9fa82048 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,7 +293,7 @@ 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; @@ -475,7 +475,7 @@ * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'drawFunc'); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'sceneFunc'); /** * set draw function @@ -494,7 +494,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..2ed2509c 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,7 +69,7 @@ context.drawImage.apply(context, params); } }, - _drawHitFunc: function(context) { + _hitFunc: function(context) { var width = this.getWidth(), height = this.getHeight(), imageHitRegion = this.imageHitRegion; 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/unit/Node-test.js b/test/unit/Node-test.js index d490676b..f8ecc390 100644 --- a/test/unit/Node-test.js +++ b/test/unit/Node-test.js @@ -2221,7 +2221,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(); diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index ecb7bba5..06ce8b30 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); From fae1c538f32467fe230ba87b7509e6f30df0fcdb Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 4 Jan 2014 23:56:33 -0800 Subject: [PATCH 2/4] changed offset to center --- src/Node.js | 44 ++++----- test/unit/Node-test.js | 111 ++++++++++++----------- test/unit/filters/Blur-test.js | 2 +- test/unit/plugins/RegularPolygon-test.js | 2 +- test/unit/plugins/Star-test.js | 2 +- test/unit/shapes/Image-test.js | 13 +-- test/unit/shapes/Rect-test.js | 2 +- test/unit/shapes/Text-test.js | 6 +- 8 files changed, 93 insertions(+), 89 deletions(-) diff --git a/src/Node.js b/src/Node.js index b0a7d6d1..54cca92f 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); @@ -654,11 +654,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 +713,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 +724,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 +1071,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 +1086,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 +1726,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/test/unit/Node-test.js b/test/unit/Node-test.js index f8ecc390..5daf725d 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 } @@ -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,7 +2922,7 @@ suite('Node', function() { y: -74, width: 148, height: 148 - }).offset({ + }).center({ x: 74, y: 74 }); @@ -3080,7 +3083,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/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 68199b40..a9f2d52f 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 }); 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..5f15ddbc 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 }); @@ -301,7 +302,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 +337,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); From 4d323c7b579bbc5226139a7c7f3fe85786fe0e8f Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 5 Jan 2014 01:10:56 -0800 Subject: [PATCH 3/4] new drawHitFromCache Shape method replaces Image createImageHitRegion --- src/Container.js | 5 +-- src/Node.js | 45 +++++++++++-------- src/Shape.js | 55 ++++++++++++++++++++--- src/shapes/Image.js | 81 +++------------------------------- test/unit/Node-test.js | 4 -- test/unit/Shape-test.js | 52 ++++++++++++++++++++++ test/unit/filters/Blur-test.js | 4 +- test/unit/shapes/Image-test.js | 49 -------------------- 8 files changed, 136 insertions(+), 159 deletions(-) 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 54cca92f..1bf224bc 100644 --- a/src/Node.js +++ b/src/Node.js @@ -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. diff --git a/src/Shape.js b/src/Shape.js index 9fa82048..8d0ba035 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -300,10 +300,7 @@ 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,55 @@ } return this; - } + }, + /** + * draw hit graph using the cached scene canvas + * @method + * @memberof Kinetic.Shape.prototype + * @returns {Kinetic.Shape} + * @example + * shape.cache(); + * shape.drawHitFromCache(); + */ + drawHitFromCache: function() { + var cachedCanvas = this._cache.canvas, + sceneCanvas = cachedCanvas.scene, + 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 > 0) { + hitData[i] = rgbColorKey.r; + hitData[i + 1] = rgbColorKey.g; + hitData[i + 2] = rgbColorKey.b; + hitData[i + 3] = alpha; + } + } + + 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); diff --git a/src/shapes/Image.js b/src/shapes/Image.js index 2ed2509c..2ac61a3f 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -71,83 +71,12 @@ }, _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/test/unit/Node-test.js b/test/unit/Node-test.js index 5daf725d..b13b6391 100644 --- a/test/unit/Node-test.js +++ b/test/unit/Node-test.js @@ -2929,11 +2929,7 @@ suite('Node', function() { 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(); diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index 06ce8b30..2edec006 100644 --- a/test/unit/Shape-test.js +++ b/test/unit/Shape-test.js @@ -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 a9f2d52f..583e8c8b 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -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); }); // ====================================================== diff --git a/test/unit/shapes/Image-test.js b/test/unit/shapes/Image-test.js index 5f15ddbc..d346aa63 100644 --- a/test/unit/shapes/Image-test.js +++ b/test/unit/shapes/Image-test.js @@ -173,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(); From 65a0aecb9772e0f5cea72d189844d8dbed355009 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 5 Jan 2014 01:24:23 -0800 Subject: [PATCH 4/4] added test for hit region draw from blurred image --- src/Shape.js | 14 +++++++----- test/runner.js | 5 +++++ test/unit/filters/Blur-test.js | 39 ++++++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/Shape.js b/src/Shape.js index 8d0ba035..fd4c52c2 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -319,14 +319,18 @@ * 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() { - var cachedCanvas = this._cache.canvas, - sceneCanvas = cachedCanvas.scene, + drawHitFromCache: function(alphaThreshold) { + var threshold = alphaThreshold || 0, + cachedCanvas = this._cache.canvas, + sceneCanvas = this._getCachedSceneCanvas(), sceneContext = sceneCanvas.getContext(), hitCanvas = cachedCanvas.hit, hitContext = hitCanvas.getContext(), @@ -347,11 +351,11 @@ // replace non transparent pixels with color key for(i = 0; i < len; i += 4) { alpha = sceneData[i + 3]; - if (alpha > 0) { + if (alpha > threshold) { hitData[i] = rgbColorKey.r; hitData[i + 1] = rgbColorKey.g; hitData[i + 2] = rgbColorKey.b; - hitData[i + 3] = alpha; + hitData[i + 3] = 255; } } 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/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 583e8c8b..2a04051f 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -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