lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-04 19:08:24 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

reworked pixel detection. I now require the dev to use shape.save() to save the pixel data for performance reasons

Browse Source
This commit is contained in:
Eric Rowell
2012-04-01 19:38:30 -07:00
parent 72c0555d0b
commit 6ce9d5489c
6 changed files with 121 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Stage.js
View File

@@ -198,11 +198,11 @@ Kinetic.Stage.prototype = {
* @param {String} typesStr
* @param {function} handler
*/
onContainer: function(typesStr, handler) {
onContent: function(typesStr, handler) {
var types = typesStr.split(' ');
for(var n = 0; n < types.length; n++) {
var baseEvent = types[n];
this.container.addEventListener(baseEvent, handler, false);
this.content.addEventListener(baseEvent, handler, false);
}
},
/**
@@ -248,6 +248,12 @@ Kinetic.Stage.prototype = {
getContainer: function() {
return this.container;
},
/**
* get content DOM element
*/
getContent: function() {
return this.content;
},
/**
* get stage
*/
@@ -436,8 +442,7 @@ Kinetic.Stage.prototype = {
this._setMousePosition(evt);
this._setTouchPosition(evt);
this._clearDefaultLayers();
this.pathLayer.clear();
/*
* loop through layers. If at any point an event
@@ -466,13 +471,6 @@ Kinetic.Stage.prototype = {
}
},
/**
* clear default layers
*/
_clearDefaultLayers: function() {
this.bufferLayer.clear();
this.pathLayer.clear();
},
/**
* begin listening for events by adding event handlers
* to the container
@@ -481,18 +479,18 @@ Kinetic.Stage.prototype = {
var that = this;
// desktop events
this.container.addEventListener('mousedown', function(evt) {
this.content.addEventListener('mousedown', function(evt) {
that.mouseDown = true;
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mousemove', function(evt) {
this.content.addEventListener('mousemove', function(evt) {
that.mouseUp = false;
that.mouseDown = false;
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mouseup', function(evt) {
this.content.addEventListener('mouseup', function(evt) {
that.mouseUp = true;
that.mouseDown = false;
that._handleStageEvent(evt);
@@ -500,11 +498,11 @@ Kinetic.Stage.prototype = {
that.clickStart = false;
}, false);
this.container.addEventListener('mouseover', function(evt) {
this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mouseout', function(evt) {
this.content.addEventListener('mouseout', function(evt) {
// if there's a current target shape, run mouseout handlers
var targetShape = that.targetShape;
if(targetShape) {
@@ -513,18 +511,18 @@ Kinetic.Stage.prototype = {
that.mousePos = undefined;
}, false);
// mobile events
this.container.addEventListener('touchstart', function(evt) {
this.content.addEventListener('touchstart', function(evt) {
evt.preventDefault();
that.touchStart = true;
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('touchmove', function(evt) {
this.content.addEventListener('touchmove', function(evt) {
evt.preventDefault();
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('touchend', function(evt) {
this.content.addEventListener('touchend', function(evt) {
evt.preventDefault();
that.touchEnd = true;
that._handleStageEvent(evt);
@@ -535,8 +533,8 @@ Kinetic.Stage.prototype = {
* @param {Event} evt
*/
_setMousePosition: function(evt) {
var mouseX = evt.offsetX || (evt.clientX - this._getContainerPosition().left + window.pageXOffset);
var mouseY = evt.offsetY || (evt.clientY - this._getContainerPosition().top + window.pageYOffset);
var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
this.mousePos = {
x: mouseX,
y: mouseY
@@ -551,8 +549,8 @@ Kinetic.Stage.prototype = {
// one finger
var touch = evt.touches[0];
// Get the information for finger #1
var touchX = touch.clientX - this._getContainerPosition().left + window.pageXOffset;
var touchY = touch.clientY - this._getContainerPosition().top + window.pageYOffset;
var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
this.touchPos = {
x: touchX,
@@ -563,8 +561,8 @@ Kinetic.Stage.prototype = {
/**
* get container position
*/
_getContainerPosition: function() {
var obj = this.container;
_getContentPosition: function() {
var obj = this.content;
var top = 0;
var left = 0;
while(obj && obj.tagName !== 'BODY') {
@@ -618,7 +616,7 @@ Kinetic.Stage.prototype = {
_prepareDrag: function() {
var that = this;
this.onContainer('mousemove touchmove', function(evt) {
this.onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
@@ -700,7 +698,7 @@ Kinetic.Stage.prototype = {
}
}, false);
this.onContainer('mouseup touchend mouseout', function(evt) {
this.onContent('mouseup touchend mouseout', function(evt) {
that._endDrag(evt);
});
},
@@ -717,8 +715,12 @@ Kinetic.Stage.prototype = {
this.container.appendChild(this.content);
// default layers
this.bufferLayer = new Kinetic.Layer();
this.pathLayer = new Kinetic.Layer();
this.bufferLayer = new Kinetic.Layer({
name: 'bufferLayer'
});
this.pathLayer = new Kinetic.Layer({
name: 'pathLayer'
});
// set parents
this.bufferLayer.parent = this;