캔버스가 안드로이드의 소프트 키보드로 사라졌습니다.

Question

나는 사용자 입력 (유형 : 숫자)에 따라 캔버스가 동적으로 그려지는 작은 스크립트를 만들었지 만 작업이 필요하지만 사용자가 안드로이드 장치에서이를 숨길 때 문제점이 있습니다. 소프트 키보드를 누르면 캔버스가 지워집니다. 저것을 막는 방법 이는가? 여기에 어떤 도움 에 대한 들으 코드

 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/

Answer 1

내가 안드로이드 장치에 시도하지 않았다, 그러나 당신의 문제점은 나쁜 크기 조정 이벤트 리스너에 가능성이 높습니다.

이 핸들러는 각 resize 행사에서 캔버스 크기를 조정 할 수 있지만,이 width과 캔버스의 height을 수정하기 때문에, 다시 빈 캔버스를 잎 드로잉 함수를 호출하지 않습니다 그 컨텍스트를 재설정 (가 명확하지 또한 fillStyle, 변환 행렬, 클리핑 영역 등의 속성을 재설정합니다.

소프트 키보드를 호출하거나 숨기면 resize 이벤트가 발생합니다.

따라서 이벤트 처리기를 수정하여 캔버스의 새 크기를 설정 한 후에 모든 항목을 다시 그려야합니다.

이 경우 드로잉 함수를 별도의 변수에 저장 한 다음 입력 이벤트에 연결하고 resize 이벤트 리스너에서 호출해야합니다.

시 : 심지어 그들이 전체 컨텍스트를 재설정했다 같은 값으로 width 또는 height 속성을 설정