点击图片添加到 HTML5 Canvas 路径答案

【问题标题】：Click image to add to HTML5 Canvas path点击图片添加到 HTML5 Canvas 路径
【发布时间】：2014-02-13 03:39:33
【问题描述】：

我在我的 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

【问题讨论】：

标签： javascript html drag-and-drop html5-canvas kineticjs

【解决方案1】：

您可以使用画布转换来围绕圆圈的圆周旋转图像。

移动到您想要的旋转点（圆心）
设置所需的旋转角度（以弧度为单位）
绘制图像

这是示例代码和演示：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>

【讨论】：

这太棒了，我现在非常爱你，我唯一的问题是能够将它与拖放集成。就像我有一个图像列表，当用户单击一个图像时，它会添加它检测到圆圈并将其放在圆圈上，并且用户移动它而不是像这样自动移动:) 我已经在高处和低处搜索了一种方法做我所描述的，到目前为止，在过去的两周里没有任何进展，如果你知道任何可以帮助它的事情，将不胜感激:)
这是一个示例，您可以单击画布左侧的图标，该图标将根据您的鼠标移动围绕圆圈旋转：jsfiddle.net/m1erickson/BTbwL
非常感谢您的帮助，我真的很感激 :) 我被卡住了！