I'm using nodegui(QT library for node) and I'm trying to create multiple vertical scroll areas but it doesn't work as expected.
import {QMainWindow, QWidget, FlexLayout,QScrollArea } from '#nodegui/nodegui';
const win = new QMainWindow();
win.setWindowTitle(`Test`);
win.setMinimumSize(900, 600);
const root = new QWidget()
const terminal1 = new QScrollArea()
terminal1.setInlineStyle(`width:100px`)
const div1 = new QWidget()
div1.setInlineStyle('width:1800px; height:100px; border: 1px solid yellow')
terminal1.setWidget(div1)
const terminal2 = new QScrollArea()
terminal2.setInlineStyle(`width:100px`)
const div2 = new QWidget()
div2.setInlineStyle('width:1800px; height:100px; border: 1px solid green')
terminal2.setWidget(div2)
const layout = new FlexLayout()
root.setLayout(layout)
layout.addWidget(terminal1)
layout.addWidget(terminal2)
win.setCentralWidget(root)
win.show();
(global as any).win = win;
Is any way to create stacked QScrollAreas?
Related
I try to set a defined width for a text object by below code (excerpt) but get a different width instead. e.g. "size to be 200" and "new size after render 202.25..." as differences. What am I missing or is this a bug?
var canvas = this.__canvas = new fabric.Canvas('c');
var size = 200;
var color = "#ff0000";
var fontScale = 1;
console.log("size to be "+size);
var opt = {
fill: color,
stroke: color,
scaleX: fontScale,
scaleY: fontScale,
fontFamily: "Times New Roman",
fontSize: 40,
fontWeight: "",
fontStyle: "",
textAlign: "center"
}
var itext = new fabric.Text("Hallo", opt);
canvas.add(itext);
itext.scaleToWidth(size);
canvas.renderAll();
console.log("new size after render "+itext.getScaledWidth());
Fiddle: http://jsfiddle.net/tomfree/drcqpwxy/4/
Previously I was working on Phaser 2 but now I need to switch to Phaser 3.
I tried to make the canvas responsive with ScaleManager but it is not working.
I think some of the methods changed but I didn't find any help to rescale the stage full screen.
var bSize = {
bWidth: window.innerWidth ||
root.clientWidth ||
body.clientWidth,
bHeight: window.innerHeight ||
root.clientHeight ||
body.clientHeight,
};
var game;
var canvas = document.getElementById("canvas");
function create() {
// Scaling options
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
// Have the game centered horizontally
game.scale.pageAlignHorizontally = true;
// And vertically
game.scale.pageAlignVertically = true;
// Screen size will be set automatically
game.scale.setScreenSize(true);
}
window.onload = function() {
// Create game canvas and run some blocks
game = new Phaser.Game(
bSize.bWidth, //is the width of your canvas i guess
bSize.bHeight, //is the height of your canvas i guess
Phaser.AUTO,
'frame', { create: create });
canvas.style.position = "fixed";
canvas.style.left = 0;
canvas.style.top = 0;
}
Since v3.16.0, use the Scale Manager. For short:
var config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
//... other settings
scene: GameScene
};
var game = new Phaser.Game(config);
Here is the full code and here are some useful examples using the Scale Manager.
There isn't a scale manager for Phaser 3 yet but it's in development. For now I suggest following this tutorial. It basically centres the canvas with some CSS, then calls a resize function that handles maintaining the game ratio when the resize event is emitted by the window.
Here is the code used in the tutorial linked above:
The css:
canvas {
display: block;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The resize function:
function resize() {
var canvas = document.querySelector("canvas");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var windowRatio = windowWidth / windowHeight;
var gameRatio = game.config.width / game.config.height;
if(windowRatio < gameRatio){
canvas.style.width = windowWidth + "px";
canvas.style.height = (windowWidth / gameRatio) + "px";
}
else {
canvas.style.width = (windowHeight * gameRatio) + "px";
canvas.style.height = windowHeight + "px";
}
}
Then:
window.onload = function() {
//Game config here
var config = {...};
var game = new Phaser.Game(config);
resize();
window.addEventListener("resize", resize, false);
}
Try adding max-width to canvas css and then max-height based on aspect ratio. E.g:
canvas {
display: block;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 50vw;
}
Scale manager will handle assets(Images,Sprites,..,...) positions and size sometime?
I'm currently learning Phaser 3. However, all the documentation I can find is about Phaser2.
When you create a game you have to set the width and height in the config:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
};
How can I scale the scene to fullscreen?
UPDATE
Phaser 3.16 is released on now (Feb, 2019), which has inbuilt Scale Manager. It provide various methods to scale your game. Check it out before trying the code below.
Phaser.Scale Docs
Notes on Scale Manager
Old Answer
You can resize the canvas element using resize function mentioned in code snippet and execute that function before starting game and whenever screen is resized. This way you can maintain the aspect ratio of 800:600(4:3) and fit the canvas element to full-screen according to screen ratio.
Run code snippet in Full Page Mode and resize your browser to see how canvas element is resized. Size of blue rectangle is the size of your canvas(game).
var game;
var gameWidth = 800;
var gameHeight = 600;
window.onload = function() {
var config = {
type: Phaser.CANVAS,
width: gameWidth,
height: gameHeight,
scene: [intro]
};
game = new Phaser.Game(config);
resize();
window.addEventListener("resize", resize, false);
};
function resize() {
var canvas = document.querySelector("canvas");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var windowRatio = windowWidth / windowHeight;
var gameRatio = game.config.width / game.config.height;
if (windowRatio < gameRatio) {
canvas.style.width = windowWidth + "px";
canvas.style.height = (windowWidth / gameRatio) + "px";
} else {
canvas.style.width = (windowHeight * gameRatio) + "px";
canvas.style.height = windowHeight + "px";
}
}
var intro = new Phaser.Scene('intro');
intro.create = function() {
var rect = new Phaser.Geom.Rectangle(0, 0, 800, 600);
var graphics = this.add.graphics({
fillStyle: {
color: 0x0000ff
}
});
graphics.fillRectShape(rect);
};
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: #000000;
padding: 0px;
margin: 0px;
}
canvas {
display: block;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/phaser#3.6.0/dist/phaser.min.js"></script>
</head>
<body>
</body>
</html>
You should check out this post. It explains this code in detail.
css style (in index.html) should be as simple as
body { margin:0; padding:0; overflow:hidden }
body>canvas { width:100%!important; height:100%!important;
position:fixed; top:0; left:0 }
!important suffix is needed to override the dynamic html style
for example
<canvas width="800" height="600"
style="width: 681.778px; height: 511.333px;
margin-left: 0px; margin-top: 0px;"></canvas>
phaser config in index.js
const config = {
parent: "phaser-example",
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create
},
// https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/
scale: {
// ignore aspect ratio:
mode: Phaser.Scale.RESIZE,
// keep aspect ratio:
//mode: Phaser.Scale.FIT,
//mode: Phaser.Scale.ENVELOP, // larger than Scale.FIT
//mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH, // auto width
//mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT, // auto height
autoCenter: Phaser.Scale.NO_CENTER,
//autoCenter: Phaser.Scale.CENTER_BOTH,
//autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
//autoCenter: Phaser.Scale.CENTER_VERTICALLY,
},
autoRound: false,
};
If I want to add an extra line to an existing polyline, should I remove this existing polyline from the canvas first, modify the points matrix, and add the new polyline? Or is it possible to change the existing polyline, like changing the text of a text object?
You may remove whole polyline and add a new one or else you need to calculate the dimensions(left,top and pathoffset) and set it to polyline.
DEMO
var canvas = new fabric.Canvas('c');
var points = [];
var random = fabric.util.getRandomInt;
points.push(new fabric.Point(random(100,200),random(200,300)));
points.push(new fabric.Point(random(200,300),random(100,200)));
points.push(new fabric.Point(random(200,250),random(150,200)));
var polyLine = new fabric.Polyline(points, {
stroke: 'black',
fill: ''
});
canvas.add(polyLine);
setPolyCoords();
function addPoint(){
polyLine.points.push(new fabric.Point(random(100,400),random(100,400)));
setPolyCoords();
}
function setPolyCoords(){
polyLine._calcDimensions();
polyLine.set({
top : polyLine.minY,
left : polyLine.minX,
pathOffset : {
x: polyLine.minX + polyLine.width / 2,
y: polyLine.minY + polyLine.height / 2
}
});
polyLine.dirty = true;
polyLine.setCoords();
canvas.renderAll();
}
canvas {
border: 1px solid #f00;
margin: 0px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick='addPoint()'>Add Point</button>
<canvas id="c" width="400" height="400"></canvas>
With Fabric version 2.7.0 this is become easier then in #Durga his answer.
See the new code in the demo below.
You can also skip setting the dirty flag manually by passing objectCaching: false to your polyline during construction:
var polyLine = new fabric.Polyline(points, {
stroke: 'black',
fill: '',
objectCaching: false
});
DEMO
var canvas = new fabric.Canvas('c');
var points = [];
var random = fabric.util.getRandomInt;
points.push(new fabric.Point(random(100,200),random(200,300)));
points.push(new fabric.Point(random(200,300),random(100,200)));
points.push(new fabric.Point(random(200,250),random(150,200)));
var polyLine = new fabric.Polyline(points, {
stroke: 'black',
fill: ''
});
canvas.add(polyLine);
function addPoint(){
polyLine.points.push(new fabric.Point(random(100,400),random(100,400)));
polyLine.dirty = true;
canvas.renderAll();
}
canvas {
border: 1px solid #f00;
margin: 0px;
display: block;
}
<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<button onclick='addPoint()'>Add Point</button>
<canvas id="c" width="400" height="400"></canvas>
I am finishing up my application and I can't figure up how to change the MenuBar in pyqt4. I am using a dark and gray theme, and on windows the menu bar is white, and I would like it to be dark like the rest of the app. How do I change the background color of QMenu or QMenuBar colors In PyQt4. I have been able to change the drop downs, but the top bar with File | Tools | Help stays white. Properties I tried changing:
background-color: # Doesn't seem to do anything
color: # Only changes the text color not the background
alternate-background-color: # Doesn't seem to do anything
Maybe I just haven't found the right property to assign the background color to match the rest of the app, a little help? Thanks!
It looks fine on my PC.
class SubMenu(QMenuBar):
def __init__(self, parent=None):
super(SubMenu, self).__init__(parent)
self.addAction("File")
self.addAction("View")
self.setStyleSheet("""QMenuBar {
background-color: blue;
}""")
self.resize(320, 240)
if __name__ == '__main__':
app = QApplication(sys.argv)
m = SubMenu()
m.show()
app.exec_()
Style sheet with Items
class SubMenu(QMenuBar):
def __init__(self, parent=None):
super(SubMenu, self).__init__(parent)
self.addAction("File")
self.addAction("View")
self.setStyleSheet("""QMenuBar {
background-color: blue;
}
QMenuBar::item {
background: blue;
}""")
self.resize(320, 240)
if __name__ == '__main__':
app = QApplication(sys.argv)
m = SubMenu()
m.show()
app.exec_()
Hope this comment may help others someday.
PySide2, Python 3+
self.saveFile_action = QAction("&Save", self)
self.saveFile_action.setShortcut("Ctrl+S")
self.saveAllFile_action = QAction("Save &All", self)
self.saveAllFile_action.setShortcut("Ctrl+Shift+S")
self.menuBar = QMenuBar(self)
self.menuBar.setStyleSheet(
"""
QMenuBar
{
background-color: #333399;
color: #999;
}
QMenuBar::item
{
background-color: #333399;
color: #999;
}
QMenuBar::item::selected
{
background-color: #3399cc;
color: #fff;
}
QMenu
{
background-color: #3399cc;
color: #fff;
}
QMenu::item::selected
{
background-color: #333399;
color: #999;
}
"""
)
self.fileMenu = QMenu("&File", self.menuBar)
self.exportSubmenu = QMenu("&Export", self.fileMenu)
self.fileMenu.addSeparator()
self.fileMenu.addAction(self.saveFile_action)
self.fileMenu.addAction(self.saveAllFile_action)
self.fileMenu.addSeparator()
self.fileMenu.addAction(self.exportSubMenu.menuAction())
self.settinsMenu = QMenu("&Settings", self.menuBar)
self.helpMenu = QMenu("&Help", self.menuBar)
self.menuBar.addAction(self.fileMenu.menuAction())
self.menuBar.addAction(self.settingsMenu.menuAction())
self.menuBar.addAction(self.helpMenu.menuAction())