mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 05:10:26 +08:00
preparing codebase for new pixel detection property
This commit is contained in:
Eric Rowell
parent
8f104a6fad
commit
08e2b74da9
77
dist/kinetic-core.js
vendored
77
dist/kinetic-core.js
vendored
@ -3,7 +3,7 @@
|
||||
* http://www.kineticjs.com/
|
||||
* Copyright 2012, Eric Rowell
|
||||
* Licensed under the MIT or GPL Version 2 licenses.
|
||||
* Date: Mar 31 2012
|
||||
* Date: Apr 01 2012
|
||||
*
|
||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||
*
|
||||
@ -1140,11 +1140,11 @@ Kinetic.Stage.prototype = {
|
||||
this.width = width;
|
||||
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().height = height;
|
||||
this.backstageLayer.getCanvas().width = width;
|
||||
this.backstageLayer.getCanvas().height = height;
|
||||
this.pathLayer.getCanvas().width = width;
|
||||
this.pathLayer.getCanvas().height = height;
|
||||
},
|
||||
/**
|
||||
* return stage size
|
||||
@ -1272,19 +1272,15 @@ Kinetic.Stage.prototype = {
|
||||
*/
|
||||
_detectEvent: function(shape, evt) {
|
||||
var isDragging = Kinetic.GlobalObject.drag.moving;
|
||||
var backstageLayer = this.backstageLayer;
|
||||
var backstageLayerContext = backstageLayer.getContext();
|
||||
var go = Kinetic.GlobalObject;
|
||||
var pos = this.getUserPosition();
|
||||
var el = shape.eventListeners;
|
||||
|
||||
shape._draw(backstageLayer);
|
||||
|
||||
if(this.targetShape && shape.id === this.targetShape.id) {
|
||||
this.targetFound = true;
|
||||
}
|
||||
|
||||
if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
|
||||
if(shape.visible && pos !== undefined && shape._isPointInPath(pos)) {
|
||||
// handle onmousedown
|
||||
if(!isDragging && this.mouseDown) {
|
||||
this.mouseDown = false;
|
||||
@ -1453,8 +1449,7 @@ Kinetic.Stage.prototype = {
|
||||
this._setMousePosition(evt);
|
||||
this._setTouchPosition(evt);
|
||||
|
||||
var backstageLayer = this.backstageLayer;
|
||||
backstageLayer.clear();
|
||||
this._clearDefaultLayers();
|
||||
|
||||
/*
|
||||
* 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
|
||||
* to the container
|
||||
@ -1583,25 +1585,25 @@ Kinetic.Stage.prototype = {
|
||||
};
|
||||
},
|
||||
/**
|
||||
* disable layer rendering
|
||||
* @param {Layer} layer
|
||||
* modify path context
|
||||
* @param {CanvasContext} context
|
||||
*/
|
||||
_stripLayer: function(layer) {
|
||||
layer.context.stroke = function() {
|
||||
_modifyPathContext: function(context) {
|
||||
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.strokeRect = function(x, y, width, height) {
|
||||
context.strokeRect = function(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
|
||||
this.bufferLayer = new Kinetic.Layer();
|
||||
this.backstageLayer = new Kinetic.Layer();
|
||||
this.pathLayer = new Kinetic.Layer();
|
||||
|
||||
// set parents
|
||||
this.bufferLayer.parent = this;
|
||||
this.backstageLayer.parent = this;
|
||||
this.pathLayer.parent = this;
|
||||
|
||||
// customize back stage context
|
||||
this._stripLayer(this.backstageLayer);
|
||||
this._modifyPathContext(this.pathLayer.context);
|
||||
|
||||
// hide canvases
|
||||
this.bufferLayer.getCanvas().style.display = 'none';
|
||||
this.backstageLayer.getCanvas().style.display = 'none';
|
||||
this.pathLayer.getCanvas().style.display = 'none';
|
||||
|
||||
// add buffer layer
|
||||
this.bufferLayer.canvas.width = this.width;
|
||||
this.bufferLayer.canvas.height = this.height;
|
||||
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
|
||||
this.content.appendChild(this.bufferLayer.canvas);
|
||||
|
||||
// add backstage layer
|
||||
this.backstageLayer.canvas.width = this.width;
|
||||
this.backstageLayer.canvas.height = this.height;
|
||||
this.content.appendChild(this.backstageLayer.canvas);
|
||||
// add path layer
|
||||
this.pathLayer.canvas.width = this.width;
|
||||
this.pathLayer.canvas.height = this.height;
|
||||
this.pathLayer.canvas.className = 'kineticjs-path-layer';
|
||||
this.content.appendChild(this.pathLayer.canvas);
|
||||
}
|
||||
};
|
||||
// Extend Container and Node
|
||||
@ -1925,7 +1931,7 @@ Kinetic.Shape.prototype = {
|
||||
* the shape is being rendered, .getContext() returns the context of the
|
||||
* user created layer that contains the shape. When the event detection
|
||||
* 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() {
|
||||
return this.tempLayer.getContext();
|
||||
@ -2055,6 +2061,17 @@ Kinetic.Shape.prototype = {
|
||||
this.drawFunc.call(this);
|
||||
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
|
||||
|
||||
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
13
src/Shape.js
13
src/Shape.js
@ -41,7 +41,7 @@ Kinetic.Shape.prototype = {
|
||||
* the shape is being rendered, .getContext() returns the context of the
|
||||
* user created layer that contains the shape. When the event detection
|
||||
* 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() {
|
||||
return this.tempLayer.getContext();
|
||||
@ -171,6 +171,17 @@ Kinetic.Shape.prototype = {
|
||||
this.drawFunc.call(this);
|
||||
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
|
||||
|
||||
62
src/Stage.js
62
src/Stage.js
@ -114,11 +114,11 @@ Kinetic.Stage.prototype = {
|
||||
this.width = width;
|
||||
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().height = height;
|
||||
this.backstageLayer.getCanvas().width = width;
|
||||
this.backstageLayer.getCanvas().height = height;
|
||||
this.pathLayer.getCanvas().width = width;
|
||||
this.pathLayer.getCanvas().height = height;
|
||||
},
|
||||
/**
|
||||
* return stage size
|
||||
@ -246,19 +246,15 @@ Kinetic.Stage.prototype = {
|
||||
*/
|
||||
_detectEvent: function(shape, evt) {
|
||||
var isDragging = Kinetic.GlobalObject.drag.moving;
|
||||
var backstageLayer = this.backstageLayer;
|
||||
var backstageLayerContext = backstageLayer.getContext();
|
||||
var go = Kinetic.GlobalObject;
|
||||
var pos = this.getUserPosition();
|
||||
var el = shape.eventListeners;
|
||||
|
||||
shape._draw(backstageLayer);
|
||||
|
||||
if(this.targetShape && shape.id === this.targetShape.id) {
|
||||
this.targetFound = true;
|
||||
}
|
||||
|
||||
if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
|
||||
if(shape.visible && pos !== undefined && shape._isPointInPath(pos)) {
|
||||
// handle onmousedown
|
||||
if(!isDragging && this.mouseDown) {
|
||||
this.mouseDown = false;
|
||||
@ -427,8 +423,7 @@ Kinetic.Stage.prototype = {
|
||||
this._setMousePosition(evt);
|
||||
this._setTouchPosition(evt);
|
||||
|
||||
var backstageLayer = this.backstageLayer;
|
||||
backstageLayer.clear();
|
||||
this._clearDefaultLayers();
|
||||
|
||||
/*
|
||||
* 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
|
||||
* to the container
|
||||
@ -557,25 +559,25 @@ Kinetic.Stage.prototype = {
|
||||
};
|
||||
},
|
||||
/**
|
||||
* disable layer rendering
|
||||
* @param {Layer} layer
|
||||
* modify path context
|
||||
* @param {CanvasContext} context
|
||||
*/
|
||||
_stripLayer: function(layer) {
|
||||
layer.context.stroke = function() {
|
||||
_modifyPathContext: function(context) {
|
||||
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.strokeRect = function(x, y, width, height) {
|
||||
context.strokeRect = function(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
|
||||
this.bufferLayer = new Kinetic.Layer();
|
||||
this.backstageLayer = new Kinetic.Layer();
|
||||
this.pathLayer = new Kinetic.Layer();
|
||||
|
||||
// set parents
|
||||
this.bufferLayer.parent = this;
|
||||
this.backstageLayer.parent = this;
|
||||
this.pathLayer.parent = this;
|
||||
|
||||
// customize back stage context
|
||||
this._stripLayer(this.backstageLayer);
|
||||
this._modifyPathContext(this.pathLayer.context);
|
||||
|
||||
// hide canvases
|
||||
this.bufferLayer.getCanvas().style.display = 'none';
|
||||
this.backstageLayer.getCanvas().style.display = 'none';
|
||||
this.pathLayer.getCanvas().style.display = 'none';
|
||||
|
||||
// add buffer layer
|
||||
this.bufferLayer.canvas.width = this.width;
|
||||
this.bufferLayer.canvas.height = this.height;
|
||||
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
|
||||
this.content.appendChild(this.bufferLayer.canvas);
|
||||
|
||||
// add backstage layer
|
||||
this.backstageLayer.canvas.width = this.width;
|
||||
this.backstageLayer.canvas.height = this.height;
|
||||
this.content.appendChild(this.backstageLayer.canvas);
|
||||
// add path layer
|
||||
this.pathLayer.canvas.width = this.width;
|
||||
this.pathLayer.canvas.height = this.height;
|
||||
this.pathLayer.canvas.className = 'kineticjs-path-layer';
|
||||
this.content.appendChild(this.pathLayer.canvas);
|
||||
}
|
||||
};
|
||||
// Extend Container and Node
|
||||
|
||||
Loading…
Reference in New Issue
Block a user