canvas - OGL Flowmap - 图像未调整大小
问题描述
有谁知道当我向上和向下缩放浏览器时如何调整此图像的大小?我根本不知道如何让它响应。必须有一些与修复imgSize相关的东西。即使我把它放到一个div中,它也不起作用。
关联
https://codepen.io/rodolfo-sarno/pen/OJVReoQ
代码
const renderer = new ogl.Renderer({ dpr: 2 });
const gl = renderer.gl;
const canvas = document.getElementsByClassName("a")[0].appendChild(gl.canvas);
// Variable inputs to control flowmap
let aspect = 1;
const mouse = new ogl.Vec2(-1);
const velocity = new ogl.Vec2();
let imgSize = [442, 590]
function resize() {
let a1, a2;
var imageAspect = imgSize[1] / imgSize[0];
if (imgSize[1] / imgSize[0] < imageAspect) {
a1 = 1;
a2 = imgSize[1] / imgSize[0] / imageAspect;
} else {
a1 = (imgSize[0] / imgSize[1]) * imageAspect;
a2 = 1;
}
mesh.program.uniforms.res.value = new ogl.Vec4(
imgSize[0],
imgSize[1],
a1,
a2
);
renderer.setSize(imgSize[0], imgSize[1]);
aspect = imgSize[0] / imgSize[1];
}
const flowmap = new ogl.Flowmap(gl, { falloff: 0.4, dissipation: 0.9 });
// Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
const geometry = new ogl.Geometry(gl, {
position: {
size: 2,
data: new Float32Array([-1, -1, 3, -1, -1, 3])
},
uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
});
const texture = new ogl.Texture(gl, {
minFilter: gl.LINEAR,
magFilter: gl.LINEAR
});
const img = new Image();
img.onload = () => (texture.image = img);
img.crossOrigin = "Anonymous";
img.src = "https://uploads-ssl.webflow.com/5e45dfd2f236a837b28b569d/5e4e5a6079f200b3eca2d58a_iconic_2.png?";
let a1, a2;
var imageAspect = imgSize[1] / imgSize[0];
if (imgSize[1] / imgSize[0] < imageAspect) {
a1 = 1;
a2 = imgSize[1] / imgSize[0] / imageAspect;
} else {
a1 = (imgSize[0] / imgSize[1]) * imageAspect;
a2 = 1;
}
const program = new ogl.Program(gl, {
vertex,
fragment,
uniforms: {
uTime: { value: 0 },
tWater: { value: texture },
res: {
value: new ogl.Vec4(imgSize[0], imgSize[1], a1, a2)
},
img: { value: new ogl.Vec2(imgSize[0], imgSize[1]) },
// Note that the uniform is applied without using an object and value property
// This is because the class alternates this texture between two render targets
// and updates the value property after each render.
tFlow: flowmap.uniform
}
});
const mesh = new ogl.Mesh(gl, { geometry, program });
window.addEventListener("resize", resize, false);
resize();
// Create handlers to get mouse position and velocity
const isTouchCapable = "ontouchstart" in window;
if (isTouchCapable) {
window.addEventListener("touchstart", updateMouse, false);
window.addEventListener("touchmove", updateMouse, { passive: false });
} else {
window.addEventListener("mousemove", updateMouse, false);
}
let lastTime;
const lastMouse = new ogl.Vec2();
function updateMouse(e) {
e.preventDefault();
if (e.changedTouches && e.changedTouches.length) {
e.x = e.changedTouches[0].pageX;
e.y = e.changedTouches[0].pageY;
}
const positionX = e.x - canvas.getBoundingClientRect().x
const positionY = e.y - canvas.getBoundingClientRect().y
// Get mouse value in 0 to 1 range, with y flipped
mouse.set(positionX / gl.renderer.width, 1.0 - positionY / gl.renderer.height)
// Calculate velocity
if (!lastTime) {
// First frame
lastTime = performance.now()
lastMouse.set(positionX, positionY)
}
const deltaX = positionX - lastMouse.x
const deltaY = positionY - lastMouse.y
lastMouse.set(positionX, positionY)
let time = performance.now()
// Avoid dividing by 0
let delta = Math.max(10.4, time - lastTime);
lastTime = time;
velocity.x = deltaX / delta;
velocity.y = deltaY / delta;
// Flag update to prevent hanging velocity values when not moving
velocity.needsUpdate = true;
}
requestAnimationFrame(update);
function update(t) {
requestAnimationFrame(update);
// Reset velocity when mouse not moving
if (!velocity.needsUpdate) {
mouse.set(-1);
velocity.set(0);
}
velocity.needsUpdate = false;
// Update flowmap inputs
flowmap.aspect = aspect;
flowmap.mouse.copy(mouse);
// Ease velocity input, slower when fading out
flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
flowmap.update();
program.uniforms.uTime.value = t * 0.01;
renderer.render({ scene: mesh });
}
}
谢谢
解决方案
推荐阅读
- javascript - Json 数据到 Angular 中的 CSS
- wpf - 从 Slider 定义更改 SliderThumbStyle 值
- python - 每秒实时将给定数量的值附加到列表中
- r - 网格中的错误。调用
- python - 在 Windows 上创建 turi 的构建轮失败
- java - 在 List Java 中查找元素的最佳方法
- winforms - .Net WinForms当它具有AllowTransparency = true时,使用SendMessage(...WM_SETREDRAW ..)暂停表单布局的意外行为,隐藏表单
- sql-server - 微调我的查询
- powershell - 使用 PowerShell 使用电子邮件地址更新 AD 中的职位描述
- java - 将 Kotlin 反编译为 JAVA