캔버스에있는 입력 버튼을 마우스로 클릭하면 트리거됩니다.

저는 html 5 캔버스를 사용하여 사진 편집기 프로그램을 작성 중이며 사용자가 이미지를 찾기 위해 사용할 수있는 창을 만드는 방법을 사용하고 있습니다. 문제는 측면에 html 단추가 있거나 어딘가에 겹쳐져있는 대신 캔버스 응용 프로그램 내에서 "단추"를 클릭 할 때이 작업을 수행 할 수 있기를 원합니다. 기본적으로 사용자가 캔버스 내에서 내 버튼을 클릭하면 버튼에 대한 클릭 이벤트가 트리거됩니다. 나는 이것에 대한 몇 가지 구글 검색을 해왔지만, 내가 찾고있는 것을 꽤 찾을 수 없었다 ...캔버스에있는 입력 버튼을 마우스로 클릭하면 트리거됩니다.

고마워! 당신은 onclick 이벤트를 사용하는 경우

출처

2013-06-29 Oni Enzeru

, 당신은 이런 식으로 뭔가를해야합니다 :

편집 :은 그래서 당신은 클릭해야 캔버스에 사각형 영역을 가지고? 때문에 보안에 ...

var canvas = document.getElementById('yourCanvasId'); 
    button = document.getElementById('yourButtonId'); 
canvas.onclick = function(event) { 
event = event || window.event; 
var x = event.pageX - canvas.offsetLeft, 
    y = event.pageY - canvas.offsetTop; 
if(x > leftLimit && x < rightLimit && y > topLimit && y < bottomLimit) { 
    var e = document.createEvent("MouseEvents"); 
    e.initMouseEvent("click",1,1,document.defaultView,0,0,0,0,0,0,0,0,0,0,button); 
    button.dispatchEvent(e); 
    } 
}

출처

2013-06-29 21:29:02 heytools

전체 캔버스가 아니라 캔버스 내에서 버튼으로 정의한 것, 지금 바로 클릭하면 알림 및 일을 할 수 있지만 예 : document.getElementById ('fileDerp') .딸깍 하는 소리(); 아무것도하지 않는 것 같아요 .- 어떤 아이디어? –

내가 그것을 밖으로 낸 사람을 신경 쓰지 : 그래서, 당신은 leftLimit이 가 rightLimit 4 개 제한 topLimit 및 bottomLimit을 정의하고, 온 클릭이 기능을 실행 이유는 실제로 입력 형식 = "자바 스크립트에서 파일"클릭 이벤트에 액세스 할 수 없습니다.

출처

2013-06-29 21:49:12

나만의 답변을 수락하십시오. – Mataniko

캔버스에있는 입력 버튼을 마우스로 클릭하면 트리거됩니다.

답변

관련 문제