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

preparing codebase for new pixel detection property

Browse Source
This commit is contained in:
Eric Rowell 2012-04-01 00:31:02 -07:00
parent 8f104a6fad
commit 08e2b74da9
4 changed files with 95 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Mar 31 2012 * Date: Apr 01 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@ -1140,11 +1140,11 @@ Kinetic.Stage.prototype = {
this.width = width; this.width = width;
this.height = height; this.height = height;
// set buffer layer and backstage layer sizes // set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width; this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height; this.bufferLayer.getCanvas().height = height;
this.backstageLayer.getCanvas().width = width; this.pathLayer.getCanvas().width = width;
this.backstageLayer.getCanvas().height = height; this.pathLayer.getCanvas().height = height;
}, },
/** /**
* return stage size * return stage size
@ -1272,19 +1272,15 @@ Kinetic.Stage.prototype = {
*/ */
_detectEvent: function(shape, evt) { _detectEvent: function(shape, evt) {
var isDragging = Kinetic.GlobalObject.drag.moving; var isDragging = Kinetic.GlobalObject.drag.moving;
var backstageLayer = this.backstageLayer;
var backstageLayerContext = backstageLayer.getContext();
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
var pos = this.getUserPosition(); var pos = this.getUserPosition();
var el = shape.eventListeners; var el = shape.eventListeners;
shape._draw(backstageLayer);
if(this.targetShape && shape.id === this.targetShape.id) { if(this.targetShape && shape.id === this.targetShape.id) {
this.targetFound = true; this.targetFound = true;
} }
if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) { if(shape.visible && pos !== undefined && shape._isPointInPath(pos)) {
// handle onmousedown // handle onmousedown
if(!isDragging && this.mouseDown) { if(!isDragging && this.mouseDown) {
this.mouseDown = false; this.mouseDown = false;
@ -1453,8 +1449,7 @@ Kinetic.Stage.prototype = {
this._setMousePosition(evt); this._setMousePosition(evt);
this._setTouchPosition(evt); this._setTouchPosition(evt);
var backstageLayer = this.backstageLayer; this._clearDefaultLayers();
backstageLayer.clear();
/* /*
* loop through layers. If at any point an event * loop through layers. If at any point an event
@ -1483,6 +1478,13 @@ Kinetic.Stage.prototype = {
} }
}, },
/**
* clear default layers
*/
_clearDefaultLayers: function() {
var pathLayer = this.pathLayer;
pathLayer.clear();
},
/** /**
* begin listening for events by adding event handlers * begin listening for events by adding event handlers
* to the container * to the container
@ -1583,25 +1585,25 @@ Kinetic.Stage.prototype = {
}; };
}, },
/** /**
* disable layer rendering * modify path context
* @param {Layer} layer * @param {CanvasContext} context
*/ */
_stripLayer: function(layer) { _modifyPathContext: function(context) {
layer.context.stroke = function() { context.stroke = function() {
}; };
layer.context.fill = function() { context.fill = function() {
}; };
layer.context.fillRect = function(x, y, width, height) { context.fillRect = function(x, y, width, height) {
layer.context.rect(x, y, width, height); layer.context.rect(x, y, width, height);
}; };
layer.context.strokeRect = function(x, y, width, height) { context.strokeRect = function(x, y, width, height) {
layer.context.rect(x, y, width, height); layer.context.rect(x, y, width, height);
}; };
layer.context.drawImage = function() { context.drawImage = function() {
}; };
layer.context.fillText = function() { context.fillText = function() {
}; };
layer.context.strokeText = function() { context.strokeText = function() {
}; };
}, },
/** /**
@ -1720,26 +1722,30 @@ Kinetic.Stage.prototype = {
// default layers // default layers
this.bufferLayer = new Kinetic.Layer(); this.bufferLayer = new Kinetic.Layer();
this.backstageLayer = new Kinetic.Layer(); this.pathLayer = new Kinetic.Layer();
// set parents // set parents
this.bufferLayer.parent = this; this.bufferLayer.parent = this;
this.backstageLayer.parent = this; this.pathLayer.parent = this;
// customize back stage context // customize back stage context
this._stripLayer(this.backstageLayer); this._modifyPathContext(this.pathLayer.context);
// hide canvases
this.bufferLayer.getCanvas().style.display = 'none'; this.bufferLayer.getCanvas().style.display = 'none';
this.backstageLayer.getCanvas().style.display = 'none'; this.pathLayer.getCanvas().style.display = 'none';
// add buffer layer // add buffer layer
this.bufferLayer.canvas.width = this.width; this.bufferLayer.canvas.width = this.width;
this.bufferLayer.canvas.height = this.height; this.bufferLayer.canvas.height = this.height;
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
this.content.appendChild(this.bufferLayer.canvas); this.content.appendChild(this.bufferLayer.canvas);
// add backstage layer // add path layer
this.backstageLayer.canvas.width = this.width; this.pathLayer.canvas.width = this.width;
this.backstageLayer.canvas.height = this.height; this.pathLayer.canvas.height = this.height;
this.content.appendChild(this.backstageLayer.canvas); this.pathLayer.canvas.className = 'kineticjs-path-layer';
this.content.appendChild(this.pathLayer.canvas);
} }
}; };
// Extend Container and Node // Extend Container and Node
@ -1925,7 +1931,7 @@ Kinetic.Shape.prototype = {
* the shape is being rendered, .getContext() returns the context of the * the shape is being rendered, .getContext() returns the context of the
* user created layer that contains the shape. When the event detection * user created layer that contains the shape. When the event detection
* engine is determining whether or not an event has occured on that shape, * engine is determining whether or not an event has occured on that shape,
* .getContext() returns the context of the invisible backstage layer. * .getContext() returns the context of the invisible path layer.
*/ */
getContext: function() { getContext: function() {
return this.tempLayer.getContext(); return this.tempLayer.getContext();
@ -2055,6 +2061,17 @@ Kinetic.Shape.prototype = {
this.drawFunc.call(this); this.drawFunc.call(this);
context.restore(); context.restore();
} }
},
/**
* custom isPointInPath method which can use path detection
* or pixel detection
*/
_isPointInPath: function(pos) {
var stage = this.getStage();
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
this._draw(pathLayer);
return pathLayerContext.isPointInPath(pos.x, pos.y);
} }
}; };
// extend Node // extend Node

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

File diff suppressed because one or more lines are too long

13
src/Shape.js
View File

@ -41,7 +41,7 @@ Kinetic.Shape.prototype = {
* the shape is being rendered, .getContext() returns the context of the * the shape is being rendered, .getContext() returns the context of the
* user created layer that contains the shape. When the event detection * user created layer that contains the shape. When the event detection
* engine is determining whether or not an event has occured on that shape, * engine is determining whether or not an event has occured on that shape,
* .getContext() returns the context of the invisible backstage layer. * .getContext() returns the context of the invisible path layer.
*/ */
getContext: function() { getContext: function() {
return this.tempLayer.getContext(); return this.tempLayer.getContext();
@ -171,6 +171,17 @@ Kinetic.Shape.prototype = {
this.drawFunc.call(this); this.drawFunc.call(this);
context.restore(); context.restore();
} }
},
/**
* custom isPointInPath method which can use path detection
* or pixel detection
*/
_isPointInPath: function(pos) {
var stage = this.getStage();
var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext();
this._draw(pathLayer);
return pathLayerContext.isPointInPath(pos.x, pos.y);
} }
}; };
// extend Node // extend Node

62
src/Stage.js
View File

@ -114,11 +114,11 @@ Kinetic.Stage.prototype = {
this.width = width; this.width = width;
this.height = height; this.height = height;
// set buffer layer and backstage layer sizes // set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width; this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height; this.bufferLayer.getCanvas().height = height;
this.backstageLayer.getCanvas().width = width; this.pathLayer.getCanvas().width = width;
this.backstageLayer.getCanvas().height = height; this.pathLayer.getCanvas().height = height;
}, },
/** /**
* return stage size * return stage size
@ -246,19 +246,15 @@ Kinetic.Stage.prototype = {
*/ */
_detectEvent: function(shape, evt) { _detectEvent: function(shape, evt) {
var isDragging = Kinetic.GlobalObject.drag.moving; var isDragging = Kinetic.GlobalObject.drag.moving;
var backstageLayer = this.backstageLayer;
var backstageLayerContext = backstageLayer.getContext();
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
var pos = this.getUserPosition(); var pos = this.getUserPosition();
var el = shape.eventListeners; var el = shape.eventListeners;
shape._draw(backstageLayer);
if(this.targetShape && shape.id === this.targetShape.id) { if(this.targetShape && shape.id === this.targetShape.id) {
this.targetFound = true; this.targetFound = true;
} }
if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) { if(shape.visible && pos !== undefined && shape._isPointInPath(pos)) {
// handle onmousedown // handle onmousedown
if(!isDragging && this.mouseDown) { if(!isDragging && this.mouseDown) {
this.mouseDown = false; this.mouseDown = false;
@ -427,8 +423,7 @@ Kinetic.Stage.prototype = {
this._setMousePosition(evt); this._setMousePosition(evt);
this._setTouchPosition(evt); this._setTouchPosition(evt);
var backstageLayer = this.backstageLayer; this._clearDefaultLayers();
backstageLayer.clear();
/* /*
* loop through layers. If at any point an event * loop through layers. If at any point an event
@ -457,6 +452,13 @@ Kinetic.Stage.prototype = {
} }
}, },
/**
* clear default layers
*/
_clearDefaultLayers: function() {
var pathLayer = this.pathLayer;
pathLayer.clear();
},
/** /**
* begin listening for events by adding event handlers * begin listening for events by adding event handlers
* to the container * to the container
@ -557,25 +559,25 @@ Kinetic.Stage.prototype = {
}; };
}, },
/** /**
* disable layer rendering * modify path context
* @param {Layer} layer * @param {CanvasContext} context
*/ */
_stripLayer: function(layer) { _modifyPathContext: function(context) {
layer.context.stroke = function() { context.stroke = function() {
}; };
layer.context.fill = function() { context.fill = function() {
}; };
layer.context.fillRect = function(x, y, width, height) { context.fillRect = function(x, y, width, height) {
layer.context.rect(x, y, width, height); layer.context.rect(x, y, width, height);
}; };
layer.context.strokeRect = function(x, y, width, height) { context.strokeRect = function(x, y, width, height) {
layer.context.rect(x, y, width, height); layer.context.rect(x, y, width, height);
}; };
layer.context.drawImage = function() { context.drawImage = function() {
}; };
layer.context.fillText = function() { context.fillText = function() {
}; };
layer.context.strokeText = function() { context.strokeText = function() {
}; };
}, },
/** /**
@ -694,26 +696,30 @@ Kinetic.Stage.prototype = {
// default layers // default layers
this.bufferLayer = new Kinetic.Layer(); this.bufferLayer = new Kinetic.Layer();
this.backstageLayer = new Kinetic.Layer(); this.pathLayer = new Kinetic.Layer();
// set parents // set parents
this.bufferLayer.parent = this; this.bufferLayer.parent = this;
this.backstageLayer.parent = this; this.pathLayer.parent = this;
// customize back stage context // customize back stage context
this._stripLayer(this.backstageLayer); this._modifyPathContext(this.pathLayer.context);
// hide canvases
this.bufferLayer.getCanvas().style.display = 'none'; this.bufferLayer.getCanvas().style.display = 'none';
this.backstageLayer.getCanvas().style.display = 'none'; this.pathLayer.getCanvas().style.display = 'none';
// add buffer layer // add buffer layer
this.bufferLayer.canvas.width = this.width; this.bufferLayer.canvas.width = this.width;
this.bufferLayer.canvas.height = this.height; this.bufferLayer.canvas.height = this.height;
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
this.content.appendChild(this.bufferLayer.canvas); this.content.appendChild(this.bufferLayer.canvas);
// add backstage layer // add path layer
this.backstageLayer.canvas.width = this.width; this.pathLayer.canvas.width = this.width;
this.backstageLayer.canvas.height = this.height; this.pathLayer.canvas.height = this.height;
this.content.appendChild(this.backstageLayer.canvas); this.pathLayer.canvas.className = 'kineticjs-path-layer';
this.content.appendChild(this.pathLayer.canvas);
} }
}; };
// Extend Container and Node // Extend Container and Node