mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 06:55:17 +08:00
cleaned up _getContentPosition() method and fixed event detections for stages below the fold on mobile devices
This commit is contained in:
Eric Rowell
parent
1de5bce6e5
commit
8883e80bfe
16
dist/kinetic-core.js
vendored
16
dist/kinetic-core.js
vendored
@ -3262,8 +3262,8 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Event} evt
|
||||
*/
|
||||
_setMousePosition: function(evt) {
|
||||
var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
|
||||
var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
|
||||
var mouseX = evt.clientX - this._getContentPosition().left;
|
||||
var mouseY = evt.clientY - this._getContentPosition().top;
|
||||
this.mousePos = {
|
||||
x: mouseX,
|
||||
y: mouseY
|
||||
@ -3274,12 +3274,12 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Event} evt
|
||||
*/
|
||||
_setTouchPosition: function(evt) {
|
||||
if(evt.touches !== undefined && evt.touches.length === 1) {// Only deal with
|
||||
if(evt.touches !== undefined && evt.touches.length === 1) {
|
||||
// one finger
|
||||
var touch = evt.touches[0];
|
||||
// Get the information for finger #1
|
||||
var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
|
||||
var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
|
||||
var touchX = touch.clientX - this._getContentPosition().left;
|
||||
var touchY = touch.clientY - this._getContentPosition().top;
|
||||
|
||||
this.touchPos = {
|
||||
x: touchX,
|
||||
@ -3291,10 +3291,10 @@ Kinetic.Stage.prototype = {
|
||||
* get container position
|
||||
*/
|
||||
_getContentPosition: function() {
|
||||
var rect = this.content.getBoundingClientRect(), root = document.documentElement;
|
||||
var rect = this.content.getBoundingClientRect();
|
||||
return {
|
||||
top: rect.top + root.scrollTop,
|
||||
left: rect.left + root.scrollLeft
|
||||
top: rect.top,
|
||||
left: rect.left
|
||||
};
|
||||
},
|
||||
/**
|
||||
|
||||
2
dist/kinetic-core.min.js
vendored
2
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
16
src/Stage.js
16
src/Stage.js
@ -603,8 +603,8 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Event} evt
|
||||
*/
|
||||
_setMousePosition: function(evt) {
|
||||
var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
|
||||
var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
|
||||
var mouseX = evt.clientX - this._getContentPosition().left;
|
||||
var mouseY = evt.clientY - this._getContentPosition().top;
|
||||
this.mousePos = {
|
||||
x: mouseX,
|
||||
y: mouseY
|
||||
@ -615,12 +615,12 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Event} evt
|
||||
*/
|
||||
_setTouchPosition: function(evt) {
|
||||
if(evt.touches !== undefined && evt.touches.length === 1) {// Only deal with
|
||||
if(evt.touches !== undefined && evt.touches.length === 1) {
|
||||
// one finger
|
||||
var touch = evt.touches[0];
|
||||
// Get the information for finger #1
|
||||
var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
|
||||
var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
|
||||
var touchX = touch.clientX - this._getContentPosition().left;
|
||||
var touchY = touch.clientY - this._getContentPosition().top;
|
||||
|
||||
this.touchPos = {
|
||||
x: touchX,
|
||||
@ -632,10 +632,10 @@ Kinetic.Stage.prototype = {
|
||||
* get container position
|
||||
*/
|
||||
_getContentPosition: function() {
|
||||
var rect = this.content.getBoundingClientRect(), root = document.documentElement;
|
||||
var rect = this.content.getBoundingClientRect();
|
||||
return {
|
||||
top: rect.top + root.scrollTop,
|
||||
left: rect.left + root.scrollLeft
|
||||
top: rect.top,
|
||||
left: rect.left
|
||||
};
|
||||
},
|
||||
/**
|
||||
|
||||
85
tests/html/special/stageBelowFold.html
Normal file
85
tests/html/special/stageBelowFold.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#container {
|
||||
margin-top: 600px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="../../../dist/kinetic-core.js"></script>
|
||||
<script src="../../js/Test.js"></script>
|
||||
<script>
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
circle.on('mousedown', function() {
|
||||
log('mousedown');
|
||||
});
|
||||
|
||||
circle.on('mouseup', function() {
|
||||
log('mouseup');
|
||||
});
|
||||
|
||||
circle.on('mouseover', function() {
|
||||
log('mouseover');
|
||||
});
|
||||
|
||||
circle.on('mouseout', function() {
|
||||
log('mouseout');
|
||||
});
|
||||
|
||||
circle.on('mousemove', function() {
|
||||
log('mousemove');
|
||||
});
|
||||
|
||||
circle.on('click', function() {
|
||||
log('click');
|
||||
});
|
||||
|
||||
circle.on('dblclick', function() {
|
||||
log('dblclick');
|
||||
});
|
||||
/*
|
||||
* mobile
|
||||
*/
|
||||
circle.on('touchstart', function() {
|
||||
log('touchstart');
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
log('touchend');
|
||||
});
|
||||
|
||||
circle.on('touchmove', function() {
|
||||
log('touchmove');
|
||||
});
|
||||
|
||||
circle.on('tap', function(evt) {
|
||||
log('tap');
|
||||
});
|
||||
|
||||
circle.on('dbltap', function() {
|
||||
log('dbltap');
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
83
tests/html/special/tallStage.html
Normal file
83
tests/html/special/tallStage.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="../../../dist/kinetic-core.js"></script>
|
||||
<script src="../../js/Test.js"></script>
|
||||
<script>
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 2000
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: 1800,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
circle.on('mousedown', function() {
|
||||
log('mousedown');
|
||||
});
|
||||
|
||||
circle.on('mouseup', function() {
|
||||
log('mouseup');
|
||||
});
|
||||
|
||||
circle.on('mouseover', function() {
|
||||
log('mouseover');
|
||||
});
|
||||
|
||||
circle.on('mouseout', function() {
|
||||
log('mouseout');
|
||||
});
|
||||
|
||||
circle.on('mousemove', function() {
|
||||
log('mousemove');
|
||||
});
|
||||
|
||||
circle.on('click', function() {
|
||||
log('click');
|
||||
});
|
||||
|
||||
circle.on('dblclick', function() {
|
||||
log('dblclick');
|
||||
});
|
||||
/*
|
||||
* mobile
|
||||
*/
|
||||
circle.on('touchstart', function() {
|
||||
log('touchstart');
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
log('touchend');
|
||||
});
|
||||
|
||||
circle.on('touchmove', function() {
|
||||
log('touchmove');
|
||||
});
|
||||
|
||||
circle.on('tap', function(evt) {
|
||||
log('tap');
|
||||
});
|
||||
|
||||
circle.on('dbltap', function() {
|
||||
log('dbltap');
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -14,7 +14,7 @@ Test.prototype.tests = {
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
|
||||
circle.on('mousedown', function() {
|
||||
log('mousedown');
|
||||
});
|
||||
@ -67,8 +67,6 @@ Test.prototype.tests = {
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
document.body.appendChild(layer.bufferCanvas.element)
|
||||
},
|
||||
'TRANSITION - transition position and rotation': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user