画布消失与软键盘上的android

Canvas disappear with soft keyboard on android

本文关键字：键盘 android 布消失 消失      更新时间：2023-09-26

我做了一个小脚本，其中画布是根据用户输入动态绘制的(类型:数字)，它需要工作，但问题是，在android设备上，当用户隐藏软键盘，画布被擦除。这是一种预防方法吗?谢谢你的帮助下面是代码

        var form = document.querySelector("form"),
canvas = document.getElementById("canvas"),
positions = [];
if (!canvas) {
alert("Impossible de récupérer le canvas");
}
window.addEventListener("resize", function () {
if (window.innerWidth < 500) {
    canvas.width = window.innerWidth * 0.8;
    canvas.height = window.innerWidth * 0.8;
} else {
    canvas.width = 600;
    canvas.height = 600;
}
});
var context = canvas.getContext("2d");
if (!context) {
alert("Impossible de récupérer le contexte");
}
form.addEventListener("input", function () {
var table = form.table.value,
    modulo = form.modulo.value,
    centerX = canvas.width / 2,
    centerY = canvas.height / 2,
    rayon = (canvas.width - 5) / 2;
context.lineWidth = 2;
context.strokeStyle = "#21A8A3";
context.clearRect(0, 0, canvas.width, canvas.width);
for (var i = modulo; i >= 0; i -= 1) {
    var angle = (2 * Math.PI / modulo) * i - (Math.PI / 2);
    positions[i] = {
        x: centerX + rayon * Math.cos(angle),
        y: centerY + rayon * Math.sin(angle)
    };
}
context.beginPath();
context.arc(centerX, centerY, rayon, 0, Math.PI * 2);
var j = positions.length - 1;
for (j; j >= 0; j -= 1) {
    var next = j * table;
    context.moveTo(positions[j].x, positions[j].y);
    context.lineTo(positions[next % modulo].x, positions[next % modulo].y);
}
context.stroke();
});

和url:http://multiplier.hyperion-web.com/

我没有在Android设备上尝试过，但你的问题更可能是由于你的不良调整事件监听器。

这个处理程序确实在每个resize事件调整你的画布大小，但它不会再次调用你的绘图函数，这会让你有一个空的画布，因为修改画布的width和height重置了它的上下文(它确实清除了它，但也重置了任何属性，如fillStyle，变换矩阵，剪切区域等)。

调用和隐藏软键盘将触发一个resize事件。

所以你的解决方案是修复你的事件处理程序，以便它在设置画布的新尺寸后重新绘制所有内容。

为此，你必须将绘图函数存储在一个单独的变量中，然后将其附加到输入事件中，并在resize事件侦听器中调用它。

Ps:即使将width或height属性设置为相同的值，也会重置整个上下文

相关文章：