CODEWITHSUNDEEP
javascripthtmldrag-and-drophtml5-canvaskineticjs
gikygik
gikygik

Reputation: 421

Click image to add to HTML5 Canvas path

I am drawing a circle onto my html5 canvas like below: 

<!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>

On my website I have a series of images on the left of the canvas that the user clicks and it adds the image to the canvas and is draggable. I am using KineticJS to achieve this portion. I need help understanding how to be able to click the image and it adds the image to the bounds of the circle and only moves along the circle. On the KineticJS website they have a feature that allows the user to drag in a circular motion. I do not want to use this as it simply constrains it to the whole circle and i would like it to go around the border of the circle. below is the image of what i'm asking: circular drag http://www.papiobeads.com/images/theimage.png

Upvotes: 0

Views: 825

Answers (1)

markE
markE

Reputation: 105015

You can use canvas transformations to rotate your image around the circumference of your circle.

  • Move to your desired rotation point (the center of your circle)
  • Set your desired rotation angle (in radians)
  • Draw the image

enter image description hereenter image description here

Here's example code and a Demo: 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>

Upvotes: 2

Related Questions