Canvas에 JQuery Listener가 작동하지 않습니다.

Question

캔버스에 자르기 사용자 정의 사각형을 구현하는 데 문제가 있습니다. 자르기 함수를 호출 할 때 Javascript에서 함수를 만들 때 기존 캔버스에서 자식을 만든 다음 JQuery 리스너는 사각형을 그립니다. 리스너가 작동하지 않는 동안 childNode가 올바르게 작성되지만 이벤트를받지 못합니다. 내 코드는 다음과 같습니다.

var dragging = false; 
var xstart = 0; 
var ystart = 0; 
var width = 0; 
var height = 0; 
var ctxotmp = null; 
var ctxtmp = null; 
var canvastmp = null; 
var mycanvas = null; 
function draw() { 
ctxtmp.fillRect(xstart, ystart, width, height); 
} 

function init() { 
    mycanvas = $('#mycanvas')[0]; 
    // create temp canvas 
    canvastmp = document.createElement('canvas'); 
    canvastmp.id = "mycanvastmp"; 
    canvastmp.width = mycanvas.width; 
    canvastmp.height = mycanvas.height; 
    mycanvas.parentNode.appendChild(canvastmp); 
    $("#mycanvastmp").css({position:"absolute",top:$("#mycanvas").css("top"),left:$("#mycanvas").css("left")}); 
    canvastmp = $('#mycanvastmp')[0]; 
    ctxtmp = canvastmp.getContext('2d'); 
    ctxtmp.lineWidth = 1; 
    ctxtmp.fillStyle = "rgba(0, 0, 0, 0.5)"; 
} 
//listener 
$('#mycanvastmp').mousedown(function(e) { 
    var xoffs = $(this).offset().left; 
    var yoffs = $(this).offset().top; 
    xstart = e.pageX - xoffs; 
    ystart = e.pageY - yoffs; 
    dragging = true; 
    }); 

    $('#mycanvastmp').mousemove(function(e) { 
    if(dragging) { 
     var xoffs = $(this).offset().left; 
     var yoffs = $(this).offset().top; 
     width = e.pageX - xoffs - xstart; 
     height = e.pageY - yoffs - ystart; 
     ctxtmp.clearRect(0, 0, $(this).width(), $(this).height()); 
     draw(); 
    } 
    }); 

    $('#mycanvastmp').mouseup(function() { 
    dragging=false; 
    alert('The rectangle for crop (x, y, width, height): ' + xstart + ', ' + ystart + ', ' + width + ', ' + height); 
    }); 

누군가가 도와 줄 수 있습니까?

Answer 1

이벤트를 동적으로 생성 된 개체에 바인딩하려면 .onon method을 사용해야합니다. 처음 페이지가로드되고 DOM이 실행되면 tempCanvas이 표시되지 않으므로 초기에 첨부하지 않습니다. 임시 캔버스가 생성되기 전에 이벤트를 부착하는 것처럼

//listener 
$('body').on('mousedown' ,'#mycanvastmp', function(e) { 

    var xoffs = $(this).offset().left; 
    var yoffs = $(this).offset().top; 
    xstart = e.pageX - xoffs; 
    ystart = e.pageY - yoffs; 
    dragging = true; 
    }); 

    $('body').on('mousemove' ,'#mycanvastmp', function(e) { 
    if(dragging) { 
     var xoffs = $(this).offset().left; 
     var yoffs = $(this).offset().top; 
     width = e.pageX - xoffs - xstart; 
     height = e.pageY - yoffs - ystart; 
     ctxtmp.clearRect(0, 0, $(this).width(), $(this).height()); 
     draw(); 
    } 
    }); 

$('body').on('mouseup' ,'#mycanvastmp', function(e) { 
    dragging=false; 
    alert('The rectangle for crop (x, y, width, height): ' + xstart + ', ' + ystart + ', ' + width + ', ' + height); 
    }); 

init(); 

Live Demo

Answer 2

보인다. 는 DOM에 임시 캔버스를 추가 한 후 init() 함수에서 이벤트를 첨부하거나 .delegate() 또는 .on()

$("#mycanvas").on("mouseup", "#mycanvastmp", function() { 
    //... 
});