点击图片添加到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画布路径

回答

相关问题