qqqzhch
January 26, 2022, 10:09am
1
when i use resize with Image in AdvancedDynamicTexture.@babylonjs /core": "^4.2.0
const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
const image = new Image("CrossHair", "/CrossHair.png");
image.width = "30px";
image.height = "30px";
// image.stretch = Image.STRETCH_UNIFORM;
advancedTexture.addControl(image);
window.addEventListener('resize', this.getDimensions);
getDimensions() {
const bjsCanvas = this.$refs.bjsCanvas;
if(bjsCanvas!=undefined){
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
// bjsCanvas.style.width = document.documentElement.clientWidth+"px";
// bjsCanvas.style.height = document.documentElement.clientHeight+"px";
bjsCanvas.width = document.documentElement.clientWidth;
bjsCanvas.height = document.documentElement.clientHeight;
// bjsCanvas.width = this.width;
// bjsCanvas.height = this.height;
if(myScene&&myScene.getEngine){
myScene.getEngine().resize();
}
}
}
Hello! Would you be able to provide us with a playground repro?
qqqzhch
January 26, 2022, 12:26pm
3
it works right in playground
window.addEventListener(‘resize’, this.getDimensions);
Then could you provide a jsfiddle/codepen or any other kind of online repro?
1 Like
When you are using the playground are you on the latest version (5.0) or 4.2?
I’m suggesting this because it could have been a bug that was fixed since.
1 Like
import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, StandardMaterial,
Color3, HemisphericLight } from "@babylonjs/core";
import { AdvancedDynamicTexture,Image } from '@babylonjs/gui/2D';
const createScene = (canvas) => {
const engine = new Engine(canvas);
const scene = new Scene(engine);
const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
camera.setTarget(Vector3.Zero());
camera.attachControl(canvas, true);
new HemisphericLight("light", Vector3.Up(), scene);
const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
const material = new StandardMaterial("box-material", scene);
material.diffuseColor = Color3.Blue();
box.material = material;
const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
show original
I have created a new project, but it will still deform
bghgary
January 28, 2022, 12:08am
8
I played around with this. Seems like this works:
//const bjsCanvas = this.$refs.bjsCanvas;
//
//if(bjsCanvas){
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
// bjsCanvas.style.width = document.documentElement.clientWidth+"px";
// bjsCanvas.style.height = document.documentElement.clientHeight+"px";
// bjsCanvas.width = document.documentElement.clientWidth;
// bjsCanvas.height = document.documentElement.clientHeight;
//console.log(window.width,window.height);
myScene.getEngine().setSize(document.documentElement.clientWidth, document.documentElement.clientHeight);
//}
1 Like
I have also worked locally. After testing, I found that setting the width and height of canvas style is not a good idea
1 Like
