0

2つのキャンバスを使用しようとしています。両方にドロップされた画像を受け入れ、マウスクリックを使用して画像を操作する必要があります。これが私が取り組んでいるコードです。

'droppedImage'キャンバスのイベントリスナーしかない場合は問題なく動作します。'changeImage'キャンバスのハンドラーを配置するとすぐに、2番目のキャンバスが表示され、1番目のキャンバスの拡張として座標が報告されます。 RGB値を表示したり、3番目のキャンバスの背景を変更したりしなくなりました'selectedColour'

私が就寝時にこれを投稿します。誰かが答えを与えたり、さらに情報が必要な場合は、更新するために仕事をする前に明日ポップします。

window.onload = function() {
    var droppedImage = document.getElementById("droppedImage"),
        ctx = droppedImage.getContext("2d");
    droppedImage.addEventListener("mouseup", mpos);
        // init event handlers
    droppedImage.addEventListener("dragenter", dragEnter, false);
    droppedImage.addEventListener("dragexit", dragExit, false);
    droppedImage.addEventListener("dragover", dragOver, false);
    droppedImage.addEventListener("drop", drop, false);

        var changeImage = document.getElementById("changeImage"),
        ctx = changeImage.getContext("2d");
    changeImage.addEventListener("mouseup", mpos);
    // init event handlers
    changeImage.addEventListener("dragenter", dragEnter, false);
    changeImage.addEventListener("dragexit", dragExit, false);
    changeImage.addEventListener("dragover", dragOver, false);
    changeImage.addEventListener("drop", drop, false);

    var selectedColour = document.getElementById("selectedColour");

function dragEnter(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function dragExit(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function dragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files;
    var count = files.length;

    // Only call the handler if 1 or more files was dropped.
    if (count >0)   
        importImage(files);
}




function mpos(e) {
    var cX = 0,
        cY = 0;

    if (event.pageX || event.pageY) {
        cX = event.pageX;
        cY = event.pageY;
    }
    else {
        cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    cX -= droppedImage.offsetLeft;
    cY -= droppedImage.offsetTop;

   // ctx.fillRect(cX, cY, 2, 2);

   alert("X co-ord : "+ cX +", Y co-ord : "+ cY);
   var imageData = ctx.getImageData(cX, cY, 1, 1);
   alert("Pixel 1: "+ imageData.data[0]+", "+imageData.data[1]+", "+ imageData.data[2]+", "+ imageData.data[3]);
   selectedColour.style.backgroundColor = "rgb("+imageData.data[0]+","+imageData.data[1]+","+imageData.data[2]+")";

}
}


function importImage(files) {

    var file = files[0];
    var reader = new FileReader;
    reader.onloadend = handleReaderLoadEnd; 
    reader.readAsDataURL(file);



function handleReaderLoadEnd(evt){     


    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    var img = new Image;
        img.src = event.target.result;          
        img.onload = function() {       
        width = img.width;
        height = img.height;        
        var scaleX, scaleY, scale;
        var scaledWidth, scaledHeight;
        scaleX = width / canvas.width;
        scaleY = height / canvas.height;
        scale = scaleX > scaleY ? scaleX : scaleY;
        scaledWidth = width / scale;
        scaledHeight = height / scale;
        ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.drawImage(img, (canvas.width - scaledWidth) / 2, (canvas.height - scaledHeight) / 2, scaledWidth, scaledHeight);

        }
    }


}
4

1 に答える 1

1

理論的には、2セットのキャンバスがあり、両方にイベントリスナーを追加すると、設計上、両方のイベントリスナーのセットが同時に起動します。イベントリスナーがアタッチされたキャンバスを1つ作成してから、マウスの座標を検出し、クリックされている画像を操作することをお勧めします。キャンバス内に描画されたスプライトにクリックハンドラを設定することはできず、キャンバス自体にのみ設定できることに注意してください。マウスの座標が描画されたスプライトの内側にあるかどうかを確認します。

あなたのシナリオでは、ドロップインされた画像を複製して、それを2番目のcanvas要素に渡します。ある種のツーアップ画像編集アプリケーションを実行していると想定しています。この場合、画像を入れるために左側に1つの「ドロップゾーン」があり、右側に編集可能に表示されます。そして、1つのキャンバスにのみクリックハンドラーを配置します。このスレッドでは、これについてもう少し考えています。

于 2013-01-19T14:56:04.200 に答える