0

問題がありますキャンバスにクロップカスタム長方形を実装していますクロップ関数が呼び出されたときに既存のキャンバスに子を作成し、JQueryリスナーを使用して長方形を描画するJavascriptで関数を作成しました.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);
  });

誰かが私を助けることができますか？

4

2 に答える 2

0

イベントを動的に作成されたオブジェクトにバインドするには.on 、on メソッドを使用する必要があります。ページが最初にロードされて 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();

ライブデモ

于 2012-06-14T19:31:05.350 に答える
0

一時キャンバスが作成される前にイベントを添付しているようです。init()一時キャンバスを DOM に追加した後に関数にイベントを添付するか、.delegate()または.on()を使用します。

$("#mycanvas").on("mouseup", "#mycanvastmp", function() {
    //...
});
于 2012-06-14T19:32:09.767 に答える