diff options
| author | Szabolcs David <davidsz@inf.u-szeged.hu> | 2017-09-12 18:53:59 +0200 |
|---|---|---|
| committer | Szabolcs David <davidsz@inf.u-szeged.hu> | 2017-11-03 00:46:30 +0000 |
| commit | 0bbaf0d5d7b2d406eda57d40370b00fb79cc0aeb (patch) | |
| tree | c23285ae71d4733c4bdd3d9c6749daba371610fb /tests/manual | |
| parent | 18ea13a7f5e083538910646c52a96a5e4642d1f2 (diff) | |
Support tablet devices
Process QTabletEvents and forward them to Chromium in order to
support pressure, tilting, rotation, eraser and similar
features of tablet devices.
Change-Id: I763d9e6e7036c29715a0b5531d3c6363eb4fcd8c
Reviewed-by: Michael Brüning <michael.bruning@qt.io>
Diffstat (limited to 'tests/manual')
| -rw-r--r-- | tests/manual/html/pointer-events.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/tests/manual/html/pointer-events.html b/tests/manual/html/pointer-events.html new file mode 100644 index 000000000..c6e728662 --- /dev/null +++ b/tests/manual/html/pointer-events.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Pointer event test</title> + </head> + <body> + +<p> + <canvas id="listener" width="500" height="500" style="border: silver 1px dotted;"></canvas> +</p> +<p> + Touch this circle with a stylus. Its size indicates your pressure; its position is the angle between your stylus and your tablet device; and the radius is the rotation - if your tablet supports it. +</p> + + </body> + <script> + +var canvas = document.getElementById("listener"); +var context = canvas.getContext('2d'); + +var eventName = [ + "pointerover", + "pointerenter", + "pointerdown", + "pointermove", + "pointerup", + "pointercancel", + "pointerout", + "pointerleave", + "gotpointercapture", + "lostpointercapture" +]; + +for (var i = 0; i < eventName.length; i++) { + canvas.addEventListener(eventName[i], function(ev) { + drawCircle(ev.pressure, ev.tiltX, ev.tiltY, ev.twist); + }, false); +} + +drawCircle(0, 0, 0, 0); + +function drawCircle(pressure, tiltX, tiltY, twist) { + var centerX = canvas.width / 2 + tiltX; + var centerY = canvas.height / 2 + tiltY; + var radius = 100 + 100 * pressure; + + context.clearRect(0, 0, canvas.width, canvas.height); + context.beginPath(); + context.arc(centerX, + centerY, + radius, + 0, + 2 * Math.PI, + false); + context.fillStyle = 'lightblue'; + context.fill(); + context.lineWidth = 3; + context.strokeStyle = '#008B8B'; + context.stroke(); + + context.beginPath(); + context.moveTo(centerX, centerY); + context.lineTo(centerX + radius * Math.cos(twist), centerY + radius * Math.sin(twist)); + context.stroke(); +} + +</script> +</html> |