cleaned up _getContentPosition() method and fixed event detections for stages below the fold on mobile devices

This commit is contained in:
Eric Rowell
2012-08-26 22:42:54 -07:00
parent 1de5bce6e5
commit 8883e80bfe
6 changed files with 186 additions and 20 deletions

View 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>

View 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>