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
|
||||
<sky>
|
||||
<import src="fps-counter.sky" />
|
||||
<style>
|
||||
dot {
|
||||
position: absolute;
|
||||
@ -11,25 +10,23 @@ dot {
|
||||
</style>
|
||||
<dot />
|
||||
<log>Ready</log>
|
||||
<fps-counter />
|
||||
<script>
|
||||
var dot = document.querySelector("dot");
|
||||
var log = document.querySelector("log");
|
||||
import "dart:sky";
|
||||
|
||||
function logPointerEvent(evt) {
|
||||
var message = "type=" + event.type;
|
||||
var x = evt.x.toFixed(2);
|
||||
var y = evt.y.toFixed(2);
|
||||
message += " x=" + x + " y=" + y;
|
||||
final Element dot = document.querySelector("dot");
|
||||
|
||||
var transform = "translate(" + (x - 50) + "px," + (y - 50) + "px)";
|
||||
dot.style.transform = transform;
|
||||
log.textContent = message;
|
||||
void moveDot(event) {
|
||||
double x = event.x;
|
||||
double y = event.y;
|
||||
|
||||
dot.style.setProperty("transform", "translate(${x-50}px,${y-50}px)");
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener("pointerdown", logPointerEvent);
|
||||
document.documentElement.addEventListener("pointermove", logPointerEvent);
|
||||
document.documentElement.addEventListener("pointerup", logPointerEvent);
|
||||
document.documentElement.addEventListener("pointercancel", logPointerEvent);
|
||||
void main() {
|
||||
document.addEventListener("pointerdown", moveDot);
|
||||
document.addEventListener("pointermove", moveDot);
|
||||
document.addEventListener("pointerup", moveDot);
|
||||
document.addEventListener("pointercancel", moveDot);
|
||||
}
|
||||
</script>
|
||||
</sky>
|
||||
|
Loading…
x
Reference in New Issue
Block a user