이미지를 클릭하면 아래처럼 내 HTML5 캔버스에 HTML5 캔버스 경로

내가 원을 그리기하고

에 추가 :이미지를 클릭하면 아래처럼 내 HTML5 캔버스에 HTML5 캔버스 경로

내 웹 사이트에

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
body { 
    margin: 0px; 
    padding: 0px; 
} 
</style> 
</head> 
<body> 
<canvas id="myCanvas" width="578" height="200"></canvas> 
<script> 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var centerX = canvas.width/2; 
var centerY = canvas.height/2; 
var radius = 70; 

context.beginPath(); 
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
context.lineWidth = 1; 
context.strokeStyle = '#000000'; 
context.stroke(); 
</script> 
</body> 
</html>

나는 일련의 이미지를 캔버스의 왼쪽에 그 사용자가 클릭과 이미지를 캔버스에 추가하고 드래그 할 수 있습니다. 나는이 부분을 달성하기 위해 KineticJS를 사용하고있다. 이미지를 클릭하는 방법을 이해하는 데 도움이 필요하며 이미지를 원의 경계에 추가하고 원을 따라 움직입니다. KineticJS 웹 사이트에는 사용자가 원을 그리며 드래그 할 수있는 기능이 있습니다. 저는 이것을 단순히 전체 원에 강요하고 원의 경계를 돌아 다니기를 원하기 때문에 이것을 사용하고 싶지 않습니다. 아래의 은 내가 묻는 이미지입니다. circular drag http://www.papiobeads.com/images/theimage.png

출처

2014-01-22 gikygik

캔버스 변환을 사용하여 이미지를 원의 둘레로 회전 할 수 있습니다. 원하는 회전 지점 (당신의 원의 중심) (라디안)

설정 원하는 회전 각도에

이동
는

enter image description here

가 여기 이미지를 그립니다 예제 코드 및 데모 : http://jsfiddle.net/m1erickson/t5N9T/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script 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 radianAngle=0; 
     var cx=150; 
     var cy=150; 
     var radius=50; 

     var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cars.png"; 
     function start(){ 
      animate(); 
     } 

     function animate() { 
      requestAnimationFrame(animate); 

      // Drawing code goes here 
      radianAngle+=Math.PI/120; 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
      // draw the circle 
      ctx.beginPath(); 
      ctx.arc(cx,cy,radius,0,Math.PI*2); 
      ctx.closePath(); 
      ctx.stroke(); 
      // draw the image rotated around the circumference 
      ctx.save(); 
      ctx.translate(cx,cy); 
      ctx.rotate(radianAngle); 
      ctx.drawImage(img,radius-img.width/2,-img.height/2); 
      ctx.restore(); 
     } 

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

</head> 

<body> 
    <canvas id="canvas" width=350 height=350></canvas> 
</body> 
</html>

출처

2014-01-22 22:54:37 markE

놀랍습니다. 지금 당장 당신을 사랑합니다. 내 유일한 질문은 드래그 앤 드롭으로 이것을 통합 할 수 있다는 것입니다. 마찬가지로 이미지 목록이 있고 사용자가 하나의 이미지를 클릭하면 원을 감지하여 원에 놓고 사용자가 자동으로 이동하지 않고 다음과 같이 자동으로 이동합니다 :) 나는 높고 낮음을 검색하여 당신이 그것을 가장 도움이 될만한 것을 알면, 지난 2 주간 어디에서 설명했는지를 지금까지 알지 못했습니다. – gikygik

캔버스의 왼쪽에있는 아이콘을 클릭 할 수있는 예가 있습니다. 그 아이콘은 마우스 움직임에 따라 원 주위를 돌 것입니다 : http://jsfiddle.net/m1erickson/BTbwL/ – markE

정말 고마워요. 정말 고마워요. :) 너무 막혔어요! – gikygik

이미지를 클릭하면 아래처럼 내 HTML5 캔버스에 HTML5 캔버스 경로

답변

관련 문제