Hello!

I need the object to rotate “by the mouse” (i.e. that it is turned to the mouse).

Rotate toward position mousex and mousey

    2 answers 2

    Here is the algorithm

    1. determine the angle of rotation (the angle between the x-axis and the guiding vector)

    2. turn the object around its center

    3. move to the goal (to the mouse)

    and to rotate the image, you must rotate the entire canvas, first moving the coordinate to the point around which rotation is necessary, draw the image and move the origin back to the original point.

    https://jsfiddle.net/d4w9LnLu/

    (function() { const cnv = document.getElementById("cnv"); const ctx = cnv.getContext("2d"); let mouse = new Vec2(); let distanceVec = new Vec2(); let myImg = new ImgSceneObject( new Image(), 'http://www.java-forums.org/attachments/java-2d/1449d1319003532t-tank-game-help-please-tankeast.jpg', 50, 50, new Vec2(200, 200) ); let angle = 0; let translationVec = new Vec2(myImg.pos.x, myImg.pos.y); let direction = new Vec2(); let translationSpeed = 2; function initApp() { cnv.width = window.innerWidth; cnv.height = window.innerHeight; document.onmousemove = mousemove; } function Vec2(x=0, y=0) { this.x = x; this.y = y; this.add = function(v) { this.x += vx; this.y += vy; return this; }; this.sub = function(v) { this.x -= vx; this.y -= vy; return this; }; this.multScalar = function(s) { this.x *= s; this.y *= s; return this; }; this.dot = function(v) { return this.x*vx + this.y*vy; }; this.rotate = function(angle) { this.x = this.x*Math.cos(angle) - y*Math.sin(angle); this.y = this.x*Math.sin(angle) + y*Math.cos(angle); return this; }; this.translate = function(v) { this.add(v); return this; }; this.length = function() { return Math.sqrt(this.x*this.x + this.y*this.y); }; this.normalize = function() { const invLength = 1.0/this.length(); this.x *= invLength; this.y *= invLength; return this; }; } function ImgSceneObject(img, src, w, h, imageCenter) { loaded = false; img.onload = function() { loaded = true; } img.src = src; this.pos = imageCenter; this.w = w; this.h = h; this.update = function(angle, v) { ctx.save(); ctx.translate(this.pos.x, this.pos.y); ctx.rotate(angle); this.pos.x = vx; this.pos.y = vy; if (loaded) { ctx.drawImage(img, -this.w/2, -this.h/2, this.w, this.h); } ctx.restore(); }; } function updateScene() { renderTarget(); myImg.update(angle, translationVec); distanceVec.x = mouse.x - myImg.pos.x; distanceVec.y = mouse.y - myImg.pos.y; if (distanceVec.length() > 10) { translationVec.add(direction); } } function renderTarget() { ctx.beginPath(); ctx.arc(mouse.x - 7, mouse.y - 7, 7, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); } function gameloop() { ctx.clearRect(0, 0, cnv.width, cnv.height); updateScene(); id = requestAnimationFrame(gameloop); } function mousemove(e) { mouse.x = e.clientX; mouse.y = e.clientY; direction.x = mouse.x; direction.y = mouse.y; angle = Math.atan2(mouse.y-myImg.pos.y, mouse.x-myImg.pos.x); direction.sub(myImg.pos).normalize().multScalar(translationSpeed); }; initApp(); gameloop(); }()); 
     #cnv { border: 1px solid #000; } 
     <canvas id="cnv"></canvas>

    I will have questions on implementation - ask

    • Exactly what is needed! Thank you so much :)) - TitaN
    • @TitaN please - ampawd
    • this.angle = Math.atan2(Mouse.y-this.centralImagePoint.y, Mouse.x-this.centralImagePoint.x); - why does not it work? - TitaN

     var canv = new Canv(canvas.getContext('2d'), canvas.width, canvas.height); var ax = rand(canvas.width); var ay = rand(canvas.height); var bx = rand(canvas.width); var by = rand(canvas.height); var speed = 3; canvas.addEventListener('mousemove', function(e) { var rect = canvas.getBoundingClientRect(); bx = e.clientX - rect.left; by = e.clientY - rect.top; }, false); var timer = setInterval(function() { var angle = Math.atan2(by - ay, bx - ax); if (angle < 0) angle += 2 * Math.PI; ax += speed * Math.cos(angle); ay += speed * Math.sin(angle); canv.clear(); canv.drawCircle(ax, ay, '#0e0'); canv.drawLine(ax, ay, angle, 'black') canv.drawCircle(bx, by, '#e00'); }, 50); function rand(max) { return Math.floor(Math.random() * max); } function Canv(ctx, w, h) { this.radius = 5; this.clear = function() { ctx.fillStyle = 'white'; ctx.rect(0, 0, w, h); ctx.fill(); }; this.drawCircle = function(x, y, color) { ctx.strokeStyle = "#000"; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, this.radius, Math.PI * 2, false); ctx.stroke(); ctx.fill(); ctx.closePath(); }; this.drawLine = function(x, y, deg, color) { ctx.strokeStyle = color; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + Math.cos(deg) * 2 * this.radius, y + Math.sin(deg) * 2 * this.radius); ctx.stroke(); ctx.closePath(); }; } 
     input[type="range"] { width: 50%; } input[type="text"] { width: 75px; } #panel { width: 250px; height: 250px; } 
     <div id="panel"> <canvas id="canvas" width="400" height="300"></canvas> </div>

    • one
      I need to rotate the image, so ctx.lineTo(x + Math.cos(deg) * 2 * this.radius, y + Math.sin(deg) * 2 * this.radius); does not fit - TitaN