Continued on https://forum.zimjs.com/t/iframe-zoom-redraw-zim-divcanvas-manually/5002 I build follwow scene.
When I move the slider slowly, the grid and crosshairs flicker. If I move the slider quickly, the grid and crosshairs do not flicker when zooming.
How can I prevent the image from flickering when zooming slowly?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Parent</title>
<style>
#outer {
width: 1024px;
height: 768px;
overflow: scroll;
}
</style>
<script>
var outer;
window.addEventListener("load", () => {
form = document.getElementById("form");
form.reset();
outer = document.getElementById("outer");
const slider = document.querySelector("#slider");
const iframe = document.querySelector("#iframe");
iframe.value = 1;
const baseW = 1024;
const baseH = 768;
slider.addEventListener("input", (e) => {
const scale = parseFloat(e.target.value);
iframe.width = baseW * scale;
iframe.height = baseH * scale;
outer.scrollLeft = ((baseW * scale) - baseW) / 2;
outer.scrollTop = ((baseH * scale) - baseH) / 2;
});
});
</script>
</head>
<body style="margin: 0; padding: 20px;">
<p>
<form id="form">
<label>Scale: </label>
<input id="slider" type="range" min="1" max="5" value="1" step="any" />
</form>
</p>
<div id="outer">
<iframe id="iframe" src="zim.html" width="1024" height="768"></iframe>
</div>
</body>
</html>
ZIM.html
<html>
<head>
<script type="module">
import "https://zimjs.org/cdn/020/zim";
new zim.Frame({
scaling: "fit",
color: "#aaaaaa",
width: 1024,
height: 768,
delay: 0,
ready: ready,
});
function ready() {
let container = new Container().pos(0, 0);
let grid = new Grid().pos(0, 0);
new Circle(100, purple).addTo(container);
let checkBox1 = new CheckBox({
size: 50,
label: "Test",
});
checkBox1.x = 512;
checkBox1.y = 350;
checkBox1.addTo(container);
}
</script>
<style>
html,
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
