mirror of
https://github.com/konvajs/konva.git
synced 2025-10-15 12:34:52 +08:00
cleaned up _getContentPosition() method and fixed event detections for stages below the fold on mobile devices
This commit is contained in:
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>
|
Reference in New Issue
Block a user