캔버스 요소에 onClick 이벤트 처리기를 추가하고 마우스 이동 동작을 제어하려면 어떻게해야합니까?

Question

캔버스에 이미지가 있습니다. 이미지를 클릭하고 왼쪽 마우스 버튼을 누르지 않고 이미지를 드래그하고 마우스 왼쪽 버튼을 놓은 위치에서 이미지를 드래그합니다. 지금은 마우스 아이콘이 캔바스 위에 오자마자 이미지가 함께 움직이며 onclick 리스너 이벤트를 추가하려고했지만 내 진로의 과정에 내 초보자가 있다는 것을 확신합니다.

여기까지 제가 지금까지 생각해 냈습니다. 기존 코드로이 작업을 수행하려면 어떻게해야합니까?

var canvas = document.getElementById('customCanvas'); 
 
    var context = canvas.getContext('2d'); 
 

 
    make_base(); 
 

 
    function make_base() 
 
    { 
 
     upload_image = new Image(); 
 
     upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg'; 
 
     upload_image.onload = function(){ 
 
      context.drawImage(upload_image, 0, 0); 
 
      canvas.addEventListener('click', canvas.onmousemove = function(e) { 
 
       /// correct mouse position so its relative to canvas 
 
       var rect = canvas.getBoundingClientRect(), 
 
         constantX = 0, constantY = 0, 
 
         x = e.clientX - rect.left, 
 
         y = e.clientY - rect.top; 
 

 
       context.clearRect(0, 0, canvas.width, canvas.height); 
 
       context.drawImage(upload_image, x, y); 
 
      }); 
 
     } 
 
    }

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.sidepane { 
 
    height: 100%; 
 
    background: #E8E8EA; 
 
} 
 

 
.sidepane .form { 
 
    height: 80px; 
 
    margin: 10px 0; 
 
} 
 

 
.sidepane .assets { 
 
    width: 100%; 
 
} 
 

 
#assetText { 
 
    font-size: 24px; 
 
} 
 

 
.assets .text, .assets .image { 
 
    margin: 10px 0; 
 
} 
 
.assets .image ul li { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 5px; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.assets .image ul li img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.canvas .block { 
 
    position: relative; 
 
    width: 600px; height: 600px; 
 
    margin: 10px; 
 
    border: 1px solid; 
 
    box-shadow: 0px 0px 5px black; 
 
} 
 

 
.item { 
 
    border: 1px solid transparent; 
 
    position: absolute; 
 
} 
 

 
.item.selected { 
 
    border-color: blue; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="sidepane col-sm-2 col-md-2 col-lg-2"> 
 
    <form method="post" action="/images" enctype="multipart/form-data"> 
 
    <!--<div class="form">--> 
 
     <h3>Form</h3> 
 
     <input type="file" class="form-control" placeholder="Upload Your Images" name="filefield"> 
 
     <button id="submit" class="btn btn-default">upload</button> 
 
     <!-- Upload Form here --> 
 
     <!--</div>--> 
 
     <hr /> 
 
     <div class="assets"> 
 
      <h3>Assets</h3> 
 
      <div class="text"> 
 
       <h4>Text</h4> 
 
       <input type="text" name="textfield"> 
 
       <button id="addText" class="btn btn-default">Add Text</button> 
 
      </div> 
 
      <div class="image"> 
 
       <h4>Images</h4> 
 
       <ul class="list-unstyled"> 
 
        <!-- List of images here --> 
 
        <!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> --> 
 
       </ul> 
 
      </div> 
 
     </div> 
 

 
     <input type="submit" > 
 
    </form> 
 
</div> 
 
<!-- canvas --> 
 
<div class="canvas col-sm-8 col-md-8 col-lg-8"> 
 
    <div class="block"> 
 
     <!-- Add images and texts to here --> 
 
     <canvas id="customCanvas" width="598" height="598" style="border: 1px solid #000000"> 
 

 
     </canvas> 
 
    </div> 
 
</div>

Answer 1

먼저 마우스가 이미지 위에 있는지 확인한 다음 이미지를 드래그하려고하는지 확인해야합니다. 이를 위해서는 mousedown, mouseup 및 mousemove과 같은 이벤트가 필요합니다. 마우스 포인터가 이미지 위에 있는지 확인하려면 해당 이미지의 X, Y, width, height을 가져와야합니다. 아래의 최종 코드.

편집

일부 변경되었습니다. Image 클래스에는 X 및 Y 속성이 없으므로 해당 데이터를 저장하고 isInside 함수에 몇 가지 변경 사항을 적용 할 변수를 정의해야했습니다. 당신이 캔버스 안에 있기 때문에

var canvas = document.createElement('canvas'); 
 
document.body.appendChild(canvas); 
 
var context = canvas.getContext('2d'); 
 
canvas.width = 300; 
 
canvas.height = 300; 
 
var upload_image; 
 
var imageX, imageY; 
 
var mouseX, mouseY; 
 
var imageDrag = false; 
 

 
make_base(); 
 

 
canvas.addEventListener("mousemove", function (evt) { 
 
    var mousePos = getMousePos(canvas, evt); 
 
    mouseX = mousePos.x; 
 
    mouseY = mousePos.y; 
 
}); 
 

 
function getMousePos(canvas, event) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
     x: event.clientX - rect.left, 
 
     y: event.clientY - rect.top 
 
    }; 
 
} 
 

 
function isInsideImage(rect) { 
 
    var pos = { x: mouseX, y: mouseY }; 
 
    return pos.x > imageX && pos.x < imageX + rect.width && pos.y < imageY + rect.height && pos.y > imageY; 
 
} 
 

 
function make_base() 
 
{ 
 
    upload_image = new Image(); 
 
\t imageX = 0; 
 
\t imageY = 0; 
 
    upload_image.onload = function(){ 
 
     context.drawImage(upload_image, 0, 0); 
 
    } 
 
    upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg'; 
 
} 
 

 
canvas.addEventListener("mousedown", function (evt) { 
 
    if(isInsideImage(upload_image)) { 
 
     imageDrag = true; 
 
    } 
 
}); 
 

 
canvas.addEventListener("mouseup", function (evt) { 
 
    if(imageDrag) 
 
     imageDrag = false; 
 
}); 
 

 
setInterval(function() { 
 
    if(imageDrag) { 
 
\t \t context.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t imageX = mouseX; 
 
     imageY = mouseY; 
 
     context.drawImage(upload_image, imageX, imageY); 
 
    } 
 
}, 1000/30);

Answer 2

당신이 찾고있는 이벤트가 https://developer.mozilla.org/en/docs/Web/Events/mousedown 것 - AFAIK (내가 틀렸다면 정정 해줘) 만 클릭 이벤트 것 완벽한 클릭 이벤트가 완료 만 불 (모두 아래로 위로).

다음은 이에 대한 몇 가지 샘플 코드입니다. 이 이벤트 리스너 내부

var mouseX; 
var mouseY; // Accessible outside the function. Easier access to canvas drawing. 

var canvas = ''; // Complete this to get canvas element 

canvas.addEventListener("mousedown", function(mouse){ 
    // Get mouse co-ordinates 
}) 

, 당신은 이미지의 x와 y 위치를 결정하기 위해 캔버스에 이미지를 그릴 때

var canvasElement = element.getBoundingClientRect() 
mouseX = mouse.pageX - canvasElement.left; 
mouseY = mouse.pageY - canvasElement.top; 

이 변수를 사용 ... 현재 마우스 위치를 확인할 수 있습니다. 캔버스를 마우스로 움직이면 바뀌어야합니다. 즉, 귀하의 에 전달하십시오 make_base() 함수;

make_base(mouseX, mouseY) 

설명을 위해 계정 기능을 업데이트하십시오.

function make_base(mouseX, mouseY) 
    { 
     upload_image = new Image(); 
     upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg'; 
     upload_image.onload = function(){ 
      context.drawImage(upload_image, 0, 0); 
      canvas.addEventListener('click', canvas.onmousemove = function(e) { 
       /// correct mouse position so its relative to canvas 
       var rect = canvas.getBoundingClientRect(), 
         constantX = 0, constantY = 0, 
         x = mouseX, 
         y = mouseY 

       context.clearRect(0, 0, canvas.width, canvas.height); 
       context.drawImage(upload_image, x, y); 
      }); 
     } 
    } 

는 위의 코드 예를 들어, X와 Y는 마우스가 페이지가 아닌 캔버스에 위치를 기반으로합니다, 완료되지 있습니다. 이것을 설명하기 위해 별도의 계산이 필요합니다.