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?
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.
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);
//}
I have also worked locally. After testing, I found that setting the width and height of canvas style is not a good idea
