Draw outer frame per dimension ratio of touch device
Previously, webplot draws the outer rectangle frame on the canvas
as large as possible. In this patch, it draws the outer frame
conforming to the dimension ratio of the touch device just like
what the old mtplot did.
BUG=chromium:443539
TEST=Manually test that webplot draws a gray outer rectangle on
the canvas with the same dimension ratio of the device.
Change-Id: Ie7dad244402f20262a9fec84b503b75422336f06
Reviewed-on: https://chromium-review.googlesource.com/239452
Reviewed-by: Charlie Mooney <[email protected]>
Trybot-Ready: Shyh-In Hwang <[email protected]>
Tested-by: Shyh-In Hwang <[email protected]>
Commit-Queue: Shyh-In Hwang <[email protected]>
diff --git a/webplot.js b/webplot.js
index 274daa8..5f7a84c 100644
--- a/webplot.js
+++ b/webplot.js
@@ -112,12 +112,36 @@
var newHeight = document.body.clientHeight;
if (this.canvas.width != newWidth || this.canvas.height != newHeight) {
+ var deviceRatio = (this.maxY - this.minY) / (this.maxX - this.minX);
+ var canvasRatio = (newHeight / newWidth);
+
+ // The actual dimension of the viewport.
this.canvas.width = newWidth;
this.canvas.height = newHeight;
- this.maxRadius = Math.min(newWidth, newHeight) * this.maxRadiusRatio;
+
+ // Calculate the inner area of the viewport on which to draw finger traces.
+ // This inner area has the same height/width ratio as the touch device.
+ if (deviceRatio >= canvasRatio) {
+ this.canvas.innerWidth = Math.round(newHeight / deviceRatio);
+ this.canvas.innerHeight = newHeight;
+ this.canvas.innerOffsetLeft = Math.round(
+ (newWidth - this.canvas.innerWidth) / 2);
+ this.canvas.innerOffsetTop = 0;
+ } else {
+ this.canvas.innerWidth = newWidth;
+ this.canvas.innerHeight = Math.round(newWidth * deviceRatio);
+ this.canvas.innerOffsetLeft = 0;
+ this.canvas.innerOffsetTop = Math.round(
+ (newHeight - this.canvas.innerHeight) / 2);
+ }
+
+ this.maxRadius = Math.min(this.canvas.innerWidth, this.canvas.innerHeight) *
+ this.maxRadiusRatio;
this.clickEdge = (this.pressureMode ? this.maxRadius : this.maxRadius / 2);
}
- this.drawRect(0, 0, newWidth, newHeight, this.color.COLOR_FRAME);
+ this.drawRect(this.canvas.innerOffsetLeft, this.canvas.innerOffsetTop,
+ this.canvas.innerWidth, this.canvas.innerHeight,
+ this.color.COLOR_FRAME);
}
@@ -181,10 +205,12 @@
continue;
}
+ // Calculate (x, y) based on the inner width/height which has the same
+ // dimension ratio as the touch device.
var x = (finger.x - this.minX) / (this.maxX - this.minX) *
- this.canvas.width;
+ this.canvas.innerWidth + this.canvas.innerOffsetLeft;
var y = (finger.y - this.minY) / (this.maxY - this.minY) *
- this.canvas.height;
+ this.canvas.innerHeight + this.canvas.innerOffsetTop;
if (this.pressureMode)
var r = (finger.pressure - this.minPressure) /
(this.maxPressure - this.minPressure) * this.maxRadius;
@@ -207,8 +233,10 @@
// Just draw the click at a random position.
if (snapshot.fingers.length == 0 && snapshot.button_pressed == 1 &&
!this.clickDown) {
- var x = Math.random() * this.canvas.width;
- var y = Math.random() * this.canvas.height;
+ var x = Math.random() * this.canvas.innerWidth +
+ this.canvas.innerOffsetLeft;
+ var y = Math.random() * this.canvas.innerHeight +
+ this.canvas.innerOffsetTop;
this.drawRect(x, y, edge, edge, this.color.getRectColor());
this.clickDown = true;
}
