Port touch-demo.sky to Dart and make it work in SkyShell
We still don't quite handle multitouch correctly, but single touches work now. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/932283002
This commit is contained in:
parent
a5e01b1521
commit
431716f86d
@ -1,6 +1,5 @@
|
|||||||
#!mojo mojo:sky_viewer
|
#!mojo mojo:sky_viewer
|
||||||
<sky>
|
<sky>
|
||||||
<import src="fps-counter.sky" />
|
|
||||||
<style>
|
<style>
|
||||||
dot {
|
dot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -11,25 +10,23 @@ dot {
|
|||||||
</style>
|
</style>
|
||||||
<dot />
|
<dot />
|
||||||
<log>Ready</log>
|
<log>Ready</log>
|
||||||
<fps-counter />
|
|
||||||
<script>
|
<script>
|
||||||
var dot = document.querySelector("dot");
|
import "dart:sky";
|
||||||
var log = document.querySelector("log");
|
|
||||||
|
|
||||||
function logPointerEvent(evt) {
|
final Element dot = document.querySelector("dot");
|
||||||
var message = "type=" + event.type;
|
|
||||||
var x = evt.x.toFixed(2);
|
|
||||||
var y = evt.y.toFixed(2);
|
|
||||||
message += " x=" + x + " y=" + y;
|
|
||||||
|
|
||||||
var transform = "translate(" + (x - 50) + "px," + (y - 50) + "px)";
|
void moveDot(event) {
|
||||||
dot.style.transform = transform;
|
double x = event.x;
|
||||||
log.textContent = message;
|
double y = event.y;
|
||||||
|
|
||||||
|
dot.style.setProperty("transform", "translate(${x-50}px,${y-50}px)");
|
||||||
}
|
}
|
||||||
|
|
||||||
document.documentElement.addEventListener("pointerdown", logPointerEvent);
|
void main() {
|
||||||
document.documentElement.addEventListener("pointermove", logPointerEvent);
|
document.addEventListener("pointerdown", moveDot);
|
||||||
document.documentElement.addEventListener("pointerup", logPointerEvent);
|
document.addEventListener("pointermove", moveDot);
|
||||||
document.documentElement.addEventListener("pointercancel", logPointerEvent);
|
document.addEventListener("pointerup", moveDot);
|
||||||
|
document.addEventListener("pointercancel", moveDot);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</sky>
|
</sky>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user