Canvas putImageData iPad에서만 XOR 문제가 발생했습니다.

다음 코드의 문제점을 알고있는 사람이 있습니까?Canvas putImageData iPad에서만 XOR 문제가 발생했습니다.

그것은 창에 벌금과 안드로이드 실행되지만 커서가 일관성 아이 패드에 약간의 흔적 라인을 남긴다. getImageData를 사용하고 비트 및 XOR을 사용하여 직사각형 커서 블록을 그리고 지우려면 putImageData를 사용하고 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<script src="jquery-1.11.0.js"></script> 
<script language="javascript"> 
var m_ctx; 
var m_canvas; 
var m_bCursorOn = false; 
var m_nXpos = 0; 

function DrawCursor() 
{ 
    var nCellY = 10; 
    var nCellH = 24; 
    var nCellX = m_nXpos; 
    var nCellW = 13; 

    m_bCursorOn = !m_bCursorOn; 

    // XOR the cursor location image to draw/erase the cursor 
    var imgData = m_ctx.getImageData(nCellX, nCellY, nCellW, nCellH); 
    var data = imgData.data; 
    for(var i = 0; i < data.length; i += 4) 
    { 
     data[i] ^= 255; 
     data[i + 1] ^= 255; 
     data[i + 2] ^= 255;  
    } 
    m_ctx.putImageData(imgData, nCellX, nCellY); 
} 

function MoveCursor() 
{ 
    if (m_bCursorOn) 
     DrawCursor(); 

    m_nXpos += 13; 
    if (m_nXpos >1000) 
     m_nXpos = 0; 

    DrawCursor(); 
} 

window.onload = function() 
{ 
    m_canvas = $('#myCanvas')[0]; 
    m_ctx = m_canvas.getContext("2d"); 
    m_canvas.width = window.innerWidth; 
    m_canvas.height = window.innerHeight; 
    m_ctx.fillStyle = "black"; 
    m_ctx.fillRect(0, 0, m_canvas.width, m_canvas.height); 
    setInterval(function(){ DrawCursor();}, 301); // cursor blink 
    setInterval(function(){ MoveCursor();}, 501); 
}; 

</script> 
</head> 

<body > 
<canvas id="myCanvas" width="800" height="600"></canvas> 
</body> 
</html>

출처

2014-04-07 Rex Hui

잘 모르겠지만, 서브 픽셀 스무딩의 문제가 될 수 있다고 생각합니다. 기본적으로 사각형을 원형 숫자로 그립니다.하지만 여기서는 반으로, 반은 그려야 할 브라우저를 의미합니다. 그 approximations 뒤에 떠나는 오래된 커서를 삭제합니다. .5 숫자 (예 : 200.5, 157.5, ...)로 정사각형을 그려보고 해결하는지 확인하십시오. –

조나스에게 신속한 답변을 해주십시오. 그러나 서브 픽셀 스무딩 (sub-pixel smoothing)이 있다면 다른 방법이 될 것이라고 생각합니다. 내 말은 정수를 지정하면 특정 픽셀이어야한다는 뜻입니다. 당신이 말하는 것을 할 필요가있는 10 진수를 지정했을 때만, 맞습니까? –

캔버스 요소에서 이런 식으로 작동하지 않습니다. –

이 대부분 사파리 브라우저 부분 폭 대 백 버퍼 픽셀 종횡비를 다루는 방법의 문제이다. 픽셀 버퍼를 직접 처리 할 때 하위 픽셀링과 관련이 없습니다.

코드가 올바른 것입니다.

m_canvas.width = window.innerWidth; 
m_canvas.height = window.innerHeight;

m_canvas.width = window.innerWidth|0; // removes fractions 
m_canvas.height = window.innerHeight|0;

과 문제가 (Safari에서 멀리 modified jsbin here을 가야한다 : A-주위 작품

이 줄을 수정 캔버스에 대한 정수 값으로 폭 값을 강제하는 것입니다).

희망이 도움이됩니다.

은 원래의 답변을 다시 추가
:이 위치에

m_canvas.style.width = ((m_canvaswindow.width/13)|0)*13+'px';

이 줄을 추가 (

window.onload = function() { 
    m_canvas = $('#myCanvas')[0]; 
    m_ctx = m_canvas.getContext("2d"); 
    m_canvas.width = window.innerWidth; 
    m_canvas.height = window.innerHeight; 

    m_canvas.style.width = ((m_canvas.width/13)|0)*13+'px'; 
    // possibly you will need this for height as well 

    m_ctx.fillStyle = "black"; 
    m_ctx.fillRect(0, 0, m_canvas.width, m_canvas.height); 
    setInterval(DrawCursor, 301); 
    setInterval(MoveCursor, 501); 
};

이 커서 크기에 맞게 크기를 강제로 당신의 경우 커서 크기를 변경하면 거기에 13 물론 업데이 트해야합니다 - 대신 그냥 동적 값을 사용).

그 외에도 Safari 브라우저에서는 분명히 문제가되며 여기에 대한 답변은 당연히 임시 해결 방법으로 만 작동합니다. 문제가 해결되기를 기다리는 것보다 많은 것을 할 수 있습니다 (Safari 팀에보고하는 것이 좋습니다).

출처

2014-04-07 23:37:11 K3N

Cryptoburner, 답변 해 주셔서 대단히 감사합니다. 귀하의 대답이 도움이 될 것 같지만 (문제는 자주 발생하지 않는 것 같습니다.) 문제를 완전히 해결하지 못합니다. 데모에 마우스 클릭 이벤트를 업데이트하여 커서를 이동했습니다. 몇 번 시도해도 문제가 표시됩니다. http://jsbin.com/xecicovi/8/ –

@RexHui 내가 원래의 대답에 내가 (답변을 단순화하기 위해) 편집 추가했습니다. 그것이 향상되는지보십시오. 즉, 이것은 분명히 사파리 문제이며이를 해결하는 사파리 팀이어야합니다. 대답은 문제 자체를 해결할 수 없기 때문에 일시적인 해결 방법으로 만 작동합니다. – K3N

네, 도와 주셔서 감사합니다. –

Canvas putImageData iPad에서만 XOR 문제가 발생했습니다.

답변

관련 문제