지금 HTML5 캔버스를 사용하는 방법을 배우고 있습니다. 나는 수평선을 따라서 원을 그리는 간단한 스크립트를 가지고있다.캔버스에 그려진 도형을 클릭했는지 쉽게 판단 할 수 있습니까?
대화 형으로 스크립트를 개선하고 싶습니다. 선을 따라 원 중 하나를 클릭 할 수 있기를 원하면 원에 연결된 데이터가 캔버스에 텍스트로 표시됩니다.
캔버스에서 쉽게 구현할 수 있습니까? 자습서에서 나는 캔버스 자체에 onclick을 놓아야한다는 것을 모았습니다. 거기에서 나는 마우스 커서가 클릭 된 곳을 찾아야하고 클릭 한 점이 포함 된 원을 어떻게 든 고쳐야한다고 생각했습니다.
이 문제를 해결할 수있는 코드 또는 포인터가 있습니까? 또는 캔버스가 실제로 이런 유형의 문제에 적합하지 않습니까? 모든 의견은 대단히 감사하겠습니다.
캔버스에 대한 클릭 이벤트를 만들고 처리기에서 사용자가 원을 클릭하면 계산해야합니다 (일부 기본 수학). 다른 방법은 캔버스를 사용하는 것이 아니라 SVG에 유용 할 수있는 raphael 라이브러리가 있습니다.
캔버스는 래스터 그래픽을 사용합니다. 서클을 그리면 서클의 정체성은 더 이상 존재하지 않습니다. 픽셀 만 있으면됩니다. 너는 너 자신 모든 모양을 체크하고 있어야한다.
SVG와 같은 벡터 그래픽을 사용하면 셰이프가 ID를 유지하고 조작 할 수 있습니다. 이 방법이 더 쉬울 것입니다.
캔버스의 isPointInPath 메서드를 사용하여 마우스 이벤트 처리를 추가 할 수 있습니다. 아래 (테스트되지 않음)와 같은 것입니다.
// add click event handler to canvas
// on click
var rect = canvas.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;
ctx.beginPath()
// draw stuff
if (ctx.isPointInPath(mouseX, mouseY)) {
// handle click
}
이것은 모든 모양을 인식하므로 직사각형과 원 이외의 그림을 그릴 때 매우 유용합니다. 그러나,이 주요 단점은 모든 클릭 (또는 mouseover를 추가하는 경우 mousemove)에 다시 그리기해야한다는 것입니다. 내 경험에 비추어 볼 때 적어도 성능 문제가 발생하기 전에 적어도 300 개의 객체를 그리는 것이 좋습니다.
또한 어떤 이유로 든 고정되지 않은 상태로 유지되는 isPointInPath의 firefoxes 구현에 bug이 있다는 것에주의해야합니다. 그러나 행복하게 수정 충분히 쉽게
CanvasRenderingContext2D.prototype.isPointInPath_mozilla = function(x, y)
{
if (navigator.userAgent.indexOf('Firefox') != -1){
this.save();
this.setTransform(1, 0, 0, 1, 0, 0);
var ret = this.isPointInPath(x, y);
this.restore();
} else
var ret = this.isPointInPath(x, y);
return ret;
}
단지 ctx.isPointInPath_mozilla (X, Y)와 ctx.isPointInPath (X, Y)를 교체하고 나는 모바일 장치에 대한이 같은 짓을 한
모든 작동 캔버스 그리기 및 모양 일치.
내 절차는.
캔버스 높이와 너비의 픽셀 수를 기반으로 2D 배열을 선언하십시오.
는 MouseMove 이벤트 이벤트 (데스크톱 브라우저) 0로 배열 채우기 위치를 추적 할 수 있습니다. X, Y 값을 얻습니다. 2D 배열의 은 행과 열에 1을 넣습니다 (X 및 Y 값).
그림을 그리면 2D 이진 이미지 배열이 생성됩니다.
이제 재미있는 부분 :
보십시오 이미지 momentam 또는이 링크에서 다른 적절한 방법. http://www.imageprocessingplace.com/downloads_V3/root_downloads/tutorials/Tutorial--Algorithms%20for%202-D%20Object%20Recognition.pdf
2D 그리기 모양 배열을 저장하고 현재 그려진 이미지와 일치 시키면 가장 가까운 일치 항목을 찾을 수 있습니다. 사용자가 완전히 다른 모양을 그린 경우 적합한 임계 값을 찾으십시오.
도움이되기를 바랍니다.