从GtkWidget切出一块

Question

我正在开发一个远程应用程序，在该应用程序中我将所有的远程监控器都集成了。

所以我想剪掉一块，这样一来我只能看到一台显示器，而不是全部。

我尝试了许多功能，但发现了一个名为body { background: #000; }的容器。

有了这个容器，我可以将小部件放入其中并使用以下功能调整它们的大小：const main = () => { new GravityGame({ width : 360, height : 180, refreshRate : 20 }).start(); } class AbstractGameClient { constructor(options) { this.refreshRate = options.refreshRate this.view = new GameArea({ width : options.width, height : options.height }) } update() { this.view.update() } start() { let self = this self.intervalId = setInterval(function() { self.update() }, self.refreshRate) return self } stop() { if (self.intervalId) { clearInterval(self.intervalId) } } } class GravityGame extends AbstractGameClient { constructor(options) { super(options) let myGamePiece = new Component({ width : 12, height : 12, color : 'red' }) this.view.addComponent(myGamePiece) } } class GameArea { constructor(options) { let self = this self.canvas = document.createElement('canvas') self.width = options.width self.height = options.height self.key = null self.components = [] self.addListeners() self.render() } render() { let self = this self.canvas.width = self.width self.canvas.height = self.height self.context = self.canvas.getContext('2d') document.body.insertBefore(self.canvas, document.body.childNodes[0]) } addComponent(component) { this.centerComponent(component) this.components.push(component) } addListeners() { let self = this; window.addEventListener('keydown', function(e) { self.key = e.keyCode; }); window.addEventListener('keyup', function(e) { self.key = false; }); } fill(color) { this.context.save(); this.context.fillStyle = color; this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.restore(); } clear() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } update() { let self = this let speed = { x : 0, y : 0 } if (self.key) { switch (self.key) { case 37: // left arrow speed.x = -5; break; case 38: // up arrow speed.y = -5; break; case 39: // right arrow speed.x = +5; break; case 40: // down arrow default: speed.y = +5; } } self.fill('#DE7') self.components.forEach(component => { component.speed.x = speed.x component.speed.y = speed.y component.reposition(self.context) component.redraw(self.context) }) } centerComponent(component) { let xOffset = Math.floor((this.canvas.width / 2) - component.width / 2) let yOffset = Math.floor((this.canvas.height / 2) - component.height / 2) component.position = { x : xOffset, y : yOffset } } }; class Component { constructor(options) { let self = this self.width = options.width self.height = options.height self.position = options.position self.color = options.color self.type = options.type self.speed = { x : 0, y : 0 } self.gravity = { x : 0, y : 0.05 }; self.acceleration = { x : 0, y : 0 }; } redraw(context) { context.fillStyle = this.color; context.fillRect(this.position.x, this.position.y, this.width, this.height); } reposition(context) { let self = this // Increase acceleration self.acceleration.x += self.gravity.x; self.acceleration.y += self.gravity.y; // pos + speed + acceleration self.position.x += self.speed.x + self.acceleration.x; self.position.y += self.speed.y + self.acceleration.y; self.checkBounds(context); } checkBounds(context) { let self = this let rockbottom = context.canvas.height - this.height if (self.position.y > rockbottom) { self.position.y = rockbottom if (context.canvas.height - self.height && self.key == 38) { self.position.y = self.speed.y } self.acceleration = { x : 0, y : 0 } // reset } } } main();和body { background: #000; }。

这在全屏模式下有效，但是在窗口模式下，窗口会自动变大。

我也尝试给窗口设置一个静态大小，但这没有帮助。