點擊圖片添加到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

這真是太神奇了，我現在非常愛你，我唯一的問題就是能夠將它與拖放功能集成在一起。就像我有一張圖片列表，當用戶點擊一張圖片時，它會添加它檢測到的圓圈並將其放在圓圈上，用戶移動它而不是像這樣自動移動:)我已經搜索了高和低的方式按照我所描述的，到目前爲止，在過去的兩週裏沒有任何地方，如果你知道任何可以幫助它的東西，我們將會非常感謝:) – gikygik

這裏有一個例子讓你點擊畫布左側的圖標，該圖標將圍繞您的鼠標移動的圓周旋轉：http://jsfiddle.net/m1erickson/BTbwL/ – markE

非常感謝您的幫助我真的很感激它:)我是如此卡住！ – gikygik

點擊圖片添加到HTML5畫布路徑

回答

相關問題