HTML5 캔버스를 마우스 클릭 위치로 이동

기본적으로 A 점 (10x, 10y)에서 캔버스 위의 마우스를 클릭 한 위치 (255x, 34y)로 개체를 이동하려고합니다.HTML5 캔버스를 마우스 클릭 위치로 이동

현재 메소드를 사용하고 있지만 ++ X, ++ Y 좌표가 사용됩니다. 위로 오른쪽.

나는 그것을 곧바로 위치에 놓기를 원하며, 경로상의 애니메이션을 좋아한다. 당신은 당신이 정말로해야 할 일 "이동"개체가 개체를 지우고 다시 그릴 때 B.

2013-05-26 Brian

포인트 지점까지가는 둔화 그것을

첫 번째 코드 지정된에서 RECT을 다시 그릴하는 함수 X, Y는

function draw(x,y){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.beginPath(); 
    ctx.fillStyle="skyblue"; 
    ctx.strokeStyle="gray"; 
    ctx.rect(x,y,30,20); 
    ctx.fill(); 
    ctx.stroke(); 
}

그런 mousedown 이벤트를 처리하고이 예제는 브라우저 간 호환성을 위해 jQuery를 사용하는 그리기 기능

전화,하지만 당신은 네이티브 자바 스크립트를 사용하여 코딩 항상 수 있습니다. 내가해야

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    function draw(x,y){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.fillStyle="skyblue"; 
     ctx.strokeStyle="gray"; 
     ctx.rect(x,y,30,20); 
     ctx.fill(); 
     ctx.stroke(); 
    } 

    function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 
     $("#downlog").html("Down: "+ mouseX + "/" + mouseY); 

     // Put your mousedown stuff here 
     draw(mouseX,mouseY); 

    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

    // start the rect at [10,10] 
    draw(10,10); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Click to redraw the rect at the mouse position</p> 
    <p id="downlog">Down</p> 
    <canvas id="canvas" width=300 height=300></canvas> 

</body> 
</html>

출처

2013-05-26 04:06:44 markE

http://jsfiddle.net/m1erickson/GHSG4/ 아마 내가 애니메이션 같은 이동 객체를해야한다는 것을 포함 : 여기

// listen for all mousedown events on the canvas $("#canvas").mousedown(function(e){handleMouseDown(e);}); // handle the mousedown event function handleMouseDown(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); $("#downlog").html("Down: "+ mouseX + "/" + mouseY); // Put your mousedown stuff here draw(mouseX,mouseY); }

는 코드와 바이올린입니다. 천천히 좌표에 접근하십시오. – Brian

그래, requestAnimationFrame을 사용하여 객체를 대상쪽으로 점차 이동시키는 draw 함수를 수정하십시오. 처음부터 끝까지 라인의 포인트를 보간해야합니다. 다음은 requestAnimationFrame에 대한 참조입니다. http://cookbooks.adobe.com/post_HTML5_requestAnimationFrame_simple_example-19747.html 여기에 라인의 점을 보간하는 데 대한 참조가 있습니다. http://snipplr.com/view/47206/ – markE

Abobe 웹 사이트 홀수로드 것 같습니다. 하지만 너무 많이 요구하지 않는다면, 이것을 연극에 넣을 수 있습니까? 나는 이런 종류의 물건에 익숙하지 않다. Line에서 Interpolate Points를 보면, 내가 본 것 같습니다. 어도비 애니메이션 부분은 이미 알아 낸 것입니다. 나는 setintervaul에 대본을 가지고있다. 내가 말했듯이, 나는 움직이는 사물을 가지고 있지만, 그들은 첫 번째 X에서 Y로 움직입니다. 나는 동시에 X & Y가 필요하다. 직선과 같이 A를 가리키면 A를 가리키고 B는 올라가지 않고 목적지까지옵니다. – Brian

HTML5 캔버스를 마우스 클릭 위치로 이동

답변

관련 문제