Moving Eye basierend auf dem Cursor in einem Bild

Question

Ich bin ziemlich neu in Javascript/html5. Ich habe eine Frage, die ich in der Datenbank von Stack Overflow nicht finden konnte. Ich hatte gehofft, ihr könnt mir helfen! basierend auf Cursorposition

Ich habe ein Bild

ich das Auge möchte in dem weißen Kreis bewegen. Die Cursorposition habe ich bereits herausgefunden. Das einzige, was ich nicht herausfinden kann, ist, wie man die Bilder anstelle der Füllungen implementiert.

Das ist, was ich bisher habe:

function drawEye(eye) { 
    bepaalCoordinaten(eye); 

    // eye 
    context.beginPath(); 
    context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2); 
    context.fillStyle = "#fff"; 
    context.fill(); 
    context.closePath(); 

    // iris 
    context.beginPath(); 
    context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius/2, 0, Math.PI * 2); 
    context.fillStyle = "#007"; 
    context.fill(); 
    context.closePath(); 

    // pupil 
    context.beginPath(); 
    context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius/5, 0, Math.PI * 2); 
    context.fillStyle = "#000"; 
    context.fill(); 
    context.closePath(); 

    context.restore(); 
} 

Gibt es eine Möglichkeit, die Iris und Auge mit den oben aufgeführten Bilder ersetzen?

Vielen Dank im Voraus!

Answer 1

Sie können nichts "bewegen", die in html5 Leinwand gezeichnet worden ist. Stattdessen löscht man die gesamte Leinwand und zeichnet die Dinge an ihren neuen Positionen neu.

Um das Auge an der Mausposition neu zu zeichnen:

1. für mousemove- Veranstaltungen Hören,

   canvas.onmousemove=handleMousemove; 
   

2. Auf mousemove-, deaktivieren Sie die Leinwand

   context.clearRect(0,0,canvas.width,canvas.height); 
   

3. Get die Mausposition und einstellen Ihr Auge Objekt zu diesem

   function handleMousemove(e){ 
       // tell the browser we're handling this event 
       e.preventDefault(); 
       e.stopPropagation(); 
       // calc the mouse position 
       var BB=canvas.getBoundingClientRect(); 
       eye.centerX=parseInt(e.clientX-BB.left); 
       eye.centerY=parseInt(e.clientY-BB.top); 
   } 
   

4. Position Arm-Bein-Sache Redraw:

   context.drawImage(thing,0,0); 
   

5. neuzeichnen Ihr Auge:

   drawEye(eye); 
   

Nun gelten einige grundlegende Trigonometrie, um das Auge in der Sache zu enthalten:

// test if mouse is outside thing 
// if it's outside, contain the eye inside the thing 
var dx=eye.centerX-thing.cx; 
var dy=eye.centerY-thing.cy; 
var dist=Math.sqrt(dx*dx+dy*dy); 
if(dist>(thing.radius-eye.radius)){ 
    // mouse is outside thing 
    var angle=Math.atan2(dy,dx); 
    // place the eye on the radius of the thing 
    eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle); 
    eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle); 
} 

Hier ist Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var eye={centerX:0,centerY:0,radius:10}; 
 
var thing={cx:115,cy:125,radius:75}; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/thing.png"; 
 
function start(){ 
 
    ctx.drawImage(img,0,0); 
 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
} 
 

 
function drawEye(eye){ 
 
    // demo has simplified eye -- change this to your complex eye 
 
    ctx.beginPath(); 
 
    ctx.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "#000"; 
 
    ctx.fill(); 
 
    ctx.strokeStyle='deepskyblue'; 
 
    ctx.lineWidth=3; 
 
    ctx.stroke(); 
 
} 
 

 
function handleMouseMove(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // calc mouse position 
 
    eye.centerX=parseInt(e.clientX-offsetX); 
 
    eye.centerY=parseInt(e.clientY-offsetY); 
 
    // test if mouse is outside thing 
 
    // if it's outside, contain the eye inside the thing 
 
    var dx=eye.centerX-thing.cx; 
 
    var dy=eye.centerY-thing.cy; 
 
    var dist=Math.sqrt(dx*dx+dy*dy); 
 
    if(dist>(thing.radius-eye.radius)){ 
 
     // mouse is outside thing 
 
     var angle=Math.atan2(dy,dx); 
 
     // place the eye on the radius of the thing 
 
     eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle); 
 
     eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle); 
 
    } 
 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 
    // redraw the thing 
 
    ctx.drawImage(img,0,0); 
 
    // redraw the eye 
 
    drawEye(eye); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Move mouse to move the eye.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

Es gibt eine Methode drawImage genannt:

var image_element = document.createElement('img'); 

image_element.src = "http://placehold.it/50x50.jpg"; 

image_element.onload = function() { 
    context.drawImage(image_element, 10, 10); 
} 

Answer 3

Ich entschuldige mich für meine ergebnislos Antwort. Es gibt ein paar Dinge, mit denen ich immer noch zu kämpfen habe. Ich habe alles in eine einzige HTML-Datei geschrieben und versucht, sie auszuführen. Könnte das sein, weil das Bild nicht geladen wird? Entschuldigung Wenn ich irgendwelche offensichtlichen Fehler mache ...

<html> 
<head> 
<style type="text/css"> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red; } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var cw=canvas.width; 
var ch=canvas.height; 
function reOffset(){ 
    var BB=canvas.getBoundingClientRect(); 
    offsetX=BB.left; 
    offsetY=BB.top;   
} 
var offsetX,offsetY; 
reOffset(); 
window.onscroll=function(e){ reOffset(); } 
window.onresize=function(e){ reOffset(); } 

var eye={centerX:0,centerY:0,radius:10}; 
var thing={cx:115,cy:125,radius:75}; 

var img=new Image(); 
img.onload=start; 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/thing.png"; 
function start(){ 
    ctx.drawImage(img,0,0); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
} 

function drawEye(eye){ 
    // demo has simplified eye -- change this to your complex eye 
    ctx.beginPath(); 
    ctx.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2); 
    ctx.closePath(); 
    ctx.fillStyle = "#000"; 
    ctx.fill(); 
    ctx.strokeStyle='deepskyblue'; 
    ctx.lineWidth=3; 
    ctx.stroke(); 
} 

function handleMouseMove(e){ 
    // tell the browser we're handling this event 
    e.preventDefault(); 
    e.stopPropagation(); 
    // calc mouse position 
    eye.centerX=parseInt(e.clientX-offsetX); 
    eye.centerY=parseInt(e.clientY-offsetY); 
    // test if mouse is outside thing 
    // if it's outside, contain the eye inside the thing 
    var dx=eye.centerX-thing.cx; 
    var dy=eye.centerY-thing.cy; 
    var dist=Math.sqrt(dx*dx+dy*dy); 
    if(dist>(thing.radius-eye.radius)){ 
     // mouse is outside thing 
     var angle=Math.atan2(dy,dx); 
     // place the eye on the radius of the thing 
     eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle); 
     eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle); 
    } 
    // clear the canvas 
    ctx.clearRect(0,0,cw,ch); 
    // redraw the thing 
    ctx.drawImage(img,0,0); 
    // redraw the eye 
    drawEye(eye); 
} 
</script> 
</head> 
<body> 
<h4>Move mouse to move the eye.</h4> 
<canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>